Make a complex React admin UI accessible

Interview framing: Accessibility is not only semantic HTML. Complex React apps need deliberate focus management, keyboard behavior, announcements, and testing.

Key practices:

1. Semantic structure:

• Use real buttons, links, labels, headings, tables, and form controls where possible.
• Add ARIA only when semantic HTML is not enough.

2. Focus management:

• Move focus into modals and trap it while open.
• Restore focus to the trigger when a modal closes.
• Move focus meaningfully after route changes or major async updates.

3. Keyboard support:

• Dropdowns, menus, tabs, dialogs, and custom rule builders must work without a mouse.
• Use expected keys: Tab, Shift+Tab, Escape, Enter, Space, Arrow keys where appropriate.

4. Async feedback:

• Use aria-live for important validation, save, and error messages.
• Do not rely on color alone for allow/deny/warning states.

5. Forms:

• Associate labels with controls.
• Link field errors with aria-describedby.
• Keep validation messages specific and actionable.

6. Tables:

• Use headers and captions when helpful.
• Preserve keyboard access for row actions and bulk selection.

Testing:

• Use eslint accessibility rules, axe/Lighthouse, React Testing Library queries, and manual keyboard checks.
• Screen-reader smoke tests are valuable for high-risk workflows.

Good closing: "For security admin tools, accessibility also protects correctness: every admin must be able to understand and safely operate policy-changing workflows."