Fix keyboard trap in a custom modal dialog
Tests accessible modal focus management. Strong answers: role="dialog" and aria-modal="true", move focus on open, trap Tab/Shift+Tab cycles inside, Escape to close, return focus to trigger. Red flag: CSS-only fixes or aria-hidden without JS focus control.
Tests accessible modal focus management and ARIA semantics. Strong answers cover five steps: first, role="dialog" with aria-modal="true" and aria-labelledby; second, move focus on open to the first focusable element or a static title with tabindex="-1" if content is complex; third, trap Tab and Shift+Tab so focus cycles within dialog boundaries; fourth, bind Escape to close; fifth, restore focus to the trigger element on close. Red flag: CSS overlays or aria-hidden without programmatic JS focus control and restoration.
Read the original → w3.org
- #accessibility
- #aria
- #focus-management
- #modal
- #javascript
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.