skills.rest
arayaroma
arayaromaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

a11y-focus-management

Implements accessible focus management for React modals and conditionally rendered UI.

Updated Jul 27, 2026
Search Tags:#accessibility#a11y#keyboard navigation#react#modal#focus management#aria
One-click install
npx skills add https://github.com/arayaroma/ether --skill a11y-focus-management-arayaroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-focus-management
Source: https://github.com/arayaroma/ether/tree/main/skills/a11y-focus-management
Command: npx skills add https://github.com/arayaroma/ether --skill a11y-focus-management-arayaroma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When a modal opens or content is conditionally rendered, keyboard and screen reader users lose their place if focus is not moved programmatically. This Skill provides the patterns to move focus into new UI on open and restore it on close, preventing broken keyboard navigation. ## Core Features & Use Cases - Modal Focus Pattern: A complete React component example that saves the previously focused element, moves focus into the dialog on open, and restores it on close. - ARIA Wiring: Correct use of role="dialog", aria-modal, and aria-labelledby so assistive technologies announce the modal properly. - Checklist: A six-point checklist covering focus saving, initial focus target, restoration, Escape handling, and Tab trapping. - Use Case: You are building a settings dialog that opens from a button. Apply this Skill to ensure focus lands inside the dialog, Escape closes it, and focus returns to the triggering button afterward. ## Quick Start Use the a11y-focus-management skill to add proper focus handling to my React modal component.

Frequently Asked Questions about a11y-focus-management

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage focus in a React modal?▼

Save document.activeElement before opening, move focus to the dialog container (with tabIndex={-1}) or its first field when isOpen becomes true, and restore focus to the saved element on close. Use a useEffect keyed on the open state.

How do I trap Tab key focus inside a modal dialog?▼

Use a library such as focus-trap-react rather than hand-rolling Tab-cycling logic. A dedicated trap handles nested portals and dynamically added content, which manual implementations typically miss.

What ARIA attributes does an accessible modal need?▼

A modal needs role="dialog", aria-modal="true", and aria-labelledby pointing at the visible title element. It should also close on Escape and keep Tab focus trapped while open.

Why does focus get lost when a React component unmounts?▼

When the focused element is removed from the DOM, the browser drops focus to the body, breaking keyboard and screen reader navigation. Restore focus to a saved reference to the previously focused element before the unmount.

When is focus trapping not needed for a disclosure widget?▼

Non-modal disclosure widgets like accordions or dropdowns that do not overlay the page only need aria-expanded and aria-controls state, not a focus trap. Focus trapping applies to modal surfaces that block interaction with the rest of the page.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

modal-drawer-system

Create accessible React TypeScript modal and drawer components with focus trapping and ARIA attributes.

Community
Advanced
spencerpaulyspencerpauly
672

accessibility-auditing

Audit web pages for accessibility issues using browser snapshots and keyboard navigation checks.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

accessible-combobox-implementation

Build and debug ARIA-compliant combobox widgets with keyboard navigation.

Official
Intermediate
Asymmetric-alAsymmetric-al
417

base-ui

Create accessible composable UI components with @base-ui/react primitives.

Official
Intermediate