Say What Happened

A screen reader reads the control that has the focus. When a click changes words somewhere else on the page, like the cart count, a visitor who can't see the screen hears nothing. A live region fixes that: an element with role="status" is read out politely each time its words change, and one with role="alert" is read at once, cutting in.

A settings page could say "Saved" like this. The paragraph is on the page from the start; only its words change:

const [note, setNote] = useState("");
// in save():
setNote("Settings saved");
// in the page:
<p role="status">{note}</p>

A form error needs two more things. aria-describedby on a field holds the id of the element that describes it, so a screen reader reads the error right after the field's name. aria-invalid says the field's value is wrong; the check prints it as (invalid).

The check opens the page, adds the Mug, types a wrong email and presses Subscribe. It must print:

> open the page
      status: Your cart is empty
> click "Add to cart" in "Mug"
    -   status: Your cart is empty
    +   status: Mug added to cart
> type "eva.example.com" into "Email"
> click "Subscribe"
    -     field "Email": "eva.example.com"
    +     field "Email": "eva.example.com" (invalid)
    +     alert: Enter an email address, like eva@example.com
> what a screen reader reads after the field "Email" (its description)
  Enter an email address, like eva@example.com

Your task: in src/App.jsx, add a message state shown in a role="status" paragraph, and set it to the product's name plus " added to cart" in addToCart. Give the error paragraph role="alert" and the id email-error, point the Email field to it with aria-describedby, and make aria-invalid true while there is an error.

Assignment
Follow the Coding Tutorial to announce what happened: a status line for the cart, an alert for the email error, and an Email field that points to its error.

Hint
The status paragraph must be on the page before anything happens, so a screen reader is already listening when its words change. aria-describedby takes the id itself, without a #.