Skip to content

Commit 08c11b7

Browse files
authored
feat: add a11y custom rules in a11y config (#38)
1 parent 673cf35 commit 08c11b7

8 files changed

Lines changed: 28 additions & 21 deletions

example-app/.eslintrc

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,6 @@
88
}
99
],
1010
"rules": {
11-
"@bam.tech/require-named-effect": "error",
12-
"@bam.tech/image-requires-accessible-prop": "error",
13-
"@bam.tech/do-not-use-role-on-image": "error",
14-
"@bam.tech/accessibility-props-require-accessible": "error",
15-
"@bam.tech/requires-accessibility-role-when-accessible": "error",
16-
"@bam.tech/requires-accessibility-label": "error"
11+
"@bam.tech/require-named-effect": "error"
1712
}
1813
}

packages/eslint-plugin/README.md

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ This plugin exports multiple configurations that can be used in your `.eslintrc`
3434
| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
3535
| [`@bam.tech/recommended`](./lib/configs/recommended.js) | The recommended config for all projects |
3636
| [`@bam.tech/tests`](./lib/configs/tests.js) | The recommended config for test files. By default this applies to every file: put it in an `overrides` to filter on your test files. |
37-
| [`@bam.tech/a11y` ](./lib/configs/a11y.js) | [beta] Eslint config to check for accessibility. Still in beta to not break existing projects, but will be merged into the recommended config in the future. |
37+
| [`@bam.tech/a11y`](./lib/configs/a11y.js) | [beta] Eslint config to check for accessibility. Still in beta to not break existing projects, but will be merged into the recommended config in the future. |
3838

3939
These configs need some peer dependencies. You can list them with:
4040

@@ -54,17 +54,19 @@ This plugin exports some custom rules that you can optionally use in your projec
5454

5555
<!-- begin auto-generated rules list -->
5656

57+
💼 Configurations enabled in.\
58+
♿ Set in the `a11y` configuration.\
5759
🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).\
5860
💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
5961

60-
| Name                                        | Description | 🔧 | 💡 |
61-
| :------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :-- | :-- |
62-
| [accessibility-props-require-accessible](docs/rules/accessibility-props-require-accessible.md) | Requires accessible prop when accessibility props are defined | 🔧 | |
63-
| [do-not-use-role-on-image](docs/rules/do-not-use-role-on-image.md) | Disallow role prop on Image component | 🔧 | |
64-
| [image-requires-accessible-prop](docs/rules/image-requires-accessible-prop.md) | Require accessible prop on image components | 🔧 | 💡 |
65-
| [require-named-effect](docs/rules/require-named-effect.md) | Enforces the use of named functions inside a useEffect | | |
66-
| [requires-accessibility-label](docs/rules/requires-accessibility-label.md) | Enforces label when component accessible | | 💡 |
67-
| [requires-accessibility-role-when-accessible](docs/rules/requires-accessibility-role-when-accessible.md) | Enforces accessibilityRole or role when component is accessible | | 💡 |
62+
| Name                                        | Description | 💼 | 🔧 | 💡 |
63+
| :------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :-- | :-- | :-- |
64+
| [accessibility-props-require-accessible](docs/rules/accessibility-props-require-accessible.md) | Requires accessible prop when accessibility props are defined | | 🔧 | |
65+
| [do-not-use-role-on-image](docs/rules/do-not-use-role-on-image.md) | Disallow role prop on Image component | | 🔧 | |
66+
| [image-requires-accessible-prop](docs/rules/image-requires-accessible-prop.md) | Require accessible prop on image components | | 🔧 | 💡 |
67+
| [require-named-effect](docs/rules/require-named-effect.md) | Enforces the use of named functions inside a useEffect | | | |
68+
| [requires-accessibility-label](docs/rules/requires-accessibility-label.md) | Enforces label when component accessible | | | 💡 |
69+
| [requires-accessibility-role-when-accessible](docs/rules/requires-accessibility-role-when-accessible.md) | Enforces accessibilityRole or role when component is accessible | | | 💡 |
6870

6971
<!-- end auto-generated rules list -->
7072

@@ -75,12 +77,7 @@ To use a rule, just declare it in your `.eslintrc`:
7577
{
7678
"plugins": ["@bam.tech"],
7779
"rules": {
78-
"@bam.tech/require-named-effect": "error",
79-
"@bam.tech/image-requires-accessible-prop": "error",
80-
"@bam.tech/do-not-use-role-on-image": "error",
81-
"@bam.tech/accessibility-props-require-accessible": "error",
82-
"@bam.tech/requires-accessibility-role-when-accessible": "error",
83-
"@bam.tech/requires-accessibility-label": "error"
80+
"@bam.tech/require-named-effect": "error"
8481
}
8582
}
8683
```

packages/eslint-plugin/docs/rules/accessibility-props-require-accessible.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Requires accessible prop when accessibility props are defined (`@bam.tech/accessibility-props-require-accessible`)
22

3+
💼 This rule is enabled in the ♿ `a11y` config.
4+
35
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
46

57
<!-- end auto-generated rule header -->

packages/eslint-plugin/docs/rules/do-not-use-role-on-image.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Disallow role prop on Image component (`@bam.tech/do-not-use-role-on-image`)
22

3+
💼 This rule is enabled in the ♿ `a11y` config.
4+
35
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
46

57
<!-- end auto-generated rule header -->

packages/eslint-plugin/docs/rules/image-requires-accessible-prop.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Require accessible prop on image components (`@bam.tech/image-requires-accessible-prop`)
22

3+
💼 This rule is enabled in the ♿ `a11y` config.
4+
35
🔧💡 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) and manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
46

57
<!-- end auto-generated rule header -->

packages/eslint-plugin/docs/rules/requires-accessibility-label.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Enforces label when component accessible (`@bam.tech/requires-accessibility-label`)
22

3+
💼 This rule is enabled in the ♿ `a11y` config.
4+
35
💡 This rule is manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
46

57
<!-- end auto-generated rule header -->

packages/eslint-plugin/docs/rules/requires-accessibility-role-when-accessible.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Enforces accessibilityRole or role when component is accessible (`@bam.tech/requires-accessibility-role-when-accessible`)
22

3+
💼 This rule is enabled in the ♿ `a11y` config.
4+
35
💡 This rule is manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
46

57
<!-- end auto-generated rule header -->

packages/eslint-plugin/lib/configs/a11y.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,10 @@ module.exports = defineConfig({
77
extends: ["plugin:react-native-a11y/all"],
88
rules: {
99
"react-native-a11y/has-accessibility-hint": "off",
10+
"@bam.tech/image-requires-accessible-prop": "error",
11+
"@bam.tech/do-not-use-role-on-image": "error",
12+
"@bam.tech/accessibility-props-require-accessible": "error",
13+
"@bam.tech/requires-accessibility-role-when-accessible": "error",
14+
"@bam.tech/requires-accessibility-label": "error",
1015
},
1116
});

0 commit comments

Comments
 (0)