The AI's Button Is a Span

An AI assistant wrote the cart's lines. Each line has an × to remove it, and the AI made that × a <span> with a click handler:

function CartLine({ line, onRemove }) {
  return (
    <li>
      {line.name} ${line.price}
      <span onClick={() => onRemove(line.id)}>×</span>
    </li>
  );
}

A mouse can click it. But a visitor who uses the keyboard presses Tab to move from one control to the next, and Tab skips a span. A screen reader has no name to read for it either: "×" doesn't say what it removes. Only a real <button> is in the Tab order and works with Enter, and aria-label gives it a name.

For example, a menu's close button: <button type="button" aria-label="Close menu" onClick={closeMenu}>×</button>. Visitors see ×; a screen reader says "Close menu".

The check adds the Mug and the Gift card, presses Tab, then Enter, then clicks the button named "Remove Gift card". Your cart must answer:

> press Tab
    + button: Remove Mug (focused)
> press Enter
    - item: Mug $12
    -   button: Remove Mug (focused)
> click "Remove Gift card"
    - item: Gift card $50
    -   button: Remove Gift card
    + list (empty)

Your task: in src/Cart.jsx, the starting CartLine shows only the name and price. Write a function remove that calls onRemove with the line's id, and a real button showing × that is named "Remove " + line.name and calls remove.

Assignment
Follow the Coding Tutorial to turn the cart's × into a named button that the keyboard can reach and press.

Hint
aria-label takes a JavaScript value in curly braces, so one label gives "Remove Mug" on one line and "Remove Gift card" on the other. The × goes between the button's tags.