react: Support React v18

[stephenmathieson]

Product: react
Expectation: React v18 support and docs
Actual: n/a
Motivation: Upgrading an app to use React 18 and want to continue using @axe-core/react

[another1aa]

Need this too please, any update on when to expect it? Or any workaround until ready? Thanks!

[saileshkotha]

Below works for me in React 18. I guess the initialization readme needs to be updated for react 18 with below example

import React from 'react';
import {createRoot} from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
    <div>Hello World</div>
);

if (process.env.NODE_ENV !== 'production') {
  // eslint-disable-next-line global-require
  const axe = require('@axe-core/react');
  axe(React, root, 1000);
}

[mithodin]

@saileshkotha doesn't work for me. Not sure why it does for you but I'm pretty sure this is not the fix.

[AustinGarrod]

Any update on adding this support?

[damian08k]

It works for me if I import ReactDOM from react-dom/client.
React and ReactDOM version:

"react": "^18.1.0",
"react-dom": "^18.1.0",

This is my index.tsx file:

// /* eslint-disable @typescript-eslint/no-non-null-assertion */

import React, { StrictMode } from 'react';
import ReactDOM, { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';

import store from 'store/store';

import App from './App';

if (process.env.NODE_ENV !== 'production') {
  const axe = require('@axe-core/react');

  axe(React, ReactDOM, 1000);
}

const container = document.getElementById('root');
const root = createRoot(container as HTMLElement);

root.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
);

And result in console:

[mithodin]

@damian08k it works on the initial render, but not on subsequent updates.

[damian08k]

@mithodin Yes, you're right. I didn't notice that.
So maybe let's try to ping axe-core creator I belive @michael-siek

Is there any chance to update @axe-core/react to use in React 18+ projects?

[michael-siek]

@damian08k We will be working on this soon to be able to support all React 18+ projects

[sneko]

I'm also interested by a workaround, if any of you have a sample repo :D ... currently using Next 13 but I guess it's adaptable once working with React 18

Thank you,

[jkliptonia]

Also interested in this, we're waiting on implementing axe on this change

[jkliptonia]

@michael-siek Is there any update on this work?

[straker]

Thank you for your continued patience. We've looked into supporting React 18 but at this time it doesn't look like we will be able to. Between issues with React 18 and the deprecation of findDOMNode in strict mode we haven't been able to find a workaround that will allow running accessibility checks on changed nodes at page load and subsequent updates.

[anulman]

Bumping this, as (1) react@18 adoption continues to grow; and (2) accessible UI is important.

I'm not looking for a 1:1 solution to restore the old behavior, nor do I have any to propose. I'm wondering instead how the Axe team recommends we implement Axe in a modern React project.

To be clear: I am very okay with tradeoffs like "deduplication gets worse" or "Axe always scans the whole page vs. just the changed tree". Mostly looking for a recommended path forward, as it's been almost 18 months since this issue was opened & 9 months since anyone was assigned.

[Bill-Compton]

Can we get the readme updated to indicate this tool is incompatible with React 18 until support is added?

[anagritsay]

Hello Axe-core team. Is there any update related with React 18? We need to update to React 18 and we are using Axe-core cli. iIs there a solution that we will be able to continue using it?

[ballendq]

Hi @anagritsay and folks following this comment thread. I'm a Product Manager at Deque and I wanted to make sure we we're communicating clearly on this issue.

Following on from @straker's earlier comment on June 14th, 2023, we have not been able to solve this problem. Furthermore, we have no plans to support React 18 and above. I will update the project's README to further communicate our plans.

What are the alternatives? Deque will be offering other solutions for developers writing automated tests in the JavaScript and Node ecosystems. During and immediately following axe-con (Feb. 20-22), there will be announcements about our recommended approach. I'll communicate alternatives within the project's README after product announcements have been made.

[anulman]

Thanks for the update @ballendq. Excited to learn what you recommend! I wonder if it has something to do with MutationObservers

[anagritsay]

Thank you for the information @ballendq, looking forward for the update

[AtuHQ]

Hello
Where can I find the news which were presented at the axe-con?
Best regards

[jlbooker]

Hello Where can I find the news which were presented at the axe-con? Best regards

@AtuHQ, It looks like you can register for the conference (even though it's already past) to get access to the session recordings. I'm trying to find the session with any relevant information now.

https://www.deque.com/axe-con/register/

[ballendq]

Quick update from Deque - we'll have a product offering coming in late March/early April. The first release will focus on JavaScript/TypeScript testing frameworks. We're still working on the details of this release so there will be more to come when the "official" release is done. Once complete, I can point folks to a blog post etc.

The new product will have a free plan and I'll add more commentary to this thread to describe how this might be used in open source. The new release will also have paid plans so that it's suitable for company use. Again, more details coming soon.

[kurtwaldowski-b]

@ballendq Thanks looking forward to the update here!

[AlwaysMoreHats]

@ballendq any update? We're almost out of April.

[AnderssonPeter]

React 19 beta was just released, the question is it this will be fixed before it becomes obsolete?

[ballendq]

@AlwaysMoreHats

@ballendq any update? We're almost out of April.

Yes, early next week. Very end of April.

[ballendq]

React 19 beta was just released, the question is it this will be fixed before it becomes obsolete?

@AnderssonPeter see my comment from Feb 6th 2024

[ballendq]

Folks - we released a new 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 recent blog post: Introducing axe Developer Hub, now available as part of axe DevTools for Web

[padmavemulapati]

Verified with the latest prod version of axe-core/react (4.9.1)

Its identifying the issue on react-components properly

But its giving Warning message

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

@straker , is this expected warning on using axe-core/react package.

Environment:

Label	Value
Product	axe-core-npm/react
Version	4.9.1
react version	18.3.1
OS-Details	_MAC- M1-14.4.1 && Windows 11 _
BrowserDetails	Chrome Version 125.0.6422.77