This major release removes the runtime Babel dependencies that were necessary because of Map and Set usage. Map and Set usages are now replaced with object and array literals.

These are the changes in usage you might need to account for:

The module exports are no longer Maps, so you cannot spread them directly into an array to access their items. Use the entries method to get access to the items.
Some values used to be Sets; these are now Arrays.
The keys and values methods now return arrays, not iterators.
There is no forEach method. One could be added in the future, but at present, it does not exist on the exports.

Commits of note

92cecd2 chore(deps-dev): bump flow-bin from 0.160.2 to 0.161.0 (#261)
b10e864 Remove the usage of Maps and Sets, along with the Babel Runtime - dependency (#250)
1953885 chore(deps-dev): bump jest from 27.2.1 to 27.2.2 (#252)
1dfb98f chore(deps): bump actions/setup-node from 2.4.0 to 2.4.1 (#254)
f4fd458 chore(deps-dev): bump expect from 27.2.1 to 27.2.2 (#253)
f85ecec chore(deps-dev): bump babel-jest from 27.2.1 to 27.2.2 (#251)
b03b46a chore(deps-dev): bump flow-bin from 0.154.0 to 0.160.2 (#249)
4f9c5f0 Update Flow bin version (#248)
cd57f86 Add aria-valuenow prop to the separator role
144aca0 Use block for instead of iterable for
ef49ee8 Remove spread operator from roleElementMap
bac9501 Update the test for roleElementMap to include specific items
8094edf Remove spread operator from elementRoleMap
980ceea Add a test for the specific items in elementRoleMap
5b477bc chore(deps-dev): bump eslint-plugin-flowtype from 5.10.0 to 6.1.0 (#246)
d28d7c1 chore(deps-dev): bump commander from 8.0.0 to 8.2.0 (#245)
57b38d1 chore(deps-dev): bump @babel/plugin-transform-runtime (#237)
1519ec1 chore(deps): bump @babel/runtime-corejs3 from 7.14.7 to 7.15.4 (#241)
691e51b chore(deps-dev): bump eslint-plugin-import from 2.23.4 to 2.24.2 (#243)
9e1711c chore(deps-dev): bump eslint from 7.28.0 to 7.32.0 (#244)
589d97a chore(deps-dev): bump @babel/preset-env from 7.14.7 to 7.15.6 (#239)
1c48278 chore(deps-dev): bump expect from 27.0.2 to 27.2.1 (#242)
71c2f61 chore(deps): bump @babel/runtime from 7.14.0 to 7.15.4 (#240)
73c2339 chore(deps-dev): bump eslint-plugin-flowtype from 5.7.2 to 5.10.0 (#238)
85d983c chore(deps-dev): bump babel-jest from 27.0.2 to 27.2.1 (#232)
dc91b47 chore(deps): bump tmpl from 1.0.4 to 1.0.5 (#235)
53fa58c chore(deps-dev): bump jest from 27.0.4 to 27.2.1 (#233)
8affde6 chore(deps-dev): bump @babel/cli from 7.14.3 to 7.15.7 (#231)
5f8369c chore(deps): bump path-parse from 1.0.6 to 1.0.7 (#220)
7051091 chore(deps): bump actions/setup-node from 2.3.0 to 2.4.0 (#219)
4a1ac48 chore(deps): bump coverallsapp/github-action from 1.1.2 to 1.1.3 (#213)
5ebf3e7 chore(deps-dev): bump @babel/core from 7.14.3 to 7.15.5 (#225)
e2be68b Account for nosync file paths in the ignore files (#236)
5adca2f chore(deps): bump actions/setup-node from 2.2.0 to 2.3.0 (#214)
2bf4afa Fixing the package-lock.json file
a325a23 chore(deps-dev): bump @babel/core from 7.12.10 to 7.14.2
b6c7e7d chore(deps-dev): bump jest from 27.0.4 to 27.0.6 (#208)
fe8255b chore(deps-dev): bump eslint-plugin-flowtype from 5.7.2 to 5.8.0 (#201)
e005fa9 chore(deps-dev): bump @babel/core from 7.14.3 to 7.14.6 (#202)
b7800bd chore(deps-dev): bump babel-jest from 27.0.2 to 27.0.6 (#207)
388fcf8 chore(deps-dev): bump eslint from 7.28.0 to 7.30.0 (#206)
9dc75ec chore(deps-dev): bump commander from 7.2.0 to 8.0.0 (#205)
f808394 chore(deps-dev): bump expect from 27.0.2 to 27.0.6 (#204)
fdbc963 chore(deps-dev): bump @babel/cli from 7.14.3 to 7.14.5 (#203)
823c292 Updating package-lock which only added an fsevents reference
61fe8b7 chore(deps-dev): bump @babel/plugin-transform-runtime (#200)
2ef3e93 chore(deps-dev): bump @babel/preset-flow from 7.13.13 to 7.14.5 (#188)
d68a04a chore(deps): bump actions/setup-node from 2.1.5 to 2.2.0
b0f6437 chore(deps-dev): bump @babel/preset-env from 7.12.11 to 7.14.7
18725dd chore(deps): bump @babel/runtime-corejs3 from 7.12.5 to 7.14.7
d7b6389 chore(deps-dev): bump eslint from 7.19.0 to 7.28.0 (#183)
a4aa09b chore(deps-dev): bump expect from 26.6.2 to 27.0.2 (#184)
b861ba8 chore(deps-dev): bump babel-jest from 26.6.3 to 27.0.2 (#176)
2fa3a72 chore(deps-dev): bump eslint-plugin-import from 2.22.1 to 2.23.4 (#177)
7e0d575 chore(deps-dev): bump eslint-plugin-flowtype from 5.2.0 to 5.7.2 (#179)
48e1737 chore(deps-dev): bump jest from 26.6.3 to 27.0.4 (#182)
925ed16 chore(deps-dev): bump commander from 7.0.0 to 7.2.0 (#174)
c545b74 chore(deps-dev): bump @babel/* to 7.14.3 (#168)
4ed066b chore(deps): bump actions/cache from 2.1.5 to 2.1.6 (#172)
ca72279 chore(deps): bump ws from 7.4.2 to 7.4.6 (#173)
638027d chore(deps): bump browserslist from 4.16.0 to 4.16.6 (#171)
9392447 test: Ignore build output when linting (#167)
38f1759 chore(deps): bump actions/cache from 2 to 2.1.5 (#161)
5ec0f9a chore(deps): bump actions/setup-node from 2 to 2.1.5 (#159)
687461f chore(deps): bump actions/checkout from 2 to 2.3.4 (#160)
80e4bd6 chore(deps): bump hosted-git-info from 2.8.8 to 2.8.9 (#157)
e4e7114 chore(deps): bump lodash from 4.17.20 to 4.17.21 (#156)
87abf49 chore(deps-dev): bump eslint from 7.18.0 to 7.19.0 (#112)
24467e7 chore(deps-dev): bump commander from 6.2.1 to 7.0.0 (#108)
afe23cb chore(deps-dev): bump flow-bin from 0.143.0 to 0.143.1 (#111)
2e6a301 chore(deps-dev): bump flow-bin from 0.142.0 to 0.143.0 (#110)
947cff3 chore(deps-dev): bump eslint from 7.17.0 to 7.18.0 (#109)
3c5399c chore(deps-dev): bump @babel/plugin-transform-runtime (#106)
633fc3c chore(deps-dev): bump @babel/cli from 7.10.1 to 7.12.10 (#107)
ed738a3 chore(deps-dev): bump eslint from 7.16.0 to 7.17.0 (#104)
3e45d3c chore(deps-dev): bump commander from 2.20.3 to 6.2.1 (#105)
f6b049d chore(deps): bump @babel/runtime from 7.10.2 to 7.12.5 (#98)
894ee58 chore(deps-dev): bump @babel/preset-flow from 7.10.1 to 7.12.1 (#97)
a494ed1 chore(deps-dev): bump rimraf from 2.7.1 to 3.0.2 (#99)
7d3297d chore(deps-dev): bump flow-bin from 0.141.0 to 0.142.0 (#103)
9eed1f5 chore(deps-dev): bump @babel/core from 7.10.2 to 7.12.10 (#100)
5f20ae0 chore(deps): bump @babel/runtime-corejs3 from 7.10.2 to 7.12.5 (#101)
e803d94 chore: Turn on eslint:recommended and address new rules (#96)
5a68aa1 fix: Remove bash-like command in flow NPM script (#95)
a7506ad chore: Expand ESLint glob to all files (#93)
cf56e0c chore: Cleanup README (#94)
dd958db chore: Use NPM CI for CI (#90)
e604a6e chore: Remove coveralls NPM config (#91)
e4b6d28 Update coveralls, expect and flow-bin (#92)
0e7ccdf Bump babel-jest from 24.9.0 to 26.6.3 (#84)
76b7a41 chore: Remove Travis-CI config (#89)
bc1a437 Only diff the src dir in the CI Diff check (#87)
e466929 Bump lodash from 4.17.15 to 4.17.20 (#86)
a7429ee Bump eslint from 6.8.0 to 7.16.0 (#85)
83ec474 fix: type sig for ARIAPropertyDefinition (#74)
f3b4e83 chore: Remove npmrc (#78)
717d76c chore: Add Depependabot config (#79)
50e05b1 Update test.yml (#76)
b9ee176 Update test.yml (#75)
a8cd23a Create test.yml
25fbc40 fix: Sync with stable editor's draft (#69)
7df56ba docs: fix CDN url (#71)
74009cf fix: definition/term roles (#70)
2a5dafb feat: Sync with stable editor's draft
1241efe chore: Seal AriaPropertMap type (#67)
0b6fcc4 "that there is no maximum value" > no default value
e6dd042 Keep required props in sync with props
995b6b9 Remove deprecated props
d99d54e Update ariaPropsMap
eb123ce Update types
1284970 Update roles.json
1d9840c docs(readme): Add tracked aria version
971679a fix: Normalize required props (#64)

Readme

Source

ARIA Query

Programmatic access to the WAI-ARIA 1.2 Roles Model. This package tracks the stable editor's draft (last update: 21 July 2020).

CDN URL: https://unpkg.com/aria-query

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:

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.

{|
  entries: () => Array<$Item>,
  get: (key: $Key) => ?$Value,
  has: (key: $Key) => boolean,
  keys: () => Array<$Key>,
  values: () => Array<$Value>,
|};

Roles

import { roles } from 'aria-query';

A map of role names to the role definition. For example:

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

import { elementRoles } from 'aria-query';

HTML Elements with inherent roles are mapped to those roles. In the case of an element like <input>, the element often requires a type attribute to map to an ARIA role.

[
  [ '{"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' ] ],
  [ '{"name": "tbody"}', [ 'rowgroup' ] ],
  [ '{"name": "tfoot"}', [ 'rowgroup' ] ],
  [ '{"name": "thead"}', [ 'rowgroup' ] ],
  [ '{"name": "th", "attributes": [ {"name": "scope", "value": "row"}] }', [ 'rowheader' ] ],
  [ '{"name": "input", "attributes": [ {"name": "type", "value": "search"}] }', [ 'searchbox' ] ],
  [ '{"name": "hr"}', [ 'separator' ] ],
  [ '{"name": "dt"}', [ 'term' ] ],
  [ '{"name": "dfn"}', [ 'term' ] ],
  [ '{"name": "textarea"}', [ 'textbox' ] ],
  [ '{"name": "input", "attributes": [ {"name": "type", "value": "text"}] }', [ 'textbox' ] ],
]

The map of elements to roles is keyed by an HTML concept. An HTML concept corresponds to the baseConcepts and relatedConcepts of an ARIA role. Concepts exist in the context of a module: HTML, XForms, Dublin Core, for example. The concept representation is an object literal with a name property (the element name) and an optional attributes array.

The roles are provided in a Set.

Role to element

import { roleElements } from 'aria-query';

ARIA roles are mapped to the HTML Elements with the same inherent role. Some roles, such as columnheader are only mapped to an HTML element that expresses specific attributes. In the case of <input>, the element often requires a type attribute to map to an ARIA role.

[
  [ 'article', [ {"name": "article"} ] ],
  [ 'button', [ {"name": "button"} ] ],
  [ 'cell', [ {"name": "td"} ] ],
  [ 'checkbox', [ {"name": "input", "attributes": [ {"name": "type", "value": "checkbox"}] } ] ],
  [ 'columnheader', [ {"name": "th"} ] ],
  [ 'combobox', [ {"name": "select"} ] ],
  [ 'command', [ {"name": "menuitem"} ] ],
  [ 'definition', [ {"name": "dd"}', '{"name": "dfn"} ] ],
  [ 'figure', [ {"name": "figure"} ] ],
  [ 'form', [ {"name": "form"} ] ],
  [ 'grid', [ {"name": "table"} ] ],
  [ 'gridcell', [ {"name": "td"} ] ],
  [ 'group', [ {"name": "fieldset"} ] ],
  [ 'heading', [ {"name": "h1"}', '{"name": "h2"}', '{"name": "h3"}', '{"name": "h4"}',  '{"name": "h5"}', '{"name": "h6"} ] ],
  [ 'img', [ {"name": "img"} ] ],
  [ 'link', [ {"name": "a"}', '{"name": "link"} ] ],
  [ 'list', [ {"name": "ol"}', '{"name": "ul"} ] ],
  [ 'listbox', [ {"name": "select"} ] ],
  [ 'listitem', [ {"name": "li"} ] ],
  [ 'menuitem', [ {"name": "menuitem"} ] ],
  [ 'navigation', [ {"name": "nav"} ] ],
  [ 'option', [ {"name": "option"} ] ],
  [ 'radio', [ {"name": "input", "attributes": [ {"name": "type", "value": "radio"}] } ] ],
  [ 'region', [ {"name": "frame"} ] ],
  [ 'roletype', [ {"name": "rel"} ] ],
  [ 'row', [ {"name": "tr"} ] ],
  [ 'rowgroup', [ {"name": "tbody"}', '{"name": "tfoot"}', '{"name": "thead"} ] ],
  [ 'rowheader', [ {"name": "th", "attributes": [ {"name": "scope", "value": "row"}] } ] ],
  [ 'searchbox', [ {"name": "input", "attributes": [ {"name": "type", "value": "search"}] } ] ],
  [ 'separator', [ {"name": "hr"} ] ],
  [ 'table', [ {"name": "table"} ] ],
  [ 'term', [ {"name": "dt"} ] ],
  [ 'textbox', [ {"name": "textarea"}', '{"name": "input", "attributes": [ {"name": "type", "value": "text"}] } ] ],
]

License

Keywords

FAQs

What is aria-query?

Programmatic access to the ARIA specification

Is aria-query popular?

The npm package aria-query receives a total of 16,216,821 weekly downloads. As such, aria-query popularity was classified as popular.

Is aria-query well maintained?

We found that aria-query demonstrated a healthy version release cadence and project activity. It has 4 open source maintainers collaborating on the project.

Last updated on 04 Oct 2021

aria-query

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}5.0.0