Buttons Are Buttons

Many visitors don't use a mouse. They press Tab to move from control to control, and Enter to use the one that has the focus. Links and buttons get this for free. A div or an li with an onClick does not: Tab skips it, and Enter does nothing.

The rule is simple. What takes the visitor to another page is a link: an a with an href. What does something on this page is a button. Give a button type="button" so it never sends a form by accident, and put words inside it: they are its name.

<a href="/help">Help</a>
<button type="button" onClick={() => setOpen(true)}>
  Show filters
</button>

Right now the page lists the products, but it has no link and no buttons: Tab finds nothing to focus and Enter does nothing. When you're done, the check must see:

link: Cart (0) -> /cart
list
  item: Mug $12
    button: Add to cart
  ...
> press Tab
  + link: Cart (0) -> /cart (focused)
> press Tab
      item: Mug $12
  +     button: Add to cart (focused)
> press Enter
  + link: Cart (1) -> /cart
> click "Add to cart" in "Lamp"
  + link: Cart (2) -> /cart

Your task: in src/App.jsx, below the heading, add a link to "/cart" that shows Cart ({cart.length}). In each item, add a button with type="button" that calls addToCart(product) on a click, with the words Add to cart inside.

Assignment
Follow the Coding Tutorial to add a real link to the cart and a real Add to cart button to every product, so the keyboard can reach and use them.

Hint
An empty button already works with Tab and Enter, but it has no name, so the check can't find it by its words. The words go between <button …> and </button>.