@jtmdias/react-a11y-tools

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

---

Table of Contents

• Table of Contents
• The Problem
• The Solution
• Installation
• Roadmap
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
• Tests
  • Run all tests
  • Cypress component tests:
  • Integration tests:

The Problem

We are in the era of design systems. Every company - from the smallest to the largest - has one or has thought about making one. These are great, and they provide the tools for building quick, fast and consistent user interfaces.

However, accessibility is still far from an easy task, especially when using libraries like React.

Whether we developers use others' design systems or build our own from scratch, accessibility is still considered a "last-minute-addition". And, sometimes, companies don't even have the resources or time to make it a priority.

The Solution

My goal is to make some parts of the accessibility process easier. Topics like focus management, navigation and announcements are all subjects we think can provide a helping hand.

This library provides accessibility and behaviour following the WAI-ARIA Authoring Practices, including screen-reader and keyboard navigation support.

We do not force any styling methodology or design-specific details. Instead, the little package provides the behaviour and interactions so that you can focus on your design.

There's also a simple testing tool so that you can emulate a no-mouse environment.

Installation

Inside your React project directory, install the package by running either of the following:

$ npm install react-a11y-tools

# or if you use Yarn

$ yarn add react-a11y-tools

Roadmap

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

✅ - Released
🛠 - Building

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

Issues

🐛 Bugs

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

See 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

Tests

There are two layers of tests written for this library:

• We use Cypress to do component and integration testing.

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

Run all tests

npm run test

Cypress component tests:

# In UI mode
npm run test:component-open

# in headless mode
npm run test:component-run

Integration tests:

# 1.1 Open Documentation website
npm run documentation:start

# 1.2 Open Cypress in UI mode
npm run test:integration-open