https://github.com/goodguyry/ariacomponents
Quickly create accessible interactive components based on the W3C spec and examples
https://github.com/goodguyry/ariacomponents
a11y aria
Last synced: about 1 month ago
JSON representation
Quickly create accessible interactive components based on the W3C spec and examples
- Host: GitHub
- URL: https://github.com/goodguyry/ariacomponents
- Owner: goodguyry
- Created: 2019-09-01T19:46:22.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-17T05:01:48.000Z (over 1 year ago)
- Last Synced: 2025-08-28T05:11:33.979Z (about 1 month ago)
- Topics: a11y, aria
- Language: JavaScript
- Homepage: https://goodguyry.github.io/aria-components-examples/
- Size: 2.17 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[![npm version][npmjs-img]][npmjs] [![Build Status][ci-img]][ci]
AriaComponents
==============
Quickly create accessible interactive components based on the W3C spec and examples
## Installation
```shell
npm i aria-components
```
## Usage
🌸 See the [release/v0.3](https://github.com/goodguyry/AriaComponents/tree/release/v0.3) branch for docs related to the current version.
Each component accepts an element and an `options` object.
```jsx
import Tablist, { AutomaticActivation } from 'aria-components/tablist';
new Tablist(element, { modules: [AutomaticActivation] })
```
The base class, [AriaComponent](src/), provides properties and methods available
to all components.
Each component's supplemental documentation can be found in its directory:
- [Dialog](src/Dialog/)
- [Disclosure](src/Disclosure/)
- [Listbox](src/Listbox/)
- [Menu](src/Menu/)
- [Popup](src/Popup/)
- [Tablist](src/Tablist/)
## Modules
Each component exports modules to add optional features and functionality that,
depending on the context, may simplify and/or improve UX.
General module documentation is at [`src/shared/modules/`](src/shared/modules/).
Some components have additional documentation within their local modules directory.
## References
- https://www.w3.org/WAI/ARIA/apg/patterns/
- https://www.w3.org/WAI/ARIA/apg/example-index/
- https://www.w3.org/TR/wai-aria/
## Contributing
Use `npm run dev` to run tests and watch files for changes.
Check `npm run` for more.
[npmjs-img]: https://badge.fury.io/js/aria-components.svg
[npmjs]: https://badge.fury.io/js/aria-components
[ci-img]: https://github.com/goodguyry/AriaComponents/actions/workflows/action-test.yml/badge.svg?branch=master
[ci]: https://github.com/goodguyry/AriaComponents/actions/