|
2 | 2 |
|
3 | 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 | 4 |
|
5 |
| - |
6 | 5 | 👎 Examples of **incorrect** code for this rule:
|
7 | 6 |
|
8 | 7 | ```jsx
|
9 | 8 | import {FormControl, TextInput} from '@primer/react'
|
10 | 9 |
|
11 |
| -// TextInput has aria-label when FormControl.Label is present |
12 |
| -<FormControl> |
13 |
| - <FormControl.Label>Form Input Label</FormControl.Label> |
14 |
| - <TextInput aria-label="Form Input Label" /> |
15 |
| -</FormControl> |
| 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 | +} |
16 | 19 | ```
|
17 | 20 |
|
18 | 21 | 👍 Examples of **correct** code for this rule:
|
19 | 22 |
|
20 | 23 | ```jsx
|
21 | 24 | import {FormControl, TextInput} from '@primer/react'
|
22 | 25 |
|
23 |
| -// TextInput without aria-label when FormControl.Label is present |
24 |
| -<FormControl> |
25 |
| - <FormControl.Label>Form Input Label</FormControl.Label> |
26 |
| - <TextInput /> |
27 |
| -</FormControl> |
28 |
| - |
29 |
| -// TextInput with aria-label when no FormControl.Label is present |
30 |
| -<FormControl> |
31 |
| - <TextInput aria-label="Form Input Label" /> |
32 |
| -</FormControl> |
33 |
| - |
34 |
| -// Using visuallyHidden FormControl.Label without aria-label |
35 |
| -<FormControl> |
36 |
| - <FormControl.Label visuallyHidden>Form Input Label</FormControl.Label> |
37 |
| - <TextInput /> |
38 |
| -</FormControl> |
| 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 | +} |
39 | 48 | ```
|
0 commit comments