Street Map Contact Block for React

No: it's an SVG drawing of made-up streets, so there's no map tile, key or consent banner to deal with. It's decorative and hidden from assistive technology; the caption under it gives the route in words ("A 6 minute walk from Harbourgate Station: down Harbour Road, then along Quay Street"), and the address and hours are real text. To use a real map, replace StreetMap with your provider's embed and keep the caption.

No. A map shows places, so it keeps its direction: the SVG is set to left-to-right layout, and the station stays where it is on the street grid. The form and the text around it follow the page direction.

The label above it names the select's button for screen readers, and focus can land on that button when nothing is chosen. The select's trigger takes the id, and the label points to it with htmlFor.

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation, which names the team that was chosen. Replace that timer in submit with your own call: details holds the name, email, team and message; the options are in TEAMS.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a name, an email address with an @ and a domain, a team and a message. Each problem appears under its field with an icon, the control gets aria-invalid and an aria-describedby that points to the message, and focus moves to the first one. Typing in a field, or choosing a team, clears its message.

Below lg the columns stack: the header, the form, then the map with its caption and the two cells (which also stack below sm). Name and email go one per row, and the submit button goes full width. The map scales with its column, so nothing scrolls sideways at 320 pixels.