Skip to content

Commit 747a626

Browse files
NullVoxPopuliNullVoxPopuli
committed
Sync with template-lint
1 parent 0f01f92 commit 747a626

2 files changed

Lines changed: 81 additions & 28 deletions

File tree

‎docs/rules/template-require-valid-form-groups.md‎

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,53 +4,66 @@
44

55
Require grouped form controls to have appropriate semantics.
66

7-
When multiple form controls are related, they should be grouped with either:
7+
This rule requires appropriate semantics for grouped form controls. Correctly grouped
8+
form controls will take one of two approaches:
89

9-
- `<fieldset>` and `<legend>` (preferred), or
10-
- `role="group"` together with `aria-labelledby`.
10+
- use `<fieldset>` + `<legend>` (preferred)
11+
- associate controls using WAI-ARIA (also acceptable)
1112

1213
## Examples
1314

14-
Examples of **incorrect** code for this rule:
15+
This rule **forbids** the following:
1516

1617
```gjs
1718
<template>
1819
<div>
1920
<label for="radio-001">Chicago Zoey</label>
20-
<input id="radio-001" type="radio" name="prefMascot-Zoey" />
21-
<label for="radio-002">Chicago Tom</label>
22-
<input id="radio-002" type="radio" name="prefMascot-Tom" />
21+
<input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
22+
<label for="radio-002">Office Hours Tomster</label>
23+
<input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster" />
24+
<label for="radio-003">A11y Zoey</label>
25+
<input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
2326
</div>
2427
</template>
2528
```
2629

27-
Examples of **correct** code for this rule:
30+
This rule **allows** the following:
2831

2932
```gjs
3033
<template>
31-
<fieldset>
32-
<legend>Preferred Mascot Version</legend>
34+
<div role="group" aria-labelledby="preferred-mascot-heading">
35+
<div id="preferred-mascot-heading">Preferred Mascot Version</div>
3336
<label for="radio-001">Chicago Zoey</label>
34-
<input id="radio-001" type="radio" name="prefMascot-Zoey" />
35-
<label for="radio-002">Chicago Tom</label>
36-
<input id="radio-002" type="radio" name="prefMascot-Tom" />
37-
</fieldset>
37+
<input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
38+
<label for="radio-002">Office Hours Tomster</label>
39+
<input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster" />
40+
<label for="radio-003">A11y Zoey</label>
41+
<input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
42+
</div>
3843
</template>
3944
```
4045

4146
```gjs
4247
<template>
43-
<div role="group" aria-labelledby="preferred-mascot-heading">
44-
<div id="preferred-mascot-heading">Preferred Mascot Version</div>
45-
<label for="radio-001">Chicago Zoey</label>
46-
<input id="radio-001" type="radio" name="prefMascot-Zoey" />
47-
<label for="radio-002">Chicago Tom</label>
48-
<input id="radio-002" type="radio" name="prefMascot-Tom" />
49-
</div>
48+
<fieldset>
49+
<legend>Preferred Mascot Version</legend>
50+
<div>
51+
<label for="radio-001">Chicago Zoey</label>
52+
<input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
53+
</div>
54+
<div>
55+
<label for="radio-002">Office Hours Tomster</label>
56+
<input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster" />
57+
</div>
58+
<div>
59+
<label for="radio-003">A11y Zoey</label>
60+
<input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
61+
</div>
62+
</fieldset>
5063
</template>
5164
```
5265

5366
## References
5467

5568
- [Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/)
56-
- [The fieldset element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
69+
- [The Field Set element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)

‎tests/lib/rules/template-require-valid-form-groups.js‎

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,35 @@ ruleTester.run('template-require-valid-form-groups', rule, {
1515
<label for="radio-001">Chicago Zoey</label>
1616
<input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
1717
</div>
18+
<div>
19+
<label for="radio-002">Office Hours Tomster</label>
20+
<input
21+
id="radio-002"
22+
type="radio"
23+
name="prefMascot-OfficeHoursTomster"
24+
value="office hours tomster"
25+
/>
26+
</div>
27+
<div>
28+
<label for="radio-003">A11y Zoey</label>
29+
<input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
30+
</div>
1831
</fieldset>
1932
</template>`,
2033
`<template>
2134
<div role="group" aria-labelledby="preferred-mascot-heading">
2235
<div id="preferred-mascot-heading">Preferred Mascot Version</div>
2336
<label for="radio-001">Chicago Zoey</label>
2437
<input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
25-
<label for="radio-002">Chicago Tom</label>
26-
<input id="radio-002" type="radio" name="prefMascot-Tom" value="chicago zoey" />
38+
<label for="radio-002">Office Hours Tomster</label>
39+
<input
40+
id="radio-002"
41+
type="radio"
42+
name="prefMascot-OfficeHoursTomster"
43+
value="office hours tomster"
44+
/>
45+
<label for="radio-003">A11y Zoey</label>
46+
<input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
2747
</div>
2848
</template>`,
2949
`<template>
@@ -39,13 +59,23 @@ ruleTester.run('template-require-valid-form-groups', rule, {
3959
<label for="radio-001">Chicago Zoey</label>
4060
<input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey">
4161
</div>
62+
<div>
63+
<label for="radio-002">Office Hours Tomster</label>
64+
<input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster">
65+
</div>
66+
<div>
67+
<label for="radio-003">A11y Zoey</label>
68+
<input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey">
69+
</div>
4270
</fieldset></template>`,
4371
`<template><div role="group" aria-labelledby="preferred-mascot-heading">
4472
<div id="preferred-mascot-heading">Preferred Mascot Version</div>
4573
<label for="radio-001">Chicago Zoey</label>
4674
<input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey">
47-
<label for="radio-002">Chicago Tom</label>
48-
<input id="radio-002" type="radio" name="prefMascot-Tom" value="chicago zoey">
75+
<label for="radio-002">Office Hours Tomster</label>
76+
<input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster">
77+
<label for="radio-003">A11y Zoey</label>
78+
<input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey">
4979
</div></template>`,
5080
`<template><div>
5181
<label for="radio-001">Chicago Zoey</label>
@@ -82,13 +112,23 @@ hbsRuleTester.run('template-require-valid-form-groups', rule, {
82112
<label for="radio-001">Chicago Zoey</label>
83113
<input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey">
84114
</div>
115+
<div>
116+
<label for="radio-002">Office Hours Tomster</label>
117+
<input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster">
118+
</div>
119+
<div>
120+
<label for="radio-003">A11y Zoey</label>
121+
<input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey">
122+
</div>
85123
</fieldset>`,
86124
`<div role="group" aria-labelledby="preferred-mascot-heading">
87125
<div id="preferred-mascot-heading">Preferred Mascot Version</div>
88126
<label for="radio-001">Chicago Zoey</label>
89127
<input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey">
90-
<label for="radio-002">Chicago Tom</label>
91-
<input id="radio-002" type="radio" name="prefMascot-Tom" value="chicago zoey">
128+
<label for="radio-002">Office Hours Tomster</label>
129+
<input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster">
130+
<label for="radio-003">A11y Zoey</label>
131+
<input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey">
92132
</div>`,
93133
`<div>
94134
<label for="radio-001">Chicago Zoey</label>

0 commit comments

Comments
 (0)