source: frontend/node_modules/eslint-plugin-jsx-a11y/__tests__/src/rules/alt-text-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.1 KB
Line 
1/**
2 * @fileoverview Enforce all elements that require alternative text have it.
3 * @author Ethan Cohen
4 */
5
6// -----------------------------------------------------------------------------
7// Requirements
8// -----------------------------------------------------------------------------
9
10import { RuleTester } from 'eslint';
11import parserOptionsMapper from '../../__util__/parserOptionsMapper';
12import parsers from '../../__util__/helpers/parsers';
13import rule from '../../../src/rules/alt-text';
14
15// -----------------------------------------------------------------------------
16// Tests
17// -----------------------------------------------------------------------------
18
19const ruleTester = new RuleTester();
20
21const missingPropError = (type) => ({
22 message: `${type} elements must have an alt prop, either with meaningful text, or an empty string for decorative images.`,
23 type: 'JSXOpeningElement',
24});
25
26const altValueError = (type) => ({
27 message: `Invalid alt value for ${type}. \
28Use alt="" for presentational images.`,
29 type: 'JSXOpeningElement',
30});
31
32const ariaLabelValueError = {
33 message: 'The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images.',
34};
35const ariaLabelledbyValueError = {
36 message: 'The aria-labelledby attribute must have a value. The alt attribute is preferred over aria-labelledby for images.',
37};
38
39const preferAltError = () => ({
40 message: 'Prefer alt="" over a presentational role. First rule of aria is to not use aria if it can be achieved via native HTML.',
41 type: 'JSXOpeningElement',
42});
43
44const objectError = {
45 message: 'Embedded <object> elements must have alternative text by providing inner text, aria-label or aria-labelledby props.',
46};
47
48const areaError = {
49 message: 'Each area of an image map must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
50};
51
52const inputImageError = {
53 message: '<input> elements with type="image" must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.',
54};
55
56const componentsSettings = {
57 'jsx-a11y': {
58 polymorphicPropName: 'as',
59 components: {
60 Input: 'input',
61 },
62 },
63};
64
65const array = [{
66 img: ['Thumbnail', 'Image'],
67 object: ['Object'],
68 area: ['Area'],
69 'input[type="image"]': ['InputImage'],
70}];
71
72ruleTester.run('alt-text', rule, {
73 valid: parsers.all([].concat(
74 // DEFAULT ELEMENT 'img' TESTS
75 { code: '<img alt="foo" />;' },
76 { code: '<img alt={"foo"} />;' },
77 { code: '<img alt={alt} />;' },
78 { code: '<img ALT="foo" />;' },
79 { code: '<img ALT={`This is the ${alt} text`} />;' },
80 { code: '<img ALt="foo" />;' },
81 { code: '<img alt="foo" salt={undefined} />;' },
82 { code: '<img {...this.props} alt="foo" />' },
83 { code: '<a />' },
84 { code: '<div />' },
85 { code: '<img alt={function(e) {} } />' },
86 { code: '<div alt={function(e) {} } />' },
87 { code: '<img alt={() => void 0} />' },
88 { code: '<IMG />' },
89 { code: '<UX.Layout>test</UX.Layout>' },
90 { code: '<img alt={alt || "Alt text" } />' },
91 { code: '<img alt={photo.caption} />;' },
92 { code: '<img alt={bar()} />;' },
93 { code: '<img alt={foo.bar || ""} />' },
94 { code: '<img alt={bar() || ""} />' },
95 { code: '<img alt={foo.bar() || ""} />' },
96 { code: '<img alt="" />' },
97 { code: '<img alt={`${undefined}`} />' },
98 { code: '<img alt=" " />' },
99 { code: '<img alt="" role="presentation" />' },
100 { code: '<img alt="" role="none" />' },
101 { code: '<img alt="" role={`presentation`} />' },
102 { code: '<img alt="" role={"presentation"} />' },
103 { code: '<img alt="this is lit..." role="presentation" />' },
104 { code: '<img alt={error ? "not working": "working"} />' },
105 { code: '<img alt={undefined ? "working": "not working"} />' },
106 { code: '<img alt={plugin.name + " Logo"} />' },
107 { code: '<img aria-label="foo" />' },
108 { code: '<img aria-labelledby="id1" />' },
109
110 // DEFAULT <object> TESTS
111 { code: '<object aria-label="foo" />' },
112 { code: '<object aria-labelledby="id1" />' },
113 { code: '<object>Foo</object>' },
114 { code: '<object><p>This is descriptive!</p></object>' },
115 { code: '<Object />' },
116 { code: '<object title="An object" />' },
117
118 // DEFAULT <area> TESTS
119 { code: '<area aria-label="foo" />' },
120 { code: '<area aria-labelledby="id1" />' },
121 { code: '<area alt="" />' },
122 { code: '<area alt="This is descriptive!" />' },
123 { code: '<area alt={altText} />' },
124 { code: '<Area />' },
125
126 // DEFAULT <input type="image"> TESTS
127 { code: '<input />' },
128 { code: '<input type="foo" />' },
129 { code: '<input type="image" aria-label="foo" />' },
130 { code: '<input type="image" aria-labelledby="id1" />' },
131 { code: '<input type="image" alt="" />' },
132 { code: '<input type="image" alt="This is descriptive!" />' },
133 { code: '<input type="image" alt={altText} />' },
134 { code: '<InputImage />' },
135 { code: '<Input type="image" alt="" />', settings: componentsSettings },
136 { code: '<SomeComponent as="input" type="image" alt="" />', settings: componentsSettings },
137
138 // CUSTOM ELEMENT TESTS FOR ARRAY OPTION TESTS
139 { code: '<Thumbnail alt="foo" />;', options: array },
140 { code: '<Thumbnail alt={"foo"} />;', options: array },
141 { code: '<Thumbnail alt={alt} />;', options: array },
142 { code: '<Thumbnail ALT="foo" />;', options: array },
143 { code: '<Thumbnail ALT={`This is the ${alt} text`} />;', options: array },
144 { code: '<Thumbnail ALt="foo" />;', options: array },
145 { code: '<Thumbnail alt="foo" salt={undefined} />;', options: array },
146 { code: '<Thumbnail {...this.props} alt="foo" />', options: array },
147 { code: '<thumbnail />', options: array },
148 { code: '<Thumbnail alt={function(e) {} } />', options: array },
149 { code: '<div alt={function(e) {} } />', options: array },
150 { code: '<Thumbnail alt={() => void 0} />', options: array },
151 { code: '<THUMBNAIL />', options: array },
152 { code: '<Thumbnail alt={alt || "foo" } />', options: array },
153 { code: '<Image alt="foo" />;', options: array },
154 { code: '<Image alt={"foo"} />;', options: array },
155 { code: '<Image alt={alt} />;', options: array },
156 { code: '<Image ALT="foo" />;', options: array },
157 { code: '<Image ALT={`This is the ${alt} text`} />;', options: array },
158 { code: '<Image ALt="foo" />;', options: array },
159 { code: '<Image alt="foo" salt={undefined} />;', options: array },
160 { code: '<Image {...this.props} alt="foo" />', options: array },
161 { code: '<image />', options: array },
162 { code: '<Image alt={function(e) {} } />', options: array },
163 { code: '<div alt={function(e) {} } />', options: array },
164 { code: '<Image alt={() => void 0} />', options: array },
165 { code: '<IMAGE />', options: array },
166 { code: '<Image alt={alt || "foo" } />', options: array },
167 { code: '<Object aria-label="foo" />', options: array },
168 { code: '<Object aria-labelledby="id1" />', options: array },
169 { code: '<Object>Foo</Object>', options: array },
170 { code: '<Object><p>This is descriptive!</p></Object>', options: array },
171 { code: '<Object title="An object" />', options: array },
172 { code: '<Area aria-label="foo" />', options: array },
173 { code: '<Area aria-labelledby="id1" />', options: array },
174 { code: '<Area alt="" />', options: array },
175 { code: '<Area alt="This is descriptive!" />', options: array },
176 { code: '<Area alt={altText} />', options: array },
177 { code: '<InputImage aria-label="foo" />', options: array },
178 { code: '<InputImage aria-labelledby="id1" />', options: array },
179 { code: '<InputImage alt="" />', options: array },
180 { code: '<InputImage alt="This is descriptive!" />', options: array },
181 { code: '<InputImage alt={altText} />', options: array },
182 )).map(parserOptionsMapper),
183 invalid: parsers.all([].concat(
184 // DEFAULT ELEMENT 'img' TESTS
185 { code: '<img />;', errors: [missingPropError('img')] },
186 { code: '<img alt />;', errors: [altValueError('img')] },
187 { code: '<img alt={undefined} />;', errors: [altValueError('img')] },
188 { code: '<img src="xyz" />', errors: [missingPropError('img')] },
189 { code: '<img role />', errors: [missingPropError('img')] },
190 { code: '<img {...this.props} />', errors: [missingPropError('img')] },
191 { code: '<img alt={false || false} />', errors: [altValueError('img')] },
192 { code: '<img alt={undefined} role="presentation" />;', errors: [altValueError('img')] },
193 { code: '<img alt role="presentation" />;', errors: [altValueError('img')] },
194 { code: '<img role="presentation" />;', errors: [preferAltError()] },
195 { code: '<img role="none" />;', errors: [preferAltError()] },
196 { code: '<img aria-label={undefined} />', errors: [ariaLabelValueError] },
197 { code: '<img aria-labelledby={undefined} />', errors: [ariaLabelledbyValueError] },
198 { code: '<img aria-label="" />', errors: [ariaLabelValueError] },
199 { code: '<img aria-labelledby="" />', errors: [ariaLabelledbyValueError] },
200 { code: '<SomeComponent as="img" aria-label="" />', settings: componentsSettings, errors: [ariaLabelValueError] },
201
202 // DEFAULT ELEMENT 'object' TESTS
203 { code: '<object />', errors: [objectError] },
204 { code: '<object><div aria-hidden /></object>', errors: [objectError] },
205 { code: '<object title={undefined} />', errors: [objectError] },
206 { code: '<object aria-label="" />', errors: [objectError] },
207 { code: '<object aria-labelledby="" />', errors: [objectError] },
208 { code: '<object aria-label={undefined} />', errors: [objectError] },
209 { code: '<object aria-labelledby={undefined} />', errors: [objectError] },
210
211 // DEFAULT ELEMENT 'area' TESTS
212 { code: '<area />', errors: [areaError] },
213 { code: '<area alt />', errors: [areaError] },
214 { code: '<area alt={undefined} />', errors: [areaError] },
215 { code: '<area src="xyz" />', errors: [areaError] },
216 { code: '<area {...this.props} />', errors: [areaError] },
217 { code: '<area aria-label="" />', errors: [areaError] },
218 { code: '<area aria-label={undefined} />', errors: [areaError] },
219 { code: '<area aria-labelledby="" />', errors: [areaError] },
220 { code: '<area aria-labelledby={undefined} />', errors: [areaError] },
221
222 // DEFAULT ELEMENT 'input type="image"' TESTS
223 { code: '<input type="image" />', errors: [inputImageError] },
224 { code: '<input type="image" alt />', errors: [inputImageError] },
225 { code: '<input type="image" alt={undefined} />', errors: [inputImageError] },
226 { code: '<input type="image">Foo</input>', errors: [inputImageError] },
227 { code: '<input type="image" {...this.props} />', errors: [inputImageError] },
228 { code: '<input type="image" aria-label="" />', errors: [inputImageError] },
229 { code: '<input type="image" aria-label={undefined} />', errors: [inputImageError] },
230 { code: '<input type="image" aria-labelledby="" />', errors: [inputImageError] },
231 { code: '<input type="image" aria-labelledby={undefined} />', errors: [inputImageError] },
232
233 // CUSTOM ELEMENT TESTS FOR ARRAY OPTION TESTS
234 {
235 code: '<Thumbnail />;',
236 errors: [missingPropError('Thumbnail')],
237 options: array,
238 },
239 {
240 code: '<Thumbnail alt />;',
241 errors: [altValueError('Thumbnail')],
242 options: array,
243 },
244 {
245 code: '<Thumbnail alt={undefined} />;',
246 errors: [altValueError('Thumbnail')],
247 options: array,
248 },
249 {
250 code: '<Thumbnail src="xyz" />',
251 errors: [missingPropError('Thumbnail')],
252 options: array,
253 },
254 {
255 code: '<Thumbnail {...this.props} />',
256 errors: [missingPropError('Thumbnail')],
257 options: array,
258 },
259 { code: '<Image />;', errors: [missingPropError('Image')], options: array },
260 { code: '<Image alt />;', errors: [altValueError('Image')], options: array },
261 {
262 code: '<Image alt={undefined} />;',
263 errors: [altValueError('Image')],
264 options: array,
265 },
266 {
267 code: '<Image src="xyz" />',
268 errors: [missingPropError('Image')],
269 options: array,
270 },
271 {
272 code: '<Image {...this.props} />',
273 errors: [missingPropError('Image')],
274 options: array,
275 },
276 { code: '<Object />', errors: [objectError], options: array },
277 { code: '<Object><div aria-hidden /></Object>', errors: [objectError], options: array },
278 { code: '<Object title={undefined} />', errors: [objectError], options: array },
279 { code: '<Area />', errors: [areaError], options: array },
280 { code: '<Area alt />', errors: [areaError], options: array },
281 { code: '<Area alt={undefined} />', errors: [areaError], options: array },
282 { code: '<Area src="xyz" />', errors: [areaError], options: array },
283 { code: '<Area {...this.props} />', errors: [areaError], options: array },
284 { code: '<InputImage />', errors: [inputImageError], options: array },
285 { code: '<InputImage alt />', errors: [inputImageError], options: array },
286 { code: '<InputImage alt={undefined} />', errors: [inputImageError], options: array },
287 { code: '<InputImage>Foo</InputImage>', errors: [inputImageError], options: array },
288 { code: '<InputImage {...this.props} />', errors: [inputImageError], options: array },
289 { code: '<Input type="image" />', errors: [inputImageError], settings: componentsSettings },
290 )).map(parserOptionsMapper),
291});
Note: See TracBrowser for help on using the repository browser.