Support

If you encounter any issues, please feel free to make an issue on GitHub.

Frequently Asked Questions (FAQ)

Requirements

React ARIA Widgets transpiles to ES6 code and requires React v18. In the future, we plan on expanding support back to React v16.8.

TypeScript can't find a sub-module or its type declarations

If you're writing a TypeScript application and you import something from one of React ARIA Widget's sub-modules, you may run into the following error:

import { useAccordion } from 'react-aria-widgets/accordion';

Cannot find module 'react-aria-widgets/accordion' or its corresponding type declarations. (tsserver 2307)

To fix this, you can import directly from react-aria-widgets, though it may increase your bundle sizes. Another option would be to change moduleResolution to node16 in your tsconfig.json.

React ARIA Widgets exposes its sub-modules and their type declarations by listing them with the exports field in its package.json, but this isn't supported in older versions of Node.js.

hidden versus display: none;

At the time of writing, many of the example implementations shown in the ARIA Authoring Practices Guide (APG) use the hidden attribute to handle expand/collapse states. However, in the living WHATWG HTML standard, they say:

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

In this GitHub thread, it's argued that the APG examples are using tabs as a presentational choice rather than to convey semantics, and that display: none; should be used rather than hidden. Though the APG examples that are currently live still do not reflect those changes, their source code has been changed to use display: none; rather than hidden.