source: frontend/node_modules/eslint-plugin-jsx-a11y/__tests__/src/rules/control-has-associated-label-test.js

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 2 weeks ago

Fix frontend appearance
  • Property mode set to 100644
File size: 13.8 KB
Line 
1/**
2 * @fileoverview Control elements must be associated with a text label
3 * @author jessebeach
4 */
5
6// -----------------------------------------------------------------------------
7// Requirements
8// -----------------------------------------------------------------------------
9
10import { RuleTester } from 'eslint';
11import { configs } from '../../../src/index';
12import parserOptionsMapper from '../../__util__/parserOptionsMapper';
13import parsers from '../../__util__/helpers/parsers';
14import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
15import rule from '../../../src/rules/control-has-associated-label';
16
17// -----------------------------------------------------------------------------
18// Tests
19// -----------------------------------------------------------------------------
20
21const ruleTester = new RuleTester();
22
23const ruleName = 'jsx-a11y/control-has-associated-label';
24
25const expectedError = {
26 message: 'A control must be associated with a text label.',
27 type: 'JSXOpeningElement',
28};
29
30const alwaysValid = [
31 // Custom Control Components
32 { code: '<CustomControl><span><span>Save</span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'] }] },
33 { code: '<CustomControl><span><span label="Save"></span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'], labelAttributes: ['label'] }] },
34 { code: '<CustomControl>Save</CustomControl>', settings: { 'jsx-a11y': { components: { CustomControl: 'button' } } } },
35 // Interactive Elements
36 { code: '<button>Save</button>' },
37 { code: '<button><span>Save</span></button>' },
38 { code: '<button><span><span>Save</span></span></button>', options: [{ depth: 3 }] },
39 { code: '<button><span><span><span><span><span><span><span><span>Save</span></span></span></span></span></span></span></span></button>', options: [{ depth: 9 }] },
40 { code: '<button><img alt="Save" /></button>' },
41 { code: '<button aria-label="Save" />' },
42 { code: '<button><span aria-label="Save" /></button>' },
43 { code: '<button aria-labelledby="js_1" />' },
44 { code: '<button><span aria-labelledby="js_1" /></button>' },
45 { code: '<button>{sureWhyNot}</button>' },
46 { code: '<button><span><span label="Save"></span></span></button>', options: [{ depth: 3, labelAttributes: ['label'] }] },
47 { code: '<a href="#">Save</a>' },
48 { code: '<area href="#">Save</area>' },
49 { code: '<link>Save</link>' },
50 { code: '<menuitem>Save</menuitem>' },
51 { code: '<option>Save</option>' },
52 { code: '<th>Save</th>' },
53 // Interactive Roles
54 { code: '<div role="button">Save</div>' },
55 { code: '<div role="checkbox">Save</div>' },
56 { code: '<div role="columnheader">Save</div>' },
57 { code: '<div role="combobox">Save</div>' },
58 { code: '<div role="gridcell">Save</div>' },
59 { code: '<div role="link">Save</div>' },
60 { code: '<div role="menuitem">Save</div>' },
61 { code: '<div role="menuitemcheckbox">Save</div>' },
62 { code: '<div role="menuitemradio">Save</div>' },
63 { code: '<div role="option">Save</div>' },
64 { code: '<div role="progressbar">Save</div>' },
65 { code: '<div role="radio">Save</div>' },
66 { code: '<div role="rowheader">Save</div>' },
67 { code: '<div role="searchbox">Save</div>' },
68 { code: '<div role="slider">Save</div>' },
69 { code: '<div role="spinbutton">Save</div>' },
70 { code: '<div role="switch">Save</div>' },
71 { code: '<div role="tab">Save</div>' },
72 { code: '<div role="textbox">Save</div>' },
73 { code: '<div role="treeitem">Save</div>' },
74 { code: '<div role="button" aria-label="Save" />' },
75 { code: '<div role="checkbox" aria-label="Save" />' },
76 { code: '<div role="columnheader" aria-label="Save" />' },
77 { code: '<div role="combobox" aria-label="Save" />' },
78 { code: '<div role="gridcell" aria-label="Save" />' },
79 { code: '<div role="link" aria-label="Save" />' },
80 { code: '<div role="menuitem" aria-label="Save" />' },
81 { code: '<div role="menuitemcheckbox" aria-label="Save" />' },
82 { code: '<div role="menuitemradio" aria-label="Save" />' },
83 { code: '<div role="option" aria-label="Save" />' },
84 { code: '<div role="progressbar" aria-label="Save" />' },
85 { code: '<div role="radio" aria-label="Save" />' },
86 { code: '<div role="rowheader" aria-label="Save" />' },
87 { code: '<div role="searchbox" aria-label="Save" />' },
88 { code: '<div role="slider" aria-label="Save" />' },
89 { code: '<div role="spinbutton" aria-label="Save" />' },
90 { code: '<div role="switch" aria-label="Save" />' },
91 { code: '<div role="tab" aria-label="Save" />' },
92 { code: '<div role="textbox" aria-label="Save" />' },
93 { code: '<div role="treeitem" aria-label="Save" />' },
94 { code: '<div role="button" aria-labelledby="js_1" />' },
95 { code: '<div role="checkbox" aria-labelledby="js_1" />' },
96 { code: '<div role="columnheader" aria-labelledby="js_1" />' },
97 { code: '<div role="combobox" aria-labelledby="js_1" />' },
98 { code: '<div role="gridcell" aria-labelledby="Save" />' },
99 { code: '<div role="link" aria-labelledby="js_1" />' },
100 { code: '<div role="menuitem" aria-labelledby="js_1" />' },
101 { code: '<div role="menuitemcheckbox" aria-labelledby="js_1" />' },
102 { code: '<div role="menuitemradio" aria-labelledby="js_1" />' },
103 { code: '<div role="option" aria-labelledby="js_1" />' },
104 { code: '<div role="progressbar" aria-labelledby="js_1" />' },
105 { code: '<div role="radio" aria-labelledby="js_1" />' },
106 { code: '<div role="rowheader" aria-labelledby="js_1" />' },
107 { code: '<div role="searchbox" aria-labelledby="js_1" />' },
108 { code: '<div role="slider" aria-labelledby="js_1" />' },
109 { code: '<div role="spinbutton" aria-labelledby="js_1" />' },
110 { code: '<div role="switch" aria-labelledby="js_1" />' },
111 { code: '<div role="tab" aria-labelledby="js_1" />' },
112 { code: '<div role="textbox" aria-labelledby="js_1" />' },
113 { code: '<div role="treeitem" aria-labelledby="js_1" />' },
114 // Non-interactive Elements
115 { code: '<abbr />' },
116 { code: '<article />' },
117 { code: '<blockquote />' },
118 { code: '<br />' },
119 { code: '<caption />' },
120 { code: '<dd />' },
121 { code: '<details />' },
122 { code: '<dfn />' },
123 { code: '<dialog />' },
124 { code: '<dir />' },
125 { code: '<dl />' },
126 { code: '<dt />' },
127 { code: '<fieldset />' },
128 { code: '<figcaption />' },
129 { code: '<figure />' },
130 { code: '<footer />' },
131 { code: '<form />' },
132 { code: '<frame />' },
133 { code: '<h1 />' },
134 { code: '<h2 />' },
135 { code: '<h3 />' },
136 { code: '<h4 />' },
137 { code: '<h5 />' },
138 { code: '<h6 />' },
139 { code: '<hr />' },
140 { code: '<iframe />' },
141 { code: '<img />' },
142 { code: '<label />' },
143 { code: '<legend />' },
144 { code: '<li />' },
145 { code: '<link />' },
146 { code: '<main />' },
147 { code: '<mark />' },
148 { code: '<marquee />' },
149 { code: '<menu />' },
150 { code: '<meter />' },
151 { code: '<nav />' },
152 { code: '<ol />' },
153 { code: '<p />' },
154 { code: '<pre />' },
155 { code: '<progress />' },
156 { code: '<ruby />' },
157 { code: '<section />' },
158 { code: '<table />' },
159 { code: '<tbody />' },
160 { code: '<tfoot />' },
161 { code: '<thead />' },
162 { code: '<time />' },
163 { code: '<ul />' },
164 // Non-interactive Roles
165 { code: '<div role="alert" />' },
166 { code: '<div role="alertdialog" />' },
167 { code: '<div role="application" />' },
168 { code: '<div role="article" />' },
169 { code: '<div role="banner" />' },
170 { code: '<div role="cell" />' },
171 { code: '<div role="complementary" />' },
172 { code: '<div role="contentinfo" />' },
173 { code: '<div role="definition" />' },
174 { code: '<div role="dialog" />' },
175 { code: '<div role="directory" />' },
176 { code: '<div role="document" />' },
177 { code: '<div role="feed" />' },
178 { code: '<div role="figure" />' },
179 { code: '<div role="form" />' },
180 { code: '<div role="group" />' },
181 { code: '<div role="heading" />' },
182 { code: '<div role="img" />' },
183 { code: '<div role="list" />' },
184 { code: '<div role="listitem" />' },
185 { code: '<div role="log" />' },
186 { code: '<div role="main" />' },
187 { code: '<div role="marquee" />' },
188 { code: '<div role="math" />' },
189 { code: '<div role="navigation" />' },
190 { code: '<div role="none" />' },
191 { code: '<div role="note" />' },
192 { code: '<div role="presentation" />' },
193 { code: '<div role="region" />' },
194 { code: '<div role="rowgroup" />' },
195 { code: '<div role="search" />' },
196 { code: '<div role="separator" />' },
197 { code: '<div role="status" />' },
198 { code: '<div role="table" />' },
199 { code: '<div role="tabpanel" />' },
200 { code: '<div role="term" />' },
201 { code: '<div role="timer" />' },
202 { code: '<div role="tooltip" />' },
203 // Via config
204 // Inputs. Ignore them because they might get a label from a wrapping label element.
205 { code: '<input />' },
206 { code: '<input type="button" />' },
207 { code: '<input type="checkbox" />' },
208 { code: '<input type="color" />' },
209 { code: '<input type="date" />' },
210 { code: '<input type="datetime" />' },
211 { code: '<input type="email" />' },
212 { code: '<input type="file" />' },
213 { code: '<input type="hidden" />' },
214 { code: '<input type="hidden" name="bot-field"/>' },
215 { code: '<input type="hidden" name="form-name" value="Contact Form"/>' },
216 { code: '<input type="image" />' },
217 { code: '<input type="month" />' },
218 { code: '<input type="number" />' },
219 { code: '<input type="password" />' },
220 { code: '<input type="radio" />' },
221 { code: '<input type="range" />' },
222 { code: '<input type="reset" />' },
223 { code: '<input type="search" />' },
224 { code: '<input type="submit" />' },
225 { code: '<input type="tel" />' },
226 { code: '<input type="text" />' },
227 { code: '<label>Foo <input type="text" /></label>' },
228 { code: '<input name={field.name} id="foo" type="text" value={field.value} disabled={isDisabled} onChange={changeText(field.onChange, field.name)} onBlur={field.onBlur} />' },
229 { code: '<input type="time" />' },
230 { code: '<input type="url" />' },
231 { code: '<input type="week" />' },
232 // Marginal interactive elements. It is difficult to insist that these
233 // elements contain a text label.
234 { code: '<audio />' },
235 { code: '<canvas />' },
236 { code: '<embed />' },
237 { code: '<textarea />' },
238 { code: '<tr />' },
239 { code: '<video />' },
240 // Interactive roles to ignore
241 { code: '<div role="grid" />' },
242 { code: '<div role="listbox" />' },
243 { code: '<div role="menu" />' },
244 { code: '<div role="menubar" />' },
245 { code: '<div role="radiogroup" />' },
246 { code: '<div role="row" />' },
247 { code: '<div role="tablist" />' },
248 { code: '<div role="toolbar" />' },
249 { code: '<div role="tree" />' },
250 { code: '<div role="treegrid" />' },
251];
252const neverValid = [
253 { code: '<button />', errors: [expectedError] },
254 { code: '<button><span /></button>', errors: [expectedError] },
255 { code: '<button><img /></button>', errors: [expectedError] },
256 { code: '<button><span title="This is not a real label" /></button>', errors: [expectedError] },
257 { code: '<button><span><span><span>Save</span></span></span></button>', options: [{ depth: 3 }], errors: [expectedError] },
258 { code: '<CustomControl><span><span></span></span></CustomControl>', options: [{ depth: 3, controlComponents: ['CustomControl'] }], errors: [expectedError] },
259 { code: '<CustomControl></CustomControl>', errors: [expectedError], settings: { 'jsx-a11y': { components: { CustomControl: 'button' } } } },
260 { code: '<a href="#" />', errors: [expectedError] },
261 { code: '<area href="#" />', errors: [expectedError] },
262 { code: '<menuitem />', errors: [expectedError] },
263 { code: '<option />', errors: [expectedError] },
264 { code: '<th />', errors: [expectedError] },
265 { code: '<td />', errors: [expectedError] },
266 // Interactive Roles
267 { code: '<div role="button" />', errors: [expectedError] },
268 { code: '<div role="checkbox" />', errors: [expectedError] },
269 { code: '<div role="columnheader" />', errors: [expectedError] },
270 { code: '<div role="combobox" />', errors: [expectedError] },
271 { code: '<div role="link" />', errors: [expectedError] },
272 { code: '<div role="gridcell" />', errors: [expectedError] },
273 { code: '<div role="menuitem" />', errors: [expectedError] },
274 { code: '<div role="menuitemcheckbox" />', errors: [expectedError] },
275 { code: '<div role="menuitemradio" />', errors: [expectedError] },
276 { code: '<div role="option" />', errors: [expectedError] },
277 { code: '<div role="progressbar" />', errors: [expectedError] },
278 { code: '<div role="radio" />', errors: [expectedError] },
279 { code: '<div role="rowheader" />', errors: [expectedError] },
280 { code: '<div role="scrollbar" />', errors: [expectedError] },
281 { code: '<div role="searchbox" />', errors: [expectedError] },
282 { code: '<div role="slider" />', errors: [expectedError] },
283 { code: '<div role="spinbutton" />', errors: [expectedError] },
284 { code: '<div role="switch" />', errors: [expectedError] },
285 { code: '<div role="tab" />', errors: [expectedError] },
286 { code: '<div role="textbox" />', errors: [expectedError] },
287];
288
289const recommendedOptions = (configs.recommended.rules[ruleName][1] || {});
290ruleTester.run(`${ruleName}:recommended`, rule, {
291 valid: parsers.all([].concat(
292 ...alwaysValid,
293 ))
294 .map(ruleOptionsMapperFactory(recommendedOptions))
295 .map(parserOptionsMapper),
296 invalid: parsers.all([].concat(
297 ...neverValid,
298 ))
299 .map(ruleOptionsMapperFactory(recommendedOptions))
300 .map(parserOptionsMapper),
301});
302
303const strictOptions = (configs.strict.rules[ruleName][1] || {});
304ruleTester.run(`${ruleName}:strict`, rule, {
305 valid: parsers.all([].concat(
306 ...alwaysValid,
307 ))
308 .map(ruleOptionsMapperFactory(strictOptions))
309 .map(parserOptionsMapper),
310 invalid: parsers.all([].concat(
311 ...neverValid,
312 ))
313 .map(ruleOptionsMapperFactory(strictOptions))
314 .map(parserOptionsMapper),
315});
316
317ruleTester.run(`${ruleName}:no-config`, rule, {
318 valid: parsers.all([].concat(
319 { code: '<input type="hidden" />' },
320 { code: '<input type="text" aria-hidden="true" />' },
321 ))
322 .map(parserOptionsMapper),
323 invalid: parsers.all([].concat(
324 { code: '<input type="text" />', errors: [expectedError] },
325 ))
326 .map(parserOptionsMapper),
327});
Note: See TracBrowser for help on using the repository browser.