Skill · react/accessible-widgets · v1.0.0 · MIT
Accessible React Widgets
WAI-ARIA APG keyboard, focus and ARIA contracts for React dialogs, menu buttons, comboboxes and tabs, plus how to test them in jsdom.
Gives a coding agent the exact contracts from the WAI-ARIA Authoring Practices and the ARIA 1.2 Recommendation for the widgets teams most often build by hand: modal dialogs, menu buttons, editable comboboxes with a listbox popup, tabs, disclosures and accordions. It covers roles and states, what every key must do, roving tabindex versus aria-activedescendant, focus return, React 19 mechanics (useId, refs and focus timing, inert, native dialog and why autoFocus does not reach it), and how to prove the behaviour with Testing Library, user-event and axe-core, including the jsdom gaps that make tests lie.
- Frontend
- Accessibility
- Testing
- build
- test
- review
- react
- typescript
- wcag
- testing-library
- vitest
uplift
No runs exist for this digest.
Not measured for this digest.
Untested is not the same as useless: nobody has measured it yet. Proof comes from A/B runs on hidden tests:
npx sigil prove catalog/skills/react/accessible-widgets --suite <suite> --runs 6trust level · submitted
- in the catalog: met
- structure check: not met
- static scan, no high findings: not met
- canary sandbox passed: not met
- maintainer approved: not met
canary sandbox
Not run for this digest.
static scan
Not run for this digest.
compatibility · targeted, compiled and evaluated are separate claims
| agent | targeted by author | compiled | evaluated in the lab | notes |
|---|---|---|---|---|
| Claude Code | targeted: yes | no record for compiled | no record for evaluated | |
| Codex | targeted: yes | no record for compiled | no record for evaluated | |
| Cursor | targeted: yes | no record for compiled | no record for evaluated | |
| GitHub Copilot | targeted: yes | no record for compiled | no record for evaluated | |
| Gemini CLI | targeted: yes | no record for compiled | no record for evaluated | |
| OpenCode | targeted: yes | no record for compiled | no record for evaluated |
declared permissions
- network
- none
- shell
- none
- filesystem
- write
- env
- none
Undeclared access is a finding in the scan and a tripwire in the canary.
source
- path
- catalog/skills/react/accessible-widgets
- authors
- dgesteves
- entry
- SKILL.md (agent-skill)
- registry
- 2026-11-02 · 5cb851d
install
$ npx sigil add react/accessible-widgets --agent claude-codeNo compile record for Claude Code on this digest. Install never runs capability scripts, and refuses on any digest mismatch.
known limitations
- The proof suite runs in jsdom, which has no <dialog>.showModal(), Popover API or layout, so it has no dialog task; dialog guidance is checked against the HTML standard and MDN, not measured.
- Covers single-level menus and listbox popups. Submenus, menubars, grids, trees and grid or tree combobox popups are out of scope.
- Passing keyboard tests and axe-core does not prove what a screen reader announces; new widgets still need a manual pass with VoiceOver or NVDA.
- React DOM only. React Native and other renderers use different accessibility APIs.
- Browser support figures come from MDN browser-compat-data 8.1.7 (checked 2026-11-01) and will age.