A11yance/aria-query

Programmatic access to the WAI-ARIA 1.2 Roles Model.
This package tracks the W3C Recommendation (last update: 6 June 2023).
CDN URL:
## Building the src/etc files
The files under src/etc are generated by the breakUpAriaJSON script.
To change them, edit the file scripts/roles.json then run:
bash
node ./scripts/breakUpAriaJSON.js
git add scripts/roles.json src/etc
It should work with Node version 6.11.2 or later.
## Utilities
### Interface
These methods are available on each export from the module. The typing here in the documentation is pseudo-typed. Each export will have its own specific types for each method signature.
javascript
entries: () => Array ,
get: (key: $Key) => ?$Value,
has: (key: $Key) => boolean,
keys: () => Array ,
values: () => Array ,
|};
### Roles
javascript
import { roles } from 'aria-query';
A map of role names to the role definition. For example:
javascript
let alertRole = roles.get('alert');
Value of alertRole
"requiredProps": {},
"props": {
"aria-atomic": "true",
"aria-busy": null,
"aria-controls": null,
"aria-current": null,
"aria-describedby": null,
"aria-details": null,
"aria-disabled": null,
"aria-dropeffect": null,
"aria-errormessage": null,
"aria-expanded": null,
"aria-flowto": null,
"aria-grabbed": null,
"aria-haspopup": null,
"aria-hidden": null,
"aria-invalid": null,
"aria-keyshortcuts": null,
"aria-label": null,
"aria-labelledby": null,
"aria-live": "assertive",
"aria-owns": null,
"aria-relevant": null,
"aria-roledescription": null
},
"abstract": false,
"childrenPresentational": false,
"baseConcepts": [],
"relatedConcepts": [ {
"module": "XForms",
"concept": {
"name": "alert"
}],
"superClass": [["roletype", "structure", "section"]]
### Elements to Roles
javascript
import { elementRoles } from 'aria-query';
HTML Elements with inherent roles are mapped to those roles. In the case of an element like , the element often requires a type attribute to map to an ARIA role.
javascript
[ '{"name": "article"}', [ 'article' ] ],
[ '{"name": "button"}', [ 'button' ] ],
[ '{"name": "td"}', [ 'cell', 'gridcell' ] ],
[ '{"name": "input", "attributes": [ {"name": "type", "value": "checkbox"}] }', [ 'checkbox' ] ],
[ '{"name": "th"}', [ 'columnheader' ] ],
[ '{"name": "select"}', [ 'combobox', 'listbox' ] ],
[ '{"name": "menuitem"}', [ 'command', 'menuitem' ] ],
[ '{"name": "dd"}', [ 'definition' ] ],
[ '{"name": "figure"}', [ 'figure' ] ],
[ '{"name": "form"}', [ 'form' ] ],
[ '{"name": "table"}', [ 'grid', 'table' ] ],
[ '{"name": "fieldset"}', [ 'group' ] ],
[ '{"name": "h1"}', [ 'heading' ] ],
[ '{"name": "h2"}', [ 'heading' ] ],
[ '{"name": "h3"}', [ 'heading' ] ],
[ '{"name": "h4"}', [ 'heading' ] ],
[ '{"name": "h5"}', [ 'heading' ] ],
[ '{"name": "h6"}', [ 'heading' ] ],
[ '{"name": "img"}', [ 'img' ] ],
[ '{"name": "a"}', [ 'link' ] ],
[ '{"name": "link"}', [ 'link' ] ],
[ '{"name": "ol"}', [ 'list' ] ],
[ '{"name": "ul"}', [ 'list' ] ],
[ '{"name": "li"}', [ 'listitem' ] ],
[ '{"name": "nav"}', [ 'navigation' ] ],
[ '{"name": "option"}', [ 'option' ] ],
[ '{"name": "input", "attributes": [ {"name": "type", "value": "radio"}] }', [ 'radio' ] ],
[ '{"name": "frame"}', [ 'region' ] ],
[ '{"name": "rel"}', [ 'roletype' ] ],
[ '{"name": "tr"}', [ 'row' ] ],