Given this ES modules code:

import React from 'react';
import ReactDOM from 'react-dom';
import axe from 'react-axe';

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

ReactDOM.render(<div />, document.querySelector('#root'));

If the app is built in production mode, the react-axe package will not get stripped out from the bundle.

If this package defined sideEffects: false in its package.json, it would help webpack and Terser to dead code eliminate it.

This is needed in projects that don't make use of RequireJS imports, but only use standard ES modules imports.

I'm trying do some work on some server-rendered code, but it doesn't work because the plugin is trying to use the document object in the logElement method. I forked the repo to see if I can figure out how best to add support for server-rendered code, but without any tests I'm not sure how to validate my changes.

Should I just be running the example and hoping for the best?

There appears to be no way to exclude nodes from being checked by react-axe. I'd like to be able to exclude a 3rd party div that I have no control over (hotjar in this case).

The include/exclude options are part of the context parameter that gets passed into the run method of axe-core but in react-axe changing that setting appears not to be possible.

Is there another way of achieving this or would a change in the library be needed?

Hi

I can't get react-axe working with React.lazy imports.

Here is my react-axe related code

if (process.env.NODE_ENV !== 'production') {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const axe = require('react-axe');
  axe(React, ReactDOM, 5000); // big delay here because I want it to check a11y after lazy load
}

and here is my Routes' related code

import React from 'react';
import { Route, Switch } from 'react-router';

const Home = React.lazy(() => import(/* webpackChunkName: "Home" */ './Home'));
const NotFound = React.lazy(() =>
  import(/* webpackChunkName: "NotFound" */ './NotFound'),
);

const LoadingComponent = () => <div>Loading...</div>;

const Routes = (): JSX.Element => (
  <React.Suspense fallback={<LoadingComponent />}>
    <Switch>
      <Route exact path='/' component={Home} />
      <Route component={NotFound} />
    </Switch>
  </React.Suspense>
);

export default Routes;

When I reload the page, it works correctly, but after following a Link it throws an error Invariant Violation: Unable to find node on an unmounted component

I thought it was a React-Router related error, but after removing axe it works just fine.

Any help ?

Versions :

• [email protected]
• [email protected]
• [email protected]

Thanks

This library doesn't take the axe-core API into account at all. It calls axe.run and doesn't pass any options other than reporter: 'v2', so even if the user specifies tags or resultTypes it doesn't do anything with them. I don't see why we couldn't change that, though.

It should be pretty simple to merge the user options with the reporter, unless there's some scenario I'm not thinking of yet. https://github.com/dequelabs/react-axe/blob/develop/index.js#L123

Don't know the reason why v1 reporter is used now but I have a suggestion to move to v2 to be able to print more friendly messages with use of relatedNodes.

dequelabs/axe-core#215

So I got around to replacing react-a11y with react-axe in my project today and I immediately saw this after the replacement. It seems to point to line 20 in this screenshot:

https://www.dropbox.com/s/o0p4r7t6gso1uuy/Screenshot%202016-08-03%2020.51.17.png?dl=0

Let me know if you need any other information.

UPDATE: Sorry prior screenshot cut off the line numbers, new screenshot URL updated.

Can't get any color contrast errors to trigger. Works as expected in 2.1.6, seems to be broken in 2.1.7. Guessing it's related to this commit.

Hey, I'm sure this is somewhere but i just can't find it, sorry if it's somewhere obvious.

What level on conformity does this ensure you hit if the application runs and there are no warnings?

https://www.w3.org/WAI/WCAG2AAA-Conformance

In #100, it was pointed out that the contrast is too low on the light theme. Changing this will introduce issues in the dark theme. The only real solution here is to make this configurable. Given that the same project will run on different machines, we should think if there's a way to:

1. Make this configurable in the code base, to establish a default
2. Allow someone to customise this on their machine in a way that is persistent. Maybe by having a method that someone can call that saves a preference in local storage?

Could this be modified to print the failure then cause a fatal exception? At this point, most of the examples I've seen for adding axe to automated testing require a lot of manual work, but if react-axe could be (optionally) configured to fail with a useful error in test environments, it would go a long way toward catching a11y errors automatically.

Should not happen by default, but if a user requests them, log the review items to the console

React Axe produces the following error

axe.js:3139 Uncaught (in promise) Error: No elements found for include in page Context at validateContext (axe.js:3139) at new Context (axe.js:3182) at Object.runRules [as _runRules] (axe.js:4012) at Object.axe.run (axe.js:4200) at requestIdleCallback.timeout (index.js:131) at runTasks (index.js:138)

When a Material UI Select dropdown is opened and then closed. I believe this has to do with the React Portal that Material UI opens, and the fact that it is hidden for a brief time before the element is removed.

Demo: https://codesandbox.io/s/elastic-fast-hvo5d
(Note, in this demo the code sits within an iFrame. However the issue also occurs within our code which is outside of an iFrame)

The devDependency lint-staged was updated from 8.1.5 to 8.1.6.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lint-staged is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

With React 16+, while react-axe still seems to execute following timeout on page load, the hooks to check accessibility after componentDidMount or componentDidUpdate no longer seem to execute.

Adding breakpoint at:

I previously logged the same issue which I promptly closed after seeing that react-axe is only really supported in Chrome. However this issue is now starting to prevent me from using react-axe in some projects.

In some cases I get the following in Firefox browser (latest Windows version):

It also then severely degrades performance when the dev tools is open.

Before resorting to nasty browser detection things, is there a known way to stop this from happening?

Would really love to use this everywhere because it is awesome!

Is react-axe compatible with react native? Or does anyone know a way to make it work with react native application?

This may seem petty, but I think there's a good case for "practice what you preach".

Moderate warnings: #ffa500

Contrast ratio of 1.97 on white background — fails all compliance tests.

Suggested change:
Chrome uses #5c3c00 as dark text on a #fffbe5 yellow background, which is AAA compliant.

In other places they use a similar gold color on a white background:

Severe warnings: #ff0000

Contrast ratio of 4.0 on white background — only AA compliant at large sizes. This one isn't as egregious as the warnings.

Suggested change:
Chrome uses #c51916 for red text, which is AAA compliant. They also use #ff0000 for error logs in some places, so ¯_(ツ)_/¯

Hi,

I'm trying out react-axe which seems quite nice. Though I'm not getting some if the errors I expect.
For example "Ensures every HTML document has a lang attribute". I'm getting it through the axe chrome plugin and also if I'm running axe-core with the following:

var axe = require("axe-core/axe.js");

axe.a11yCheck(document, function (results) {
console.log(results.violations);
});

Is it possible to get it also with react-axe? I guess maybe not since react is only handling a part of the DOM and not html and head for example...

Hi,

First off, thanks for putting together this nice utility 👍.

Regarding my issue; In my work environment we pipe various production logs/messages to a back-end service and consequently I was hoping you would be open to a PR that provides an option (via the axe configuration) of returning any messages to a handler as opposed to directly outputting the results to the browser console?

Let me know what you think.

Thanks!

edit => never mind, seems like in your api there is an option to intercept outputs. I'll toy around with that and re-open this issue should I be unable to use it as I think I may be able to.

Hi,
I've got a form that I'm trying to attach aria-labelledby to. The error was fixed, but react-axe is still calling an error. I'm also getting the new error that ARIA attributes should be used correctly. I'm guessing it has to do with the hyphen being used in the aria-labelledby. Maybe inconsistent space/kebab space usage? Not ideal, but I didn't think it was rule breaking.

I might be making a mistake, but I don't see it. So I thought I'd share it.

Best,
Mike

PS if you can make this title better, please do!

Hello,
Thanks for putting this out. I imagine you're aware of react-a11y and I was hoping you could discuss how react-axe is different from react-a11y and why someone would use one over the other.

I also think this information would be fantastic to add to the Readme.

Thanks!

New goodies :)

The console error's link to further information points to 3.3 instead of 3.2, which leads to a "Page not found".

Example link: https://dequeuniversity.com/rules/axe/3.3/bypass?application=axeAPI

Hey, I'm currently seeing the below error:

critical: ARIA attributes must conform to valid values https://dequeuniversity.com/rules/axe/3.2/aria-valid-attr-value?application=axeAPI

It didn't specify which element was causing the problem so after process of elimination I found out the issue was involving how I was using aria-describedby on my input fields.

Next to the input field, I have a div with text that I'd like to reference using aria-describedby. On the div, I set id={id + 'HelpText'}. On the input field, I set aria-describedby={id + 'HelpText'}. I confirmed in the dom that these values match.

So i'm curious if react-axe is simply running before the js resolves here, which would explain why there are no elements under the error in the console. Please let me know!

React-axe doesn't work when loaded in a page with strict content security policies (e.g. it throws EvalError if e.g. script-src 'self')

Link to live demo: https://github.com/lhorie/axe-csp-bug

react-axe version: 3.0.2
axe-core version: 3.0.0

One workaround is to disable CSP rules in development, but ideally, CSP rules should be the same in dev and prod to avoid crashes if an unrelated package also abuses eval-like constructs

Here's where the code throws:

// node_modules/axe-core/axe.js:1755
  'use strict';
  axe.imports['doT'] = function(module, exports, define, require, process) {
    var global = Function('return this')(); // <---

I assumed it had something to do with this: https://github.com/dequelabs/axe-core/blob/ae2e09377cadb0c3229c8cc33497d8a81bf828d2/Gruntfile.js#L154

The react-axe package does not explicitly depend on doT

I also found other instances, e.g.

// node_modules/axe-core/axe.js:243
metadata.messages[prop] = new Function('return ' + metadata.messages[prop] + ';')();

which presumably comes from https://github.com/dequelabs/axe-core/blob/6bfff2b9d2d7b7868df5fd7fe026d284a96787fb/lib/core/base/audit.js#L306

This issue is a dupe of dequelabs/axe-core#1158 filed here at the request of @WilcoFiers

The devDependency eslint was updated from 5.13.0 to 5.14.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I have a react component that frequently updates when you mouseover a date region, it's similar to the contributions view of github:

For some reason when react-axe is active and I mouseover it and move my mouse it seems to get into an infinite loop in the after.js on the originalFn.apply line.

var after = function after(host, name, cb) {
	var originalFn = host[name];
	var restoreFn = undefined;

	if (originalFn) {
		host[name] = function () {
			originalFn.apply(this, arguments);
			cb(host);
		};
		restoreFn = function () {
			return host[name] = originalFn;
		};
	} else {
		host[name] = function () {
			cb(host);
		};
		restoreFn = function () {
			return delete host[name];
		};
	}

	restoreFunctions.push(restoreFn);
};

after.restorePatchedMethods = function () {
	restoreFunctions.forEach(function (restoreFn) {
		return restoreFn();
	});
	restoreFunctions = [];
};

module.exports = after;

Uncaught RangeError: Maximum call stack size exceeded
    at DataBar.host.(anonymous function) (http://localhost:3000/js/vendor_bundled_22229635cd1f11a8b467.js?826970b10a47f95bba4e:110279:25)
    at DataBar.h

Can I somehow disable react-axe just for this component with the configuration options? Failing that, any other ideas?

I'm encountering issues when adding react-axe into a project that has React.StrictMode within it's component tree. The error in particular is:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Provider which renders StrictMode children. Instead, add a ref directly to the element you want to reference.

Regarding usage of findDOMNode:
https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage

I noticed that some preliminary work had begun around this issue in #82 but I didn't see any open issues, and decided to make this one.

Currently react-axe does not allow you to configure the run command, only axe.configure. axe.configure does not support runOnly.

I currently have this code

reactAxe(React, ReactDOM, 1000, {
      rules: AxeCore.getRules(['wcag2aa', 'wcag2a']).map(rule => ({...rule, id: rule.ruleId, enabled: true})),
      disableOtherRules: true
    });

but I think the following would be preferable.

reactAxe(React, ReactDOM, 1000, {
      runOnly: ['wcag2aa', 'wcag2a']
    });

You have great technical docs and an explanation of how this differs from other packages... but what react-axe actually does takes a lot of reading.

Don't know if this is because of axe-core or react-axe

Axe 3.0 is now in play and I'm wondering if this is on your roadmap.

Using React 16+, the componentDidUpdate checkNode method does not seem to get added to the component. This can be demonstrated in the example app, where color contrast warnings are not logged to the console when an item is selected.

Here's one possible workaround I came up with:

function addComponent(component) {
	var reactInstance = component._reactInternalInstance;
	if (reactInstance) {
		if(!components[reactInstance._debugID]) {
			components[reactInstance._debugID] = component;
			componentAfterRender(component);
		}
		if (!component.componentDidMount) {
			after(component, 'componentDidMount', checkNode);
		} else if (!component.componentDidUpdate) {
			after(component, 'componentDidUpdate', checkNode);
		}
	}
}

Version 3.1.0 of axe-core was just published.

This version is covered by your current version range and after updating it in your project the build failed.

axe-core is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

I intermittently get the following error with react-axe:

axe.js:5500 Uncaught (in promise) Error: Expect axe._selectorData to be set up at generateSelector (axe.js:5500) at Object.createUniqueSelector [as getSelector] (axe.js:5556) at DqElement.get selector [as selector] (axe.js:4909) at axe.js:4340 at Array.map (<anonymous>) at axe.js:4333 at Array.map (<anonymous>) at axe.js:4330 at Array.forEach (<anonymous>) at Object../node_modules/axe-core/axe.js.helpers.processAggregate (axe.js:4322)

It tends to happen when I have a lot of component updates happening.

using axe-core 3.3.2, react-axe 3.3.0
implementing as follows in root of my application:

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

I saw a fix had previously been added to solve this: #32

The devDependency eslint-plugin-import was updated from 2.17.3 to 2.18.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi Deque team!

What is the license that this package is released under?

Edit: found it's MPL-2.0 https://github.com/dequelabs/react-axe/blob/master/package.json#L26 I'll rename this to add a license file :)

Hi,

Is it possible to make a release with axe-core dep as 3.3.1?
Would be nice with the new tests.

Thanks

The devDependency husky was updated from 2.4.1 to 2.5.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

husky is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Is it strict requirement to add DOMContentLoaded event listener?

My app uses react-static build tool for static rendering. It has dev mode similar with create-react-app, with HMR.

I'm using eslint with a11y plugin, and wanted to try your tool, but I'm not sure if I want to bundle your tool with everything else in production.

When running react-axe on a relatively large page of React components, Firefox starts reporting Too much recursion with every check.

It works fine in Chrome. And when I switch off react-axe I no longer get the issues in Firefox.

It seems to fail on the following line of the function after:

originalFn.apply(this, arguments);

Before diving deeper to see if I can find out why I am wondering if this has been seen before with react-axe ?

Should maybe add that it is a Redux application.

I was running react-axe 3.0.0-alpha.1 which originally included axe 3.0.0-beta.1 as a dependency. I did a fresh install on a project today and see that the product is now throwing nothing but errors to the console. I looked and the only major difference I can find is that the axe dependency is now 3.0.0-beta.2.

The error I'm getting is

undefined
axe.js?3204:2647 Uncaught (in promise) TypeError: Cannot read property 'actualNode' of undefined
    at _loop (axe.js?3204:2647)
    at Object.axe.utils.getSelectorData (axe.js?3204:2687)
    at generateSelector (axe.js?3204:2792)
    at Object.createUniqueSelector [as getSelector] (axe.js?3204:2848)
    at DqElement.get selector [as selector] (axe.js?3204:2256)
    at eval (axe.js?3204:1228)
    at Array.map (<anonymous>)
    at eval (axe.js?3204:1221)
    at Array.map (<anonymous>)
    at eval (axe.js?3204:1218)

It will not produce any valid responses in the console and nothing has changed between the two copies of my project (one working with beta.1 and one not working with beta.2)

Version 16.4.2 of the react packages was just published.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

It's been awhile since we've released. Once #65 lands, we should push a v3.1.0 version to npm.

The devDependency eslint-plugin-react was updated from 7.12.4 to 7.13.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

react-axe has some kind interference of user interaction on iOS Safari. input field in iframe can't be focus reliably.

Steps to reproduce:

1. With the react-axe enabled and a iframe with input fields presented on the page.
2. Tap the input field in the iframe, it works fine.
3. Tap done of the onscreen keyboard to the hide the keyboard.
4. Tap anything outside of the iframe.
5. Tap the input field in the iframe. The input field will no longer be able to get focus.

The last step might be intermitent. If you keep trying, eventually after 2 or 3 tires it might start working again.

We have tried on several iOS devices, iPhone 6, iPad, iPad Air. They all produce the same issue.

iOS version: 12.3.1
react-axe: 3.2.0
react: 16.9.0
react-dom: 16.9.0

All commits that land in develop should be released as a @next dist tag using the Git SHA in the version, similar to what we do in axe-core and axe-puppeteer.

Please add a TypeScript declaration file.

See https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html