eslint-plugin-primer-react 7.0.2 → 7.1.0-rc.57f3453
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/docs/rules/a11y-no-duplicate-form-labels.md +48 -0
- package/package-lock.json +14751 -0
- package/package.json +2 -2
- package/src/configs/recommended.js +1 -0
- package/src/index.js +1 -0
- package/src/rules/__tests__/a11y-no-duplicate-form-labels.test.js +112 -0
- package/src/rules/__tests__/enforce-button-for-link-with-nohref.test.js +86 -0
- package/src/rules/a11y-no-duplicate-form-labels.js +69 -0
- package/src/rules/enforce-button-for-link-with-nohref.js +41 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# eslint-plugin-primer-react
|
|
2
2
|
|
|
3
|
+
## 7.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#366](https://github.com/primer/eslint-plugin-primer-react/pull/366) [`c7bf278`](https://github.com/primer/eslint-plugin-primer-react/commit/c7bf278d7e7d6b389f325bfb9f57dca2114b3506) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Add `a11y-no-duplicate-form-labels` rule to prevent duplicate labels on TextInput components.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- [#364](https://github.com/primer/eslint-plugin-primer-react/pull/364) [`ec701d2`](https://github.com/primer/eslint-plugin-primer-react/commit/ec701d29d35a0a3f09eea2f66dbe28b4be81957f) Thanks [@pksjce](https://github.com/pksjce)! - Add rule for Link to not be allowed without href
|
|
12
|
+
|
|
3
13
|
## 7.0.2
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
## Rule Details
|
|
2
|
+
|
|
3
|
+
This rule prevents accessibility issues by ensuring form controls have only one label. When a `FormControl` contains both a `FormControl.Label` and a `TextInput` with an `aria-label`, it creates duplicate labels which can confuse screen readers and other assistive technologies.
|
|
4
|
+
|
|
5
|
+
👎 Examples of **incorrect** code for this rule:
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import {FormControl, TextInput} from '@primer/react'
|
|
9
|
+
|
|
10
|
+
function ExampleComponent() {
|
|
11
|
+
return (
|
|
12
|
+
// TextInput has aria-label when FormControl.Label is present
|
|
13
|
+
<FormControl>
|
|
14
|
+
<FormControl.Label>Form Input Label</FormControl.Label>
|
|
15
|
+
<TextInput aria-label="Form Input Label" />
|
|
16
|
+
</FormControl>
|
|
17
|
+
)
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
👍 Examples of **correct** code for this rule:
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
import {FormControl, TextInput} from '@primer/react'
|
|
25
|
+
|
|
26
|
+
function ExampleComponent() {
|
|
27
|
+
return (
|
|
28
|
+
<>
|
|
29
|
+
{/* TextInput without aria-label when FormControl.Label is present */}
|
|
30
|
+
<FormControl>
|
|
31
|
+
<FormControl.Label>Form Input Label</FormControl.Label>
|
|
32
|
+
<TextInput />
|
|
33
|
+
</FormControl>
|
|
34
|
+
|
|
35
|
+
{/* TextInput with aria-label when no FormControl.Label is present */}
|
|
36
|
+
<FormControl>
|
|
37
|
+
<TextInput aria-label="Form Input Label" />
|
|
38
|
+
</FormControl>
|
|
39
|
+
|
|
40
|
+
{/* Using visuallyHidden FormControl.Label without aria-label */}
|
|
41
|
+
<FormControl>
|
|
42
|
+
<FormControl.Label visuallyHidden>Form Input Label</FormControl.Label>
|
|
43
|
+
<TextInput />
|
|
44
|
+
</FormControl>
|
|
45
|
+
</>
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
```
|