Skip to content

A small React component library that aims to ease the process of creating accessible design systems, web apps or websites

License

Notifications You must be signed in to change notification settings

feedzai/react-a11y-tools

Repository files navigation

@feedzai/react-a11y-tools

A small React component library that aims to ease the process of creating accessible design systems, web apps or websites


Read The Docs

Latest Release Bundle Size Tree Shaking Support Dependency Count MIT License



Table of Contents

The Problem

We find ourselves amidst the age of design systems, where virtually every company, regardless of size, has either established one or contemplated its creation. These systems serve as invaluable resources, equipping us with the means to swiftly construct seamless and uniform user interfaces.

Yet, accessibility remains a challenging endeavor, particularly when integrating frameworks like React. Whether we rely on existing design systems or embark on crafting our own from the ground up, ensuring accessibility often emerges as an afterthought. Regrettably, some companies face constraints in resources and time, making it difficult to prioritize accessibility efforts.

The Solution

Our objective is to streamline certain aspects of the accessibility journey, focusing on key areas such as focus management, navigation, and announcements.

This library offers comprehensive accessibility features and behaviors in line with the WAI-ARIA Authoring Practices, encompassing support for screen-reader and keyboard navigation.

We refrain from imposing any specific styling methodology or design requirements. Instead, our compact package delivers essential behaviors and interactions, allowing you to concentrate on your design without constraints.

Additionally, we include a straightforward testing tool to simulate a mouse-free environment, facilitating thorough accessibility testing during development.

Installation

To integrate React A11y Tools into your React project directory, execute one of the following commands:

$ npm install @feedzai/react-a11y-tools

# or if you use Yarn

$ yarn add @feedzai/react-a11y-tools


Roadmap

Here is a table of the components, custom hooks and their status.

✅ - Released
🛠 - Building

Status Name
Messages Announcer
Route Announcer
Focus Manager
Roving Tabindex
Keyboard Only
Skip Links
Semantic Headings
Visually Hidden
useTabbable
useAutoId

Issues

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behaviour.

[See Bugs][bugs]

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

[See Feature Requests][requests]

Tests

There are three layers of tests written for this library:

  • Unit tests: we use vitest
  • Component tests: we use cypress
  • End-to-end tests: we also use cypress

To run the whole suite of tests, make sure you've done the steps in installation, then:

Run all tests

npm run test

Unit tests

npm run test:unit

Cypress component tests:

npm run test:component-open

End-to-end tests:

npm run test:e2e

About

A small React component library that aims to ease the process of creating accessible design systems, web apps or websites

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages