Implement correctly
Build Modal dialog without breaking its behavior
# Implement Modal dialog in your agent ## Objective Implement Modal dialog for this verified behavior: A focused surface for a contained task that makes the rest of the page temporarily inactive. ## Prerequisites - Inspect the repository, design system, and existing tests first. - Preserve unrelated changes and keep the file scope bounded. - Confirm that Modal dialog matches the need before writing code. ## Required behavior - While modal, keyboard focus stays inside the surface until it closes. - Escape closes the temporary surface and returns focus to a sensible control. ## States to cover - Dialog closed - Dialog open ## Accessibility - ARIA role: dialog[aria-modal=true] - The primary control or named region for Modal dialog has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names. - Opening moves focus inside, Tab cannot reach the inert page, and closing restores focus to the logical opener. - Cancel, the named close control, and Escape close without saving; outside press is enabled only when accidental loss is harmless. - Assistive technology receives the dialog role, accessible title, description, and validation updates. - Tab and Shift+Tab cycle inside the dialog - Escape closes when cancellation is safe - Enter submits only from the intended control ## When not to use - The workflow is long enough to deserve its own page - The information can remain nonmodal and contextual ## Acceptance criteria - The page behind the dialog is inert - The dialog has an accessible title and description - Focus is contained and then restored - Every dismissal path handles unsaved work safely ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
- @radix-ui/react-dialog
- Requires · Access to the repository, design system, and tests
Why it works
- The need is tied to canonical behavior before any technical choice.
- States, accessibility, and non-goals prevent a merely visual implementation.
- Acceptance criteria and the output format make verification observable.
Try next
Verify Modal dialog on a real journey
# Verify Modal dialog after implementation ## Objective Audit the Modal dialog implementation against its behavior, states, and accessibility requirements without changing it automatically. ## Checks - Replay the smallest representative journey. - Check keyboard behavior, focus, accessible name, and announcements. - Tie each gap to a specific acceptance criterion. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
sha256:f2b0f16a3c7c7bba10f0bd1323994b4a4e0b726d44f2fb628d2b1fceddcaed70