Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tobyzerner/inclusive-elements
Accessible, lightweight, unstyled implementations of common UI controls.
https://github.com/tobyzerner/inclusive-elements
a11y accessibility custom-elements web-components
Last synced: about 2 months ago
JSON representation
Accessible, lightweight, unstyled implementations of common UI controls.
- Host: GitHub
- URL: https://github.com/tobyzerner/inclusive-elements
- Owner: tobyzerner
- License: mit
- Created: 2021-03-04T06:17:40.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-01-10T11:13:30.000Z (12 months ago)
- Last Synced: 2024-10-31T14:46:10.493Z (about 2 months ago)
- Topics: a11y, accessibility, custom-elements, web-components
- Language: TypeScript
- Homepage:
- Size: 429 KB
- Stars: 22
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Inclusive Elements
**Accessible, lightweight, unstyled implementations of common UI controls.**
[**Demo**](https://tobyzerner.github.io/inclusive-elements/index.html)
Basic interactive UI patterns like popup menus, tooltips, and modals are surprisingly hard to get right on the web. Component libraries tend to be weighty, opinionated, and come tightly coupled with styles you don't want. On the other hand, rolling your own components feels like you're reinventing the wheel and puts accessibility at risk.
`inclusive-elements` provides those basic behaviors in the form of Custom Elements, without any of the cruft. They are:
- **🦮 Accessible.** Designed following the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) so everyone can use them.
- **🌳 Lightweight.** Tree-shake only the elements you need.
- **🎨 Unstyled.** Easily integrate with your design bottom-up without having to fight defaults.
- **🚀 Easy to use.** Simple API, works with any framework that supports Custom Elements.## Installation
```
npm install inclusive-elements --save
```## Elements
Detailed descriptions and usage instructions are contained within each element:
- [Accordion](src/accordion)
- [Alerts](src/alerts)
- [Disclosure](src/disclosure)
- [Menu](src/menu)
- [Modal](src/modal)
- [Popup](src/popup)
- [Tabs](src/tabs)
- [Toolbar](src/toolbar)
- [Tooltip](src/tooltip)## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## License
[MIT](LICENSE)