React Axe

[DEPRECATED] Accessibility auditing for React.js applications
Alternatives To React Axe
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Chakra Ui36,04813015 hours ago65January 12, 2023298mitMDX
⚡️ Simple, Modular & Accessible UI Components for your React Applications
React Beautiful Dnd31,9169921,59010 days ago94August 30, 2022618otherJavaScript
Beautiful and accessible drag and drop for lists with React
Headlessui23,6521,7502 days ago504December 05, 202328mitTypeScript
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Sweetalert216,6373,4461,1384 days ago707November 19, 20237mitJavaScript
✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦
Primitives13,5171,7322 days ago177May 26, 2023476mitTypeScript
Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
Downshift11,7911,0721,0314 days ago332November 13, 202349mitJavaScript
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
React Spectrum11,0836744 hours ago612December 01, 2023645apache-2.0TypeScript
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
Grommet8,2876161532 days ago164November 13, 2023300apache-2.0JavaScript
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
Ariakit7,5027518411 hours ago102November 18, 202179mitTypeScript
Toolkit for building accessible web apps with React
React Modal7,30615,2832,36412 days ago114October 18, 2022195mitJavaScript
Accessible modal dialog component for React
Alternatives To React Axe
Select To Compare


Alternative Project Comparisons
Readme

[DEPRECATED] react-axe

No Maintenance Intended

This repository has been deprecated. The package has been moved to axe-core-npm. The package will be available via NPM as @axe-core/react.


React-axe

Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console.

Usage

Greenkeeper badge

Install the module from NPM or elsewhere

npm install --save-dev react-axe

Initialize the module

Call the exported function passing in the React and ReactDOM objects as well as a timing delay in milliseconds that will be observed between each component change and the time the analysis starts.

var React = require('react');
var ReactDOM = require('react-dom');

if (process.env.NODE_ENV !== 'production') {
  var axe = require('react-axe');
  axe(React, ReactDOM, 1000);
}

Be sure to only run the module in your development environment (as shown in the code above) or else your application will use more resources than necessary when in production. You can use envify to do this as is shown in the example.

Once initialized, the module will output accessibility defect information to the Chrome Devtools console every time a component updates.

Deduplicating

react-axe will deduplicate violations using the rule that raised the violation and the CSS selector and the failureSummary of the specific node. This will ensure that each unique issue will only be printed to the console once.

Debouncing

The third argument to the exported function is the number of milliseconds to wait for component updates to cease before performing an analysis of all the changes. The changes will be batched and analyzed from the closest common ancestor of all the components that changed within the batch. This generally leads to the first analysis for a dynamic application, analyzing the entire page (which is what you want), while subsequent updates will only analyze a portion of the page (which is probably also what you want).

Shadow DOM

With version 3.0.0, react-axe now runs accessibility tests inside of open Shadow DOM. You don't have to do anything special other than run react-axe on an component encapsulated with open Shadow DOM (as opposed to closed). For more information, see the axe-core repo.

Configuration

There is a fourth optional argument that is a configuration object for axe-core. Read about the object here: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure

var config = {
  rules: [
    {
      id: 'skip-link',
      enabled: true
    }
  ]
};

axe(React, ReactDOM, 1000, config);

Axe-core's context object can be given as a fifth optional argument to specify which element should (and which should not) be tested. Read more from the Axe-core documentation: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#context-parameter

var context = {
  include: [['#preview']]
};

axe(React, ReactDOM, 1000, undefined, context);

Run the example

Run a build in the example directory and start a server to see React-aXe in action in the Chrome Devtools console (opens on localhost:8888):

npm install
cd example
npm install
npm install -g http-server
npm start

Run the tests

Install dependencies in the root directory (which also installs them in the example directory) and then run the tests:

npm install
npm test

To debug tests in the Cypress application:

npm run test:debug

Compatibility

react-axe uses advanced console logging features and works best in the Chrome browser, with limited functionality in Safari and Firefox.

Advantages

I have been asked how this is different from modules like react-a11y which test the jsx.

The main difference is that react-axe tests the accessibility of the rendered DOM. This is important because many accessibility issues exist at the intersection of the DOM and the CSS and unless you have a fully rendered DOM, you will get two sorts of inaccuracies:

  1. False negatives because of lacking information. Example is in order to test color contrast you must know the foreground and background colors, and
  2. False positives because the element being evaluated is not in its final state and the information to communicate this to the testing algorithm is not available. Example is an inert piece of code that will be augmented once it becomes active.

If you have nice clean code, number 2 will be negligible but number 1 will always be a concern.

Popular Reactjs Projects
Popular Accessibility Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Typescript
Reactjs
Dom
Developer Tools
Accessibility
Shadow
Shadow Dom