framework-accessibility
Originally fromtaylorarndt/a11y-agent-team
Installation
SKILL.md
Framework-Specific Accessibility Patterns
React / Next.js
Common Pitfalls
| Pattern | Issue | Fix |
|---|---|---|
onClick on <div> |
Not keyboard accessible | Use <button> or add role="button", tabIndex={0}, onKeyDown |
dangerouslySetInnerHTML |
May inject inaccessible content | Audit injected HTML for ARIA, headings, alt text |
React.Fragment as root |
May break landmark tree | Ensure fragments don't interrupt landmark nesting |
Missing key on lists |
Can cause focus loss on re-render | Use stable keys (not array index) for interactive lists |
| Portal without focus trap | Focus can escape to background | Wrap portal content in FocusTrap component |
useEffect focus management |
Focus may not fire on mount | Use useRef + useEffect with proper dependency array |