Modal Dialog II

Take the basic modal and make it announce itself correctly to assistive technology. Visually nothing changes — but a screen reader should recognise the overlay as a dialog, read out its title and description, and understand that the rest of the page is inert while it's open. That's the ARIA dialog contract: a small set of roles and properties that turn an anonymous <div> into a real dialog.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

The same open/close modal, now carrying role="dialog", aria-modal, and label/description associations.

Examples

<div class="modal"
     role="dialog"
     aria-modal="true"
     aria-labelledby="dialog-title"
     aria-describedby="dialog-desc">
  <h2 id="dialog-title">Subscribe</h2>
  <p  id="dialog-desc">Get product updates…</p>
</div>

A screen reader then announces, on open:
  "Subscribe, dialog. Get product updates and tips in your inbox…"

Notes

• role="dialog" + aria-modal="true". The role names it a dialog; aria-modal tells AT that content outside it is inert while it's open.
• Name it with aria-labelledby. Point it at the title's id so the dialog has an accessible name (don't leave it nameless).
• Describe it with aria-describedby. Point it at the body's id so the supporting text is announced too.
• Label icon-only buttons. The × has no text — give it aria-label="Close" so it isn't announced as just "button".
• Out of scope. Backdrop/Escape dismissal and focus trapping — III and IV. Here it's the ARIA contract.