open-sauced / app

🍕 Insights into your entire open source ecosystem.
https://pizza.new
Apache License 2.0
428 stars 228 forks source link

chore: add eslint jsx a11y package #4118

Closed FatumaA closed 1 month ago

FatumaA commented 2 months ago

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)

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

A GIF of a man in a black suit coat and a gray inner shirt is pulling his sleeves then flexing his collar

netlify[bot] commented 2 months ago

Deploy Preview for oss-insights ready!

Name Link
Latest commit ec03eb06692f63d786517c21c72867f544cf2716
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...

QR Code

Use your smartphone camera to open QR code link.

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

netlify[bot] commented 2 months ago

Deploy Preview for design-insights ready!

Name Link
Latest commit ec03eb06692f63d786517c21c72867f544cf2716
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...

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 commented 2 months ago

@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 commented 1 month ago

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.

FatumaA commented 1 month ago

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