npmpackage.info

Gathering detailed insights and metrics for @axe-core/react

Other packages similar to @axe-core/react

react-axe

3.5.4

Dynamic accessibility analysis for React using axe-core

axe-core-react-ffit

4.4.4

Dynamic accessibility analysis for React using axe-core, forked by ffit

gatsby-plugin-axe-core-react

1.0.3

A Gatsby plugin that checks @axe-core/react rules against Gatsby markup for accessibility testing

bernie-plugin-axe-core-react

1.0.0

Gathering detailed insights and metrics for @axe-core/react

@axe-core/react - 4.10.1 | npmpackage.info

@axe-core/react

4.10.1

650

MPL-2.0

JavaScript

150.16 kB

26,332,647 5.3

Installations

npm install @axe-core/react

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

18.20.4

NPM Version

lerna/8.1.3/node@v18.20.4+x64 (linux)

Score

99.3

Supply Chain

99.1

Quality

96.4

Maintenance

100

Vulnerability

80.2

License

Pull Requests

Open

2

Total

815

Closed

269

Merged

544

Issues

Open

75

Total

349

Closed

274

Releases

Release 4.10.1

v4.10.1

Updated on Nov 11, 2024

Release 4.10.0

v4.10.0

Updated on Aug 19, 2024

Release 4.9.1

v4.9.1

Updated on May 20, 2024

Release 4.9.0

v4.9.0

Updated on Apr 03, 2024

Release 4.8.5

v4.8.5

Updated on Feb 12, 2024

Release 4.8.4

v4.8.4

Updated on Feb 08, 2024

View All 22 releases

Languages

JavaScript

TypeScript

HTML

CSS

Shell

JavaScript (59.32%)

TypeScript (40.47%)

HTML (0.12%)

CSS (0.08%)

Shell (0.01%)

Developer

dequelabs

Download Statistics

Total Downloads

26,332,647

Last Day

35,603

Last Week

161,398

Last Month

758,793

Last Year

9,013,949

GitHub Statistics

MPL-2.0 License

650 Stars

609 Commits

73 Forks

12 Watchers

77 Branches

40 Contributors

Updated on Apr 30, 2025

Bundle Size

562.40 kB

Minified

150.16 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 40 Contributors

Package Meta Information

Latest Version

4.10.1

Package Id

@axe-core/react@4.10.1

Unpacked Size

38.28 kB

Size

7.00 kB

File Count

NPM Version

lerna/8.1.3/node@v18.20.4+x64 (linux)

Node Version

18.20.4

Published on

Nov 11, 2024

Total Downloads

Cumulative downloads

Total Downloads

26,332,647

Last Day

-9.7%

35,603

Compared to previous day

Last Week

-13.2%

161,398

Compared to previous week

Last Month

-0.5%

758,793

Compared to previous month

Last Year

9.1%

9,013,949

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@axe-core/react

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

Previous versions of this program were maintained at dequelabs/react-axe.

React support

This package does not support React 18 and above. Deque released a product called axe Developer Hub. This product has numerous JavaScript/TypeScript test framework integrations and is Deque's recommended path forward for users of this library who wish to use more modern versions of React.

The product has a free plan where each licensed user gets 1 API key. This is a good option for open-source projects or solo developers looking for high-quality accessibility feedback. Sign up for the free plan.

For more information, read the blog post: Introducing axe Developer Hub, now available as part of axe DevTools for Web

Usage

Install the module from NPM or elsewhere

1npm install --save-dev @axe-core/react

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.

1const React = require('react');
2const ReactDOM = require('react-dom');
3
4if (process.env.NODE_ENV !== 'production') {
5  const axe = require('@axe-core/react');
6  axe(React, ReactDOM, 1000);
7}

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

@axe-core/react 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. This can be disabled by setting disableDeduplicate: true in the configuration object as shown in the example here.

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, @axe-core/react now runs accessibility tests inside of open Shadow DOM. You don't have to do anything special other than run @axe-core/react 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

1const config = {
2  rules: [
3    {
4      id: 'skip-link',
5      enabled: true
6    }
7  ],
8  disableDeduplicate: true
9};
10
11axe(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

1const context = {
2  include: [['#preview']]
3};
4
5axe(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):

1npm install
2cd example
3npm install
4npm install -g http-server
5npm 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.

No vulnerabilities found.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Security-Policy

Determines if the project has published a security policy.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

5

Maintained

Determines if the project is "actively maintained".

5

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 5

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/auto-patch-release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/auto-patch-release.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/create-release-candidate.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/create-release-candidate.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/deploy.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/deploy.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:70: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/deploy.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/deploy.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/deploy.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/deploy.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/semantic-pr-footer.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/semantic-pr-footer.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/semantic-pr-title.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/semantic-pr-title.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/sync-master-develop.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/sync-master-develop.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:75: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:96: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:136: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:137: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:176: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:177: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:190: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:191: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:118: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:119: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:157: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:158: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/tests.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-axe-core.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/update-axe-core.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-axe-core.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/update-axe-core.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/update-axe-core.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/dequelabs/axe-core-npm/update-axe-core.yml/develop?enable=pin
Info: 0 out of 28 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 6 third-party GitHubAction dependencies pinned
Info: 13 out of 13 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

5.3

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @axe-core/react

Other packages similar to @axe-core/react

@axe-core/react

Installations

Developer Guide

Yes

CommonJS, ESM

18.20.4

lerna/8.1.3/node@v18.20.4+x64 (linux)

Score

Pull Requests

2

815

269

544

Issues

75

349

274

Releases

Languages

Developer

dequelabs

Download Statistics

GitHub Statistics

Bundle Size

562.40 kB

150.16 kB

Maintainers

Package Meta Information

Total Downloads

26,332,647

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

@axe-core/react

React support

Usage

Initialize the module

Deduplicating

Debouncing

Shadow DOM

Configuration

Run the example

Run the tests

Compatibility

10

10

10

10

10

5

5

0

0

0

0

0

5.3

/10