Make the Modal Accessible

25 minAdvancedAccessibility

The settings popup looks fine with a mouse. But a screen reader user hears nothing when it opens, a keyboard user's focus stays behind the dark backdrop, and the ✕ is a <span> that can't be reached with Tab. Fix it so everyone can use it.

Requirements

#settings-modal has role="dialog" and aria-modal="true" (a native <dialog> opened with showModal() also counts).
The dialog has an accessible name — point aria-labelledby at the Settings heading.
When it opens, keyboard focus moves to something inside the dialog.
Pressing Escape closes it.
After closing, focus goes back to the Open settings button.
The ✕ is a real <button> with an accessible name that includes "Close" (e.g. aria-label="Close settings"), and clicking it closes the dialog too.

Keep these

Keep the ids settings-modal and open-settings. The dialog must stay hidden until the button is clicked.

Make #settings-modal a real accessible dialog: role="dialog", aria-modal="true", labelled by its heading, focus moves inside when it opens, Escape and a real close button close it, and focus returns to Open settings.

Checks

It's announced as a modal dialog
The dialog has an accessible name
Opening moves focus into the dialog
Escape closes the dialog
Focus returns to Open settings
A real Close button closes it

Preview

Console output from your code appears here.