framework-accessibility

<!-- CANONICAL SOURCE: .github/skills/framework-accessibility/SKILL.md -- Edit the canonical source; sync to Gemini via scripts/check-gemini-sync.ps1 --> # 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 | ### Fix Templates ```jsx // Bad: div as button <div onClick={handleClick}>Submit</div> // Good: semantic button <button onClick={handleClick}>Submit</button> // Bad: image without alt in Next.js <Image src="/hero.jpg" width={800} height={400} /> // Good: image with alt <Image src="/hero.jpg" width={800} height={400} alt="Team collaborating in a modern office" /> // Bad: no focus management on route change useEffect(() => { // nothing }, [location]); // Good: focus management on route change useEffec...