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

chore: add eslint jsx a11y package #4118

Merged

Conversation

FatumaA
Copy link
Contributor

@FatumaA FatumaA commented Sep 20, 2024

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?

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

Copy link

netlify bot commented Sep 20, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

netlify bot commented Sep 20, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

@FatumaA FatumaA changed the title Chore add eslint jsx a11y package build: add eslint jsx a11y package Sep 20, 2024
@nickytonline
Copy link
Member

@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

@nickytonline nickytonline changed the title build: add eslint jsx a11y package chore: add eslint jsx a11y package Sep 21, 2024
@FatumaA
Copy link
Contributor Author

FatumaA commented Sep 24, 2024

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
nickytonline previously approved these changes Sep 24, 2024
Copy link
Member

@nickytonline nickytonline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@nickytonline nickytonline dismissed their stale review September 24, 2024 18:10

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

Copy link
Member

@nickytonline nickytonline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

.eslintrc.json Show resolved Hide resolved
Co-authored-by: Nick Taylor <[email protected]>
@FatumaA
Copy link
Contributor Author

FatumaA commented Sep 24, 2024

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

Copy link
Member

@nickytonline nickytonline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@nickytonline nickytonline added this pull request to the merge queue Sep 24, 2024
Merged via the queue into open-sauced:beta with commit 6124086 Sep 24, 2024
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add the jsx-a11y eslint plugin to the project
3 participants