Skip to content

Commit dfbea66

Browse files
committed
fix formating issue
1 parent 1c896e9 commit dfbea66

File tree

1 file changed

+31
-22
lines changed

1 file changed

+31
-22
lines changed

docs/rules/a11y-no-duplicate-form-labels.md

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,47 @@
22

33
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.
44

5-
65
👎 Examples of **incorrect** code for this rule:
76

87
```jsx
98
import {FormControl, TextInput} from '@primer/react'
109

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+
}
1619
```
1720

1821
👍 Examples of **correct** code for this rule:
1922

2023
```jsx
2124
import {FormControl, TextInput} from '@primer/react'
2225

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+
}
3948
```

0 commit comments

Comments
 (0)