Paths/Frontend Engineer/Performance & Accessibility / Accessibility & Auditing
Build an Accessible Dialog
A modal that traps focus, names itself and closes on escape. Write the component with the semantics a screen reader needs.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- File ~/frontend/src/components/AccessibleDialog.tsx exists○
- The dialog declares its role and is labelled○
- The dialog is marked as a modal○
- The dialog handles the escape key○
02Walkthrough
1 of 3 revealed- 01
Write the dialog markup
role and aria-modal tell the screen reader what this is. aria-labelledby points at the element with the title.
echo 'interface AccessibleDialogProps {\n readonly open: boolean;\n readonly titleId: string;\n readonly onClose: () => void;\n}\n\nexport function AccessibleDialog({ open, titleId, onClose }: AccessibleDialogProps) {\n if (!open) return null;\n return (\n <div role="dialog" aria-modal="true" aria-labelledby={titleId} className="dialog">\n <h2 id={titleId}>Confirm</h2>\n <button onClick={onClose}>Close</button>\n </div>\n );\n}' > ~/frontend/src/components/AccessibleDialog.tsx - 2 locked · each failed submit reveals one
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list