Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react: Support React v18 #500

Closed
stephenmathieson opened this issue Apr 22, 2022 · 28 comments · Fixed by #1004
Closed

react: Support React v18 #500

stephenmathieson opened this issue Apr 22, 2022 · 28 comments · Fixed by #1004

Comments

@stephenmathieson
Copy link
Member

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

@Zidious Zidious added the enhancement New feature or request label Apr 25, 2022
@another1aa
Copy link

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

@saileshkotha
Copy link

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
Copy link

mithodin commented Sep 2, 2022

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

@AustinGarrod
Copy link

Any update on adding this support?

@damian08k
Copy link

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:
image

@mithodin
Copy link

mithodin commented Nov 7, 2022

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

@damian08k
Copy link

@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
Copy link
Member

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

@michael-siek michael-siek self-assigned this Nov 11, 2022
@sneko
Copy link

sneko commented Dec 5, 2022

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,

@michael-siek michael-siek added PROD: axe-core-npm TYPE: enhancement PRIORITY: critical Critical priority item; should be worked on immediately SIZE: medium Medium work effort PACKAGE: react and removed enhancement New feature or request labels Dec 8, 2022
@michael-siek michael-siek removed their assignment Dec 15, 2022
@jkliptonia
Copy link

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

@jkliptonia
Copy link

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

@straker
Copy link
Contributor

straker commented Jun 14, 2023

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
Copy link

anulman commented Sep 14, 2023

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.

@dequejenn dequejenn removed the PRIORITY: critical Critical priority item; should be worked on immediately label Nov 13, 2023
@Bill-Compton
Copy link

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

@anagritsay
Copy link

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
Copy link
Contributor

ballendq commented Feb 6, 2024

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
Copy link

anulman commented Feb 8, 2024

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

@anagritsay
Copy link

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

@AtuHQ
Copy link

AtuHQ commented Mar 13, 2024

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

@jlbooker
Copy link

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
Copy link
Contributor

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
Copy link

@ballendq Thanks looking forward to the update here!

@AlwaysMoreHats
Copy link

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

@AnderssonPeter
Copy link

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

@ballendq
Copy link
Contributor

ballendq commented Apr 26, 2024

@AlwaysMoreHats

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

Yes, early next week. Very end of April.

@ballendq
Copy link
Contributor

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
Copy link
Contributor

ballendq commented Apr 30, 2024

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

straker added a commit that referenced this issue May 9, 2024
#1047)

Add axe Developer Hub as the preferred option for React 18+ users.

Refs: #500
QA notes: No QA needed.

---------

Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com>
@padmavemulapati
Copy link

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

Its identifying the issue on react-components properly

image

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
image

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.