# Accessible React Widgets

`react/accessible-widgets` · Skill · v1.0.0

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.

## Verdict

- level: **submitted** — In the catalog, not yet checked for this digest.
- uplift: **untested** — No runs exist for this digest.
- digest: `sha256:fea671a54d408189644aa1a6f6b60297a4b3042451673a72cceb71d96dd4ed57`

## Uplift runs

None for this digest. Untested is not the same as useless: nobody has measured it yet.

## Security

No checks recorded for this digest.

## Compatibility

| agent | targeted | compiled | evaluated |
| --- | --- | --- | --- |
| Claude Code | yes | no record | no record |
| Codex | yes | no record | no record |
| Cursor | yes | no record | no record |
| GitHub Copilot | yes | no record | no record |
| Gemini CLI | yes | no record | no record |
| OpenCode | yes | no record | no record |

## Permissions

- network: none
- shell: none
- filesystem: write
- env: none

## Files

- `SKILL.md` 17530 B sha256:3996fdd4b07b1213d5dd20a45b582341d182fbae2c6f26224e37ab59354a8c2a
- `references/combobox.md` 8815 B sha256:886413f42e015e11cee6198a3dea7e337f9ecf5af27f22dbf8969da76efd403a
- `references/dialog.md` 8755 B sha256:8ece1f19fcbfa80801e2f3d0fa8393c76e8b43028497e96a74d5709e8327169a
- `references/menu-button.md` 8403 B sha256:75759e8b0cd73d4c737ad17ec3d9cbd1e2fed62dad34d869293c52015ff3c2e6
- `references/sources.md` 4192 B sha256:421c4cfd5122e2a03459f330d7d1d83d58cb27eb6808aed2d37da9fd9e39a9bc
- `references/tabs-and-disclosure.md` 6824 B sha256:bce9cab7fd6706cd9af0e124a4d5bcb6cdd56a482f9dd754ffb2b9bf2a1811f7
- `references/testing.md` 6784 B sha256:6773cc7c55281ed7f38eefdf4ffff0ce4cf4e6be341b9136915138ffea02259f

## 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.

## Install

```sh
npx sigil add react/accessible-widgets --agent claude-code,codex,cursor
```

Source: https://github.com/dgesteves/sigil/tree/5cb851d5b2f2f14446ddf631ef5e91bf9d3263dd/catalog/skills/react/accessible-widgets