Every Field Has a Name

Visitors who use a screen reader hear each control by its name. A field gets its name from a label, and a button gets it from its words. A placeholder, the grey hint inside an empty box, is not a name, and it disappears as soon as you type. The check works the same way: it finds a field by its label and a button by its name, so a control without a name can't be found.

A label names a field when its htmlFor holds the field's id. (In HTML the attribute is for; JSX writes it htmlFor.) A button that shows only an icon gets its name from aria-label:

<label htmlFor="phone">Phone</label>
<input id="phone" type="tel" />
<button type="button" aria-label="Close">×</button>

Right now the page prints fields and a button with no name, and the check can't use them:

field "": "" (placeholder "Mugs, lamps...")
button: (no name)
field "": "" (email) (placeholder "you@example.com")
> type "ana@example.com" into "Email"
  there is no field named "Email" on the screen

When you're done, the page must print:

search
  field "Search products": "" (placeholder "Mugs, lamps...")
  button: Search
form "Sign up"
  field "Email": "" (email) (placeholder "you@example.com")
  field "Password": "" (password) (placeholder "At least 8 characters")
> click "Search"
  request: GET /api/products?q=mug -> 200
  + item: Mug $12

Your task: in src/App.jsx, give the email, password and search fields an id and a label that points to it, with the words Email, Password and Search products. Then give the icon button aria-label="Search".

Assignment
Follow the Coding Tutorial to name every control on the page: three labels tied to their fields by id, and an aria-label on the search button.

Hint
The label's htmlFor and the field's id must be exactly the same string. Keep the placeholders: they are a hint, and the label is the name.