[FatumaA]

Description

This PR adds the eslint jsx a11y plugin to the project.

Related Tickets & Documents

Fixes #2264

Mobile & Desktop Screenshots/Recordings

N/A

Steps to QA

1. Run npx eslint . at root of project
2. See the accessibility issues show up as warnings instead of errors

Tier (staff will fill in)

• Tier 1
• Tier 2
• Tier 3
• Tier 4

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	ec03eb0
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/66f327e661e6610008c75dd6
😎 Deploy Preview	https://deploy-preview-4118--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

• npm-shrinkwrap.json
• package.json

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	ec03eb0
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/66f327e61779630008497a18
😎 Deploy Preview	https://deploy-preview-4118--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nickytonline]

@FatumaA, thanks for the PR! This will be a great first step in sorting out some accessibility issues mentioned in the associated issue.

For the new rules, there's no need to explicitly set all the rules to warn. Only, set the rules to warn that currently cause the build to fail.

I believe most of the issues are <div>s with 'onClicks in JSX, i.e. jsx-a11y/no-noninteractive-element-to-interactive-rolewhich also causes this rule to fail,jsx-a11y/click-events-have-key-events`.

From there, as discussed we can tackle those issues one by one, and once they're all sorted, we can remove all the rules that were set to warn so they can error by default, i.e. #4110

[FatumaA]

I've removed the rules that did not cause errors when running npx eslint . in the project root. I left about 10 rules that were causing errors.

[nickytonline]

Thanks for this @FatumaA! Looking forward to making the app more accessible!

Looks like the build is failing because of lint errors still.

[nickytonline]

Looks like some more rules need warnings still to get the build to pass.

[FatumaA]

I should have run the build locally 🤦🏾‍♀️

[nickytonline]