A Modal Dialog

A modal dialog is a box over the page: while it is open, the rest of the page can't be used. Seeing it is not enough. A screen reader must know that it is a dialog and what it is called, and a keyboard user must land in it, close it with Escape, and come back to where they were.

Attributes describe it: role="dialog" says what the element is, aria-modal="true" says the page behind it is off limits, and aria-labelledby names it after another element, by that element's id. On another element:

<section aria-labelledby="hours-title">
  <h2 id="hours-title">Opening hours</h2>
</section>

To move the focus from code, you need the element itself. A ref from useRef holds it in current:

const field = useRef(null);
// …
<input ref={field} />
<button onClick={() => field.current.focus()}>Search</button>

A key press goes to the focused element and then bubbles up through its parents, so a handler on the dialog hears every key pressed inside it.

The check opens the page and plays a keyboard user. It must print:

> click "Delivery details"
    +   dialog "Delivery"
    +     heading 2: Delivery
    +     text: Orders leave the shop within 2 days. Delivery is free over $50.
    +     button: Close (focused)
> press Escape
    -   button: Delivery details
    -   dialog "Delivery"
    -     …
    +   button: Delivery details (focused)

and the same again when the Close button closes the dialog.

Your task: in src/App.jsx, the Delivery details button already opens the delivery information and Close closes it. Make it a real dialog: give it its role, aria-modal and a name from its heading, focus Close when it opens, close it on Escape, and focus Delivery details again when it closes.

Assignment
Follow the Coding Tutorial to turn the delivery box into a dialog: its three attributes, a ref and an effect that focus Close, an Escape handler, and a ref that brings the focus back to Delivery details.

Hint
The Close button is on the page only after React has updated it, so focus it in an effect that runs when open changes. Put the focus-back line in close(), which both Escape and Close call.