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

Run accessibility checks in dev mode using @axe-core/react #2966

Open
lindapaiste opened this issue Jan 27, 2024 · 4 comments · May be fixed by #3052
Open

Run accessibility checks in dev mode using @axe-core/react #2966

lindapaiste opened this issue Jan 27, 2024 · 4 comments · May be fixed by #3052
Assignees
Labels
Area:Accessibility Category for accessibility related features and bugs Area: Dependencies Pull requests that update a dependency file

Comments

@lindapaiste
Copy link
Collaborator

Increasing Access

Helps us find and fix accessibility issues before they make it into production.

Feature enhancement details

The official React docs recommend using the @axe-core/react to identify accessibility issues.
https://legacy.reactjs.org/docs/accessibility.html#axe-axe-core-and-react-axe
https://github.com/dequelabs/axe-core-npm/tree/develop/packages/react

We already have some checking with eslint ally, but this adds additional checks for insufficient color contrast, etc.

@lindapaiste lindapaiste added Area: Dependencies Pull requests that update a dependency file Area:Accessibility Category for accessibility related features and bugs labels Jan 27, 2024
@lindapaiste lindapaiste self-assigned this Jan 27, 2024
@lindapaiste
Copy link
Collaborator Author

I'm having issues with the package.json right now, so I'll past some stuff here which I intended to put in the PR.

We will get messages in the console when running in dev mode:
image

Messages can be expanded to show more details about the error:
image
image

@raclim
Copy link
Collaborator

raclim commented Jan 30, 2024

This would be awesome to add, thanks for finding this!

@letscodedanish
Copy link
Contributor

Hi @lindapaiste @raclim ,

I noticed that our project could benefit from improved accessibility, and I'd like to propose a solution to address this issue.

Solution Proposal:

I suggest integrating accessibility checks using @axe-core/react into our project. This library will help us identify and fix accessibility issues before they make it into production.

Benefits:

  • Proactive identification of accessibility issues.
  • Improved accessibility of the application.
  • Enhanced user experience for all users, including those with disabilities.

Implementation Details:

We can install @axe-core/react as a development dependency and add a script to run accessibility checks on our React components.

Offer to Implement:

I'm willing to take on the task of implementing this solution if it aligns with our project goals.

Looking forward to your feedback and guidance on this proposal.

@lindapaiste
Copy link
Collaborator Author

@letscodedanish sure! I was going to do this myself but got distracted with other things.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area:Accessibility Category for accessibility related features and bugs Area: Dependencies Pull requests that update a dependency file
Projects
None yet
3 participants