Skip to content

Commit

Permalink
Create eslint config for a11y (#1114)
Browse files Browse the repository at this point in the history
## 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
beaesguerra authored Feb 4, 2025
1 parent 569b98a commit 40e273a
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/lucky-ways-worry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/eslint-config": minor
---

Set up base a11y eslint config file (`@khanacademy/eslint-config/a11y`). It enables the `@khanacademy/aphrodite-add-style-variable-name` rule.
23 changes: 23 additions & 0 deletions packages/eslint-config-khan/a11y.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/* eslint-disable import/no-commonjs */
const ERROR = "error";

module.exports = {
parser: "@typescript-eslint/parser",
plugins: ["@khanacademy"],
env: {
browser: true,
es6: true,
},
settings: {
react: {
version: "detect",
},
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"],
},
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
},
rules: {
"@khanacademy/aphrodite-add-style-variable-name": ERROR,
},
};

0 comments on commit 40e273a

Please sign in to comment.