Skip to content

Commit 7af3886

Browse files
mj12albertmichelengelen
mj12albert
authored and
michelengelen
committed
[test][text field] Add axe tests and WCAG conformance report
1 parent fc0a007 commit 7af3886

8 files changed

Lines changed: 879 additions & 60 deletions

File tree

‎docs/data/material/components/text-fields/ValidationTextFields.js‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,6 @@ export default function ValidationTextFields() {
1515
id="outlined-error"
1616
label="Error"
1717
defaultValue="Hello World"
18-
/>
19-
<TextField
20-
error
21-
id="outlined-error-helper-text"
22-
label="Error"
23-
defaultValue="Hello World"
2418
helperText="Incorrect entry."
2519
/>
2620
</div>
@@ -30,13 +24,6 @@ export default function ValidationTextFields() {
3024
id="filled-error"
3125
label="Error"
3226
defaultValue="Hello World"
33-
variant="filled"
34-
/>
35-
<TextField
36-
error
37-
id="filled-error-helper-text"
38-
label="Error"
39-
defaultValue="Hello World"
4027
helperText="Incorrect entry."
4128
variant="filled"
4229
/>
@@ -47,13 +34,6 @@ export default function ValidationTextFields() {
4734
id="standard-error"
4835
label="Error"
4936
defaultValue="Hello World"
50-
variant="standard"
51-
/>
52-
<TextField
53-
error
54-
id="standard-error-helper-text"
55-
label="Error"
56-
defaultValue="Hello World"
5737
helperText="Incorrect entry."
5838
variant="standard"
5939
/>

‎docs/data/material/components/text-fields/ValidationTextFields.tsx‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,6 @@ export default function ValidationTextFields() {
1515
id="outlined-error"
1616
label="Error"
1717
defaultValue="Hello World"
18-
/>
19-
<TextField
20-
error
21-
id="outlined-error-helper-text"
22-
label="Error"
23-
defaultValue="Hello World"
2418
helperText="Incorrect entry."
2519
/>
2620
</div>
@@ -30,13 +24,6 @@ export default function ValidationTextFields() {
3024
id="filled-error"
3125
label="Error"
3226
defaultValue="Hello World"
33-
variant="filled"
34-
/>
35-
<TextField
36-
error
37-
id="filled-error-helper-text"
38-
label="Error"
39-
defaultValue="Hello World"
4027
helperText="Incorrect entry."
4128
variant="filled"
4229
/>
@@ -47,13 +34,6 @@ export default function ValidationTextFields() {
4734
id="standard-error"
4835
label="Error"
4936
defaultValue="Hello World"
50-
variant="standard"
51-
/>
52-
<TextField
53-
error
54-
id="standard-error-helper-text"
55-
label="Error"
56-
defaultValue="Hello World"
5737
helperText="Incorrect entry."
5838
variant="standard"
5939
/>

‎docs/data/material/components/text-fields/text-fields.a11y.json‎

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
{
2+
"BasicTextFields": {
3+
"rules": {
4+
"aria-allowed-attr": {
5+
"status": "pass",
6+
"tags": ["wcag2a"]
7+
},
8+
"aria-conditional-attr": {
9+
"status": "pass",
10+
"tags": ["wcag2a"]
11+
},
12+
"aria-hidden-focus": {
13+
"status": "pass",
14+
"tags": ["wcag2a"]
15+
},
16+
"aria-prohibited-attr": {
17+
"status": "pass",
18+
"tags": ["wcag2a"]
19+
},
20+
"aria-valid-attr": {
21+
"status": "pass",
22+
"tags": ["wcag2a"]
23+
},
24+
"aria-valid-attr-value": {
25+
"status": "pass",
26+
"tags": ["wcag2a"]
27+
},
28+
"color-contrast": {
29+
"status": "incomplete",
30+
"tags": ["wcag2aa"]
31+
},
32+
"duplicate-id-aria": {
33+
"status": "pass",
34+
"tags": ["wcag2a"]
35+
},
36+
"form-field-multiple-labels": {
37+
"status": "pass",
38+
"tags": ["wcag2a"]
39+
},
40+
"label": {
41+
"status": "pass",
42+
"tags": ["wcag2a"]
43+
},
44+
"target-size": {
45+
"status": "pass",
46+
"tags": ["wcag22aa"]
47+
}
48+
}
49+
},
50+
"ColorTextFields": {
51+
"rules": {
52+
"aria-allowed-attr": {
53+
"status": "pass",
54+
"tags": ["wcag2a"]
55+
},
56+
"aria-conditional-attr": {
57+
"status": "pass",
58+
"tags": ["wcag2a"]
59+
},
60+
"aria-hidden-focus": {
61+
"status": "pass",
62+
"tags": ["wcag2a"]
63+
},
64+
"aria-prohibited-attr": {
65+
"status": "pass",
66+
"tags": ["wcag2a"]
67+
},
68+
"aria-valid-attr": {
69+
"status": "pass",
70+
"tags": ["wcag2a"]
71+
},
72+
"aria-valid-attr-value": {
73+
"status": "pass",
74+
"tags": ["wcag2a"]
75+
},
76+
"color-contrast": {
77+
"status": "fail",
78+
"tags": ["wcag2aa"]
79+
},
80+
"duplicate-id-aria": {
81+
"status": "pass",
82+
"tags": ["wcag2a"]
83+
},
84+
"form-field-multiple-labels": {
85+
"status": "pass",
86+
"tags": ["wcag2a"]
87+
},
88+
"label": {
89+
"status": "pass",
90+
"tags": ["wcag2a"]
91+
},
92+
"target-size": {
93+
"status": "pass",
94+
"tags": ["wcag22aa"]
95+
}
96+
}
97+
},
98+
"FormPropsTextFields": {
99+
"rules": {
100+
"aria-allowed-attr": {
101+
"status": "pass",
102+
"tags": ["wcag2a"]
103+
},
104+
"aria-conditional-attr": {
105+
"status": "pass",
106+
"tags": ["wcag2a"]
107+
},
108+
"aria-hidden-focus": {
109+
"status": "pass",
110+
"tags": ["wcag2a"]
111+
},
112+
"aria-prohibited-attr": {
113+
"status": "pass",
114+
"tags": ["wcag2a"]
115+
},
116+
"aria-valid-attr": {
117+
"status": "pass",
118+
"tags": ["wcag2a"]
119+
},
120+
"aria-valid-attr-value": {
121+
"status": "pass",
122+
"tags": ["wcag2a"]
123+
},
124+
"autocomplete-valid": {
125+
"status": "pass",
126+
"tags": ["wcag21aa"]
127+
},
128+
"color-contrast": {
129+
"status": "incomplete",
130+
"tags": ["wcag2aa"]
131+
},
132+
"duplicate-id-aria": {
133+
"status": "pass",
134+
"tags": ["wcag2a"]
135+
},
136+
"form-field-multiple-labels": {
137+
"status": "pass",
138+
"tags": ["wcag2a"]
139+
},
140+
"label": {
141+
"status": "pass",
142+
"tags": ["wcag2a"]
143+
},
144+
"target-size": {
145+
"status": "pass",
146+
"tags": ["wcag22aa"]
147+
}
148+
}
149+
},
150+
"MultilineTextFields": {
151+
"rules": {
152+
"aria-allowed-attr": {
153+
"status": "pass",
154+
"tags": ["wcag2a"]
155+
},
156+
"aria-conditional-attr": {
157+
"status": "pass",
158+
"tags": ["wcag2a"]
159+
},
160+
"aria-hidden-focus": {
161+
"status": "pass",
162+
"tags": ["wcag2a"]
163+
},
164+
"aria-prohibited-attr": {
165+
"status": "pass",
166+
"tags": ["wcag2a"]
167+
},
168+
"aria-valid-attr": {
169+
"status": "pass",
170+
"tags": ["wcag2a"]
171+
},
172+
"aria-valid-attr-value": {
173+
"status": "pass",
174+
"tags": ["wcag2a"]
175+
},
176+
"avoid-inline-spacing": {
177+
"status": "pass",
178+
"tags": ["wcag21aa"]
179+
},
180+
"color-contrast": {
181+
"status": "incomplete",
182+
"tags": ["wcag2aa"]
183+
},
184+
"duplicate-id-aria": {
185+
"status": "pass",
186+
"tags": ["wcag2a"]
187+
},
188+
"form-field-multiple-labels": {
189+
"status": "pass",
190+
"tags": ["wcag2a"]
191+
},
192+
"label": {
193+
"status": "pass",
194+
"tags": ["wcag2a"]
195+
},
196+
"target-size": {
197+
"status": "pass",
198+
"tags": ["wcag22aa"]
199+
}
200+
}
201+
},
202+
"TextFieldSizes": {
203+
"rules": {
204+
"aria-allowed-attr": {
205+
"status": "pass",
206+
"tags": ["wcag2a"]
207+
},
208+
"aria-conditional-attr": {
209+
"status": "pass",
210+
"tags": ["wcag2a"]
211+
},
212+
"aria-hidden-focus": {
213+
"status": "pass",
214+
"tags": ["wcag2a"]
215+
},
216+
"aria-prohibited-attr": {
217+
"status": "pass",
218+
"tags": ["wcag2a"]
219+
},
220+
"aria-valid-attr": {
221+
"status": "pass",
222+
"tags": ["wcag2a"]
223+
},
224+
"aria-valid-attr-value": {
225+
"status": "pass",
226+
"tags": ["wcag2a"]
227+
},
228+
"color-contrast": {
229+
"status": "incomplete",
230+
"tags": ["wcag2aa"]
231+
},
232+
"duplicate-id-aria": {
233+
"status": "pass",
234+
"tags": ["wcag2a"]
235+
},
236+
"form-field-multiple-labels": {
237+
"status": "pass",
238+
"tags": ["wcag2a"]
239+
},
240+
"label": {
241+
"status": "pass",
242+
"tags": ["wcag2a"]
243+
},
244+
"target-size": {
245+
"status": "pass",
246+
"tags": ["wcag22aa"]
247+
}
248+
}
249+
},
250+
"ValidationTextFields": {
251+
"rules": {
252+
"aria-allowed-attr": {
253+
"status": "pass",
254+
"tags": ["wcag2a"]
255+
},
256+
"aria-conditional-attr": {
257+
"status": "pass",
258+
"tags": ["wcag2a"]
259+
},
260+
"aria-hidden-focus": {
261+
"status": "pass",
262+
"tags": ["wcag2a"]
263+
},
264+
"aria-prohibited-attr": {
265+
"status": "pass",
266+
"tags": ["wcag2a"]
267+
},
268+
"aria-valid-attr": {
269+
"status": "pass",
270+
"tags": ["wcag2a"]
271+
},
272+
"aria-valid-attr-value": {
273+
"status": "pass",
274+
"tags": ["wcag2a"]
275+
},
276+
"color-contrast": {
277+
"status": "fail",
278+
"tags": ["wcag2aa"]
279+
},
280+
"duplicate-id-aria": {
281+
"status": "pass",
282+
"tags": ["wcag2a"]
283+
},
284+
"form-field-multiple-labels": {
285+
"status": "pass",
286+
"tags": ["wcag2a"]
287+
},
288+
"label": {
289+
"status": "pass",
290+
"tags": ["wcag2a"]
291+
},
292+
"target-size": {
293+
"status": "pass",
294+
"tags": ["wcag22aa"]
295+
}
296+
}
297+
}
298+
}

‎docs/data/material/components/text-fields/text-fields.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,7 @@ The rendered HTML input will look like this:
6161

6262
## Validation
6363

64-
The `error` prop toggles the error state.
65-
The `helperText` prop can then be used to provide feedback to the user about the error.
64+
Use the `error` prop to toggle a visual error state, and pair it with a `helperText` message describing the error.
6665

6766
{{"demo": "ValidationTextFields.js"}}
6867

0 commit comments

Comments
 (0)