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

[lindapaiste]

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]

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:

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

[raclim]

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

[letscodedanish]

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]

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