Premium

Modal: Native <dialog> Confirm (Accessible Naming)

By FrontendAtlas Editorial · Updated Jan 31, 2026

Challenge summary

The dialog must be accessible (proper name + description) and must be visible in the preview without JavaScript. Do not change CSS.

What you'll practice

  • Points to the dialog title element id to provide the dialog’s accessible name.
  • Points to description text id to provide context for screen readers.
  • Lets buttons close the dialog and return a value to the opener.
  • Returns the chosen action value when the dialog closes.
  • A visible, accessible confirm dialog with correct ARIA naming and a native dialog form with Cancel/Delete actions.

What Premium unlocks

Premium unlocks the runnable workspace, behavioral checks, implementation walkthrough, and edge-case discussion.

Free related practice

Upgrade to FrontendAtlas Premium to unlock this challenge. Already upgraded? Sign in to continue.