Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create eslint config for a11y (#1114)
## Summary: This work is part of the implementation of [ADR#781 Enabling more lint rules for accessibility](https://khanacademy.atlassian.net/wiki/x/IoBVyg) In these changes, a separate eslint config file for accessibility is set up since not all repos will need a11y config (see [config thread](https://khanacademy.atlassian.net/wiki/spaces/ENG/pages/3394600994/ADR+781+Enabling+more+lint+rules+for+accessibility?focusedCommentId=3428155481) from the ADR for more details). Following the [eslint docs for Sharing Multiple Configs](https://eslint.org/docs/latest/extend/shareable-configs-deprecated#sharing-multiple-configs), it is consumed in projects by adding the following to the project's eslint config file: ```js extends: ["@khanacademy/eslint-config/a11y"] ``` The a11y config file currently enables the `aphrodite-add-style-variable-name` rule from `@khanacademy/eslint-plugin`. This is the first step to adding more a11y linting rules so that the naming convention for html elements is more predictable for [custom component mapping](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#component-mapping) for `eslint-plugin-jsx-a11y` (see [rule docs](https://github.com/Khan/wonder-stuff/blob/main/packages/eslint-plugin-khan/docs/aphrodite-add-style-variable-name.md) for more details). Next steps: - Use this new config in WB, perseus, webapp and address lint errors from the aphrodite-add-style-variable-name rule - Update the a11y.js config with the config based on the accessibility linting rules ADR - Use the updated config in projects and address existing errors by disabling the rules per line. Teams can address existing errors as they work in the area and new errors can be prevented with these lint rules :) Issue: FEI-6050 ## Test plan: Testing extending the new config locally: - Run `yarn pack` in `packages/eslint-config-khan`. This will create a `.tgz` file in the directory - In another project (like Wonder Blocks), install the package: ex: `yarn add -D -W /Users/beaesguerra/khan/wonder-stuff/packages/eslint-config-khan/khanacademy-eslint-config-v5.0.1.tgz` - Note: you might need to remove the `node_modules` first to make sure it installed the correct package. You can check by checking if the file exists at `node_modules/@khanacademy/eslint-config/a11y.js` in the project - Make sure `@khanacademy/eslint-plugin` is at v3.1.1 - Add `"@khanacademy/eslint-config/a11y"` to the `extends` property in the eslint config file - Run `yarn lint` in the project and restart the ESLint server. It should show `aphrodite-add-style-variable-name` errors <img width="634" alt="image" src="https://github.com/user-attachments/assets/a86b0392-31ea-4a79-bec7-99b88321e592" /> <img width="1212" alt="image" src="https://github.com/user-attachments/assets/18269ba2-9c72-446c-8311-8246a6d4db3a" /> Author: beaesguerra Reviewers: beaesguerra, kevinb-khan Required Reviewers: Approved By: kevinb-khan Checks: ✅ codecov/project, ✅ Test (macos-latest, 20.x), ✅ CodeQL, ✅ Lint, typecheck, and coverage check (ubuntu-latest, 20.x), ✅ gerald, ✅ Analyze (javascript), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ dependabot Pull Request URL: #1114
- Loading branch information