Enable rules from eslint-plugin-jsx-a11y in @khanacademy/eslint-config/a11y
#1118
Conversation
…llow the naming convention StyledElement
…eslint-plugin-jsx-a11y` in `@khanacademy/eslint-config/a11y`
🦋 Changeset detectedLatest commit: c58d9e2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1118 +/- ##
=======================================
Coverage 99.85% 99.85%
=======================================
Files 97 97
Lines 1392 1392
Branches 358 358
=======================================
Hits 1390 1390
Misses 1 1
Partials 1 1 Continue to review full report in Codecov by Sentry.
|
|
Size Change: 0 B Total Size: 4.63 kB ℹ️ View Unchanged
|
| For regulard repos, the settings will look like this: | ||
|
|
||
| ``` | ||
| For monorepos the `"import/resolver"` settings will look like this: |
There was a problem hiding this comment.
This was duplicated from line 12 and not needed (I think!)
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
There was a problem hiding this comment.
This looks great to me, thanks for all the thorough comments and rule settings! It will be good to hear @kevinb-khan's take on it too.
| // Mapping for common wrappers for html elements when we can use `addStyle` | ||
| StyledA: "a", | ||
| StyledButton: "button", | ||
| StyledImg: "img", | ||
| StyledSvg: "svg", | ||
| StyledUl: "ul", | ||
| StyledOl: "ol", | ||
| StyledLi: "li", | ||
| StyledSpan: "span", | ||
| StyledDiv: "div", | ||
| StyledSection: "section", | ||
| StyledHeader: "header", | ||
| StyledFooter: "footer", | ||
| StyledBlockquote: "blockquote", | ||
| StyledForm: "form", | ||
| StyledOutput: "output", | ||
| StyledIframe: "iframe", | ||
| StyledHr: "hr", | ||
| StyledP: "p", | ||
| StyledFieldset: "fieldset", | ||
| StyledLegend: "legend", | ||
| StyledCaption: "caption", | ||
| StyledPre: "pre", | ||
| StyledSup: "sup", | ||
| StyledMark: "mark", | ||
| StyledTable: "table", | ||
| StyledTr: "tr", | ||
| StyledTd: "td", | ||
| StyledTh: "th", | ||
| StyledDl: "dl", | ||
| StyledDt: "dt", | ||
| StyledDd: "dd", |
There was a problem hiding this comment.
So many. It would be nice to have a wonder-blocks package that exports this. Is that something that's on the roadmap?
| const ERROR = "error"; | ||
| const OFF = "off"; |
There was a problem hiding this comment.
I wondering if switching to tseslint.config means we'll get property type checking for our configs. No action req'd, just something we may want to think about for the future. See https://typescript-eslint.io/packages/typescript-eslint#config for details.
Summary:
This work is part of the implementation of ADR#781 Enabling more lint rules for accessibility
These changes includes:
eslint-plugin-jsx-a11ydependencyeslint-plugin-jsx-a11ybased on the proposed rules and settings in the ADR and the POC@khanacademy/eslint-config/a11yIssue: FEI-1133
Implementation Plan:
Test plan:
Testing the new config locally:
packages/eslint-config-khan. This will create a.tgzfile in the directoryyarn add -D -W /Users/beaesguerra/khan/wonder-stuff/packages/eslint-config-khan/khanacademy-eslint-config-v5.1.0.tgznode_modules/@khanacademy/eslint-config/a11y.jsin the project to see if the new config is there@khanacademy/eslint-config/a11yin the project's eslint config fileyarn lint/pnpm lintin the project and restart the ESLint server. It should show errors from thejsx-a11ypluginNote: Before merging and releasing these changes, I'll test these changes locally with the different projects and evaluate the errors to make sure the config changes are still relevant and helpful!