@techsio/storybook-better-a11y 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/{visionSimulatorFilters.js → 100.js} +23 -1
  2. package/dist/{apcaChecker.js → 699.js} +253 -1
  3. package/dist/index.js +6 -5
  4. package/dist/manager.js +1540 -11
  5. package/dist/postinstall.js +1 -1
  6. package/dist/preview.js +1 -68
  7. package/dist/rslib-runtime.js +37 -0
  8. package/package.json +1 -1
  9. package/dist/AccessibilityRuleMaps.js +0 -532
  10. package/dist/a11yRunner.js +0 -105
  11. package/dist/a11yRunner.test.js +0 -21
  12. package/dist/a11yRunnerUtils.js +0 -30
  13. package/dist/a11yRunnerUtils.test.js +0 -61
  14. package/dist/apcaChecker.test.js +0 -124
  15. package/dist/axeRuleMappingHelper.js +0 -4
  16. package/dist/components/A11YPanel.js +0 -140
  17. package/dist/components/A11YPanel.stories.js +0 -198
  18. package/dist/components/A11YPanel.test.js +0 -110
  19. package/dist/components/A11yContext.js +0 -438
  20. package/dist/components/A11yContext.test.js +0 -277
  21. package/dist/components/Report/Details.js +0 -169
  22. package/dist/components/Report/Report.js +0 -106
  23. package/dist/components/Report/Report.stories.js +0 -86
  24. package/dist/components/Tabs.js +0 -54
  25. package/dist/components/TestDiscrepancyMessage.js +0 -55
  26. package/dist/components/TestDiscrepancyMessage.stories.js +0 -40
  27. package/dist/components/VisionSimulator.js +0 -83
  28. package/dist/components/VisionSimulator.stories.js +0 -56
  29. package/dist/constants.js +0 -25
  30. package/dist/manager.test.js +0 -86
  31. package/dist/params.js +0 -0
  32. package/dist/preview.test.js +0 -215
  33. package/dist/results.mock.js +0 -874
  34. package/dist/types.js +0 -6
  35. package/dist/utils.js +0 -21
  36. package/dist/withVisionSimulator.js +0 -41
package/dist/results.mock.js DELETED
@@ -1,874 +0,0 @@
1
- const results = {
2
- testEngine: {
3
- name: 'axe-core',
4
- version: '4.10.2'
5
- },
6
- testRunner: {
7
- name: 'axe'
8
- },
9
- testEnvironment: {
10
- userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36',
11
- windowWidth: 833,
12
- windowHeight: 1315,
13
- orientationAngle: 0,
14
- orientationType: 'landscape-primary'
15
- },
16
- timestamp: '2025-03-17T15:21:16.569Z',
17
- url: 'http://localhost:6006/iframe.html?viewMode=story&id=manager-sidebar-explorer--with-refs&args=&globals=',
18
- toolOptions: {
19
- reporter: 'v1'
20
- },
21
- passes: [
22
- {
23
- id: 'aria-allowed-attr',
24
- impact: 'critical',
25
- tags: [
26
- 'cat.aria',
27
- 'wcag2a',
28
- 'wcag412',
29
- 'EN-301-549',
30
- 'EN-9.4.1.2'
31
- ],
32
- description: "Ensure an element's role supports its ARIA attributes",
33
- help: 'Elements must only use supported ARIA attributes',
34
- helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI',
35
- nodes: [
36
- {
37
- any: [],
38
- all: [
39
- {
40
- id: 'aria-allowed-attr',
41
- data: null,
42
- relatedNodes: [],
43
- impact: 'critical',
44
- message: 'ARIA attributes are used correctly for the defined role',
45
- '_constructor-name_': 'CheckResult'
46
- }
47
- ],
48
- none: [
49
- {
50
- id: 'aria-unsupported-attr',
51
- data: null,
52
- relatedNodes: [],
53
- impact: 'critical',
54
- message: 'ARIA attribute is supported',
55
- '_constructor-name_': 'CheckResult'
56
- }
57
- ],
58
- impact: null,
59
- html: '<button tabindex="-1" id="group-1" aria-controls="group-1--child-b1" aria-expanded="false" class="css-154pbrb">',
60
- target: [
61
- '.css-ohbggj > .css-ld0a14[data-item-id="group-1"][data-nodetype="group"] > .css-154pbrb[aria-controls="group-1--child-b1"]'
62
- ]
63
- },
64
- {
65
- any: [],
66
- all: [
67
- {
68
- id: 'aria-allowed-attr',
69
- data: null,
70
- relatedNodes: [],
71
- impact: 'critical',
72
- message: 'ARIA attributes are used correctly for the defined role',
73
- '_constructor-name_': 'CheckResult'
74
- }
75
- ],
76
- none: [
77
- {
78
- id: 'aria-unsupported-attr',
79
- data: null,
80
- relatedNodes: [],
81
- impact: 'critical',
82
- message: 'ARIA attribute is supported',
83
- '_constructor-name_': 'CheckResult'
84
- }
85
- ],
86
- impact: null,
87
- html: '<button type="button" data-action="collapse-root" aria-expanded="true" class="css-h7e28b">',
88
- target: [
89
- '.css-ohbggj > .css-1ikkmhb.sidebar-subheading[data-item-id="root-1"] > .css-h7e28b[type="button"][data-action="collapse-root"]'
90
- ]
91
- },
92
- {
93
- any: [],
94
- all: [
95
- {
96
- id: 'aria-allowed-attr',
97
- data: null,
98
- relatedNodes: [],
99
- impact: 'critical',
100
- message: 'ARIA attributes are used correctly for the defined role',
101
- '_constructor-name_': 'CheckResult'
102
- }
103
- ],
104
- none: [
105
- {
106
- id: 'aria-unsupported-attr',
107
- data: null,
108
- relatedNodes: [],
109
- impact: 'critical',
110
- message: 'ARIA attribute is supported',
111
- '_constructor-name_': 'CheckResult'
112
- }
113
- ],
114
- impact: null,
115
- html: '<button class="sidebar-subheading-action css-18rvurk" aria-label="Collapse" data-action="expand-all" data-expanded="false">',
116
- target: [
117
- '.css-ohbggj > .css-1ikkmhb.sidebar-subheading[data-item-id="root-1"] > .sidebar-subheading-action.css-18rvurk[aria-label="Collapse"]'
118
- ]
119
- },
120
- {
121
- any: [],
122
- all: [
123
- {
124
- id: 'aria-allowed-attr',
125
- data: null,
126
- relatedNodes: [],
127
- impact: 'critical',
128
- message: 'ARIA attributes are used correctly for the defined role',
129
- '_constructor-name_': 'CheckResult'
130
- }
131
- ],
132
- none: [
133
- {
134
- id: 'aria-unsupported-attr',
135
- data: null,
136
- relatedNodes: [],
137
- impact: 'critical',
138
- message: 'ARIA attribute is supported',
139
- '_constructor-name_': 'CheckResult'
140
- }
141
- ],
142
- impact: null,
143
- html: '<button tabindex="-1" id="root-1-child-a1" aria-expanded="false" class="css-1vdojxu"><div class="css-99l9qv"><svg viewBox="0 0 14 14" width="12" height="12" type="component" class="css-1e3avu6"><use xlink:href="#icon--component"></use></svg></div>Child A1</button>',
144
- target: [
145
- '.css-ohbggj > .css-ld0a14[data-item-id="root-1-child-a1"][data-parent-id="root-1"] > .css-1vdojxu'
146
- ]
147
- }
148
- ]
149
- },
150
- {
151
- id: 'aria-conditional-attr',
152
- impact: null,
153
- tags: [
154
- 'cat.aria',
155
- 'wcag2a',
156
- 'wcag412',
157
- 'EN-301-549',
158
- 'EN-9.4.1.2'
159
- ],
160
- description: "Ensure ARIA attributes are used as described in the specification of the element's role",
161
- help: "ARIA attributes must be used as specified for the element's role",
162
- helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI',
163
- nodes: [
164
- {
165
- any: [],
166
- all: [
167
- {
168
- id: 'aria-conditional-attr',
169
- data: null,
170
- relatedNodes: [],
171
- impact: 'serious',
172
- message: 'ARIA attribute is allowed',
173
- '_constructor-name_': 'CheckResult'
174
- }
175
- ],
176
- none: [],
177
- impact: null,
178
- html: '<button tabindex="-1" id="group-1" aria-controls="group-1--child-b1" aria-expanded="false" class="css-154pbrb">',
179
- target: [
180
- '.css-ohbggj > .css-ld0a14[data-item-id="group-1"][data-nodetype="group"] > .css-154pbrb[aria-controls="group-1--child-b1"]'
181
- ]
182
- },
183
- {
184
- any: [],
185
- all: [
186
- {
187
- id: 'aria-conditional-attr',
188
- data: null,
189
- relatedNodes: [],
190
- impact: 'serious',
191
- message: 'ARIA attribute is allowed',
192
- '_constructor-name_': 'CheckResult'
193
- }
194
- ],
195
- none: [],
196
- impact: null,
197
- html: '<button type="button" data-action="collapse-root" aria-expanded="true" class="css-h7e28b">',
198
- target: [
199
- '.css-ohbggj > .css-1ikkmhb.sidebar-subheading[data-item-id="root-1"] > .css-h7e28b[type="button"][data-action="collapse-root"]'
200
- ]
201
- },
202
- {
203
- any: [],
204
- all: [
205
- {
206
- id: 'aria-conditional-attr',
207
- data: null,
208
- relatedNodes: [],
209
- impact: 'serious',
210
- message: 'ARIA attribute is allowed',
211
- '_constructor-name_': 'CheckResult'
212
- }
213
- ],
214
- none: [],
215
- impact: null,
216
- html: '<button class="sidebar-subheading-action css-18rvurk" aria-label="Collapse" data-action="expand-all" data-expanded="false">',
217
- target: [
218
- '.css-ohbggj > .css-1ikkmhb.sidebar-subheading[data-item-id="root-1"] > .sidebar-subheading-action.css-18rvurk[aria-label="Collapse"]'
219
- ]
220
- },
221
- {
222
- any: [],
223
- all: [
224
- {
225
- id: 'aria-conditional-attr',
226
- data: null,
227
- relatedNodes: [],
228
- impact: 'serious',
229
- message: 'ARIA attribute is allowed',
230
- '_constructor-name_': 'CheckResult'
231
- }
232
- ],
233
- none: [],
234
- impact: null,
235
- html: '<button tabindex="-1" id="root-1-child-a1" aria-expanded="false" class="css-1vdojxu"><div class="css-99l9qv"><svg viewBox="0 0 14 14" width="12" height="12" type="component" class="css-1e3avu6"><use xlink:href="#icon--component"></use></svg></div>Child A1</button>',
236
- target: [
237
- '.css-ohbggj > .css-ld0a14[data-item-id="root-1-child-a1"][data-parent-id="root-1"] > .css-1vdojxu'
238
- ]
239
- }
240
- ]
241
- },
242
- {
243
- id: 'aria-hidden-body',
244
- impact: null,
245
- tags: [
246
- 'cat.aria',
247
- 'wcag2a',
248
- 'wcag131',
249
- 'wcag412',
250
- 'EN-301-549',
251
- 'EN-9.1.3.1',
252
- 'EN-9.4.1.2'
253
- ],
254
- description: 'Ensure aria-hidden="true" is not present on the document body.',
255
- help: 'aria-hidden="true" must not be present on the document body',
256
- helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI',
257
- nodes: [
258
- {
259
- any: [
260
- {
261
- id: 'aria-hidden-body',
262
- data: null,
263
- relatedNodes: [],
264
- impact: 'critical',
265
- message: 'No aria-hidden attribute is present on document body',
266
- '_constructor-name_': 'CheckResult'
267
- }
268
- ],
269
- all: [],
270
- none: [],
271
- impact: null,
272
- html: '<body class="sb-main-fullscreen sb-show-main" style="background: rgb(255, 255, 255); color: rgb(46, 52, 56);">',
273
- target: [
274
- 'body'
275
- ]
276
- }
277
- ]
278
- },
279
- {
280
- id: 'aria-hidden-focus',
281
- impact: null,
282
- tags: [
283
- 'cat.name-role-value',
284
- 'wcag2a',
285
- 'wcag412',
286
- 'TTv5',
287
- 'TT6.a',
288
- 'EN-301-549',
289
- 'EN-9.4.1.2'
290
- ],
291
- description: 'Ensure aria-hidden elements are not focusable nor contain focusable elements',
292
- help: 'ARIA hidden element must not be focusable or contain focusable elements',
293
- helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI',
294
- nodes: [
295
- {
296
- any: [],
297
- all: [
298
- {
299
- id: 'focusable-modal-open',
300
- data: null,
301
- relatedNodes: [],
302
- impact: 'serious',
303
- message: 'No focusable elements while a modal is open',
304
- '_constructor-name_': 'CheckResult'
305
- },
306
- {
307
- id: 'focusable-disabled',
308
- data: null,
309
- relatedNodes: [],
310
- impact: 'serious',
311
- message: 'No focusable elements contained within element',
312
- '_constructor-name_': 'CheckResult'
313
- },
314
- {
315
- id: 'focusable-not-tabbable',
316
- data: null,
317
- relatedNodes: [],
318
- impact: 'serious',
319
- message: 'No focusable elements contained within element',
320
- '_constructor-name_': 'CheckResult'
321
- }
322
- ],
323
- none: [],
324
- impact: null,
325
- html: '<table aria-hidden="true" class="sb-argstableBlock">',
326
- target: [
327
- 'table'
328
- ]
329
- }
330
- ]
331
- }
332
- ],
333
- incomplete: [
334
- {
335
- id: 'aria-prohibited-attr',
336
- impact: 'serious',
337
- tags: [
338
- 'cat.aria',
339
- 'wcag2a',
340
- 'wcag412',
341
- 'EN-301-549',
342
- 'EN-9.4.1.2'
343
- ],
344
- description: "Ensure ARIA attributes are not prohibited for an element's role",
345
- help: 'Elements must only use permitted ARIA attributes',
346
- helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI',
347
- nodes: [
348
- {
349
- any: [],
350
- all: [],
351
- none: [
352
- {
353
- id: 'aria-prohibited-attr',
354
- data: {
355
- role: null,
356
- nodeName: 'div',
357
- messageKey: 'noRoleSingular',
358
- prohibited: [
359
- 'aria-label'
360
- ]
361
- },
362
- relatedNodes: [],
363
- impact: 'serious',
364
- message: 'aria-label attribute is not well supported on a div with no valid role attribute.',
365
- '_constructor-name_': 'CheckResult'
366
- }
367
- ],
368
- impact: 'serious',
369
- html: '<div aria-label="Hide Basic ref stories" aria-expanded="true" class="css-8kwxkl">',
370
- target: [
371
- '.css-8kwxkl[aria-label="Hide Basic ref stories"]'
372
- ],
373
- failureSummary: 'Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute.'
374
- },
375
- {
376
- any: [],
377
- all: [],
378
- none: [
379
- {
380
- id: 'aria-prohibited-attr',
381
- data: {
382
- role: null,
383
- nodeName: 'div',
384
- messageKey: 'noRoleSingular',
385
- prohibited: [
386
- 'aria-label'
387
- ]
388
- },
389
- relatedNodes: [],
390
- impact: 'serious',
391
- message: 'aria-label attribute is not well supported on a div with no valid role attribute.',
392
- '_constructor-name_': 'CheckResult'
393
- }
394
- ],
395
- impact: 'serious',
396
- html: '<div aria-label="Hide Not ready stories" aria-expanded="true" class="css-8kwxkl">',
397
- target: [
398
- '.css-8kwxkl[aria-label="Hide Not ready stories"]'
399
- ],
400
- failureSummary: 'Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute.'
401
- },
402
- {
403
- any: [],
404
- all: [],
405
- none: [
406
- {
407
- id: 'aria-prohibited-attr',
408
- data: {
409
- role: null,
410
- nodeName: 'div',
411
- messageKey: 'noRoleSingular',
412
- prohibited: [
413
- 'aria-label'
414
- ]
415
- },
416
- relatedNodes: [],
417
- impact: 'serious',
418
- message: 'aria-label attribute is not well supported on a div with no valid role attribute.',
419
- '_constructor-name_': 'CheckResult'
420
- }
421
- ],
422
- impact: 'serious',
423
- html: '<div aria-label="Hide Unknown ref stories" aria-expanded="true" class="css-8kwxkl">',
424
- target: [
425
- '.css-8kwxkl[aria-label="Hide Unknown ref stories"]'
426
- ],
427
- failureSummary: 'Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute.'
428
- },
429
- {
430
- any: [],
431
- all: [],
432
- none: [
433
- {
434
- id: 'aria-prohibited-attr',
435
- data: {
436
- role: null,
437
- nodeName: 'div',
438
- messageKey: 'noRoleSingular',
439
- prohibited: [
440
- 'aria-label'
441
- ]
442
- },
443
- relatedNodes: [],
444
- impact: 'serious',
445
- message: 'aria-label attribute is not well supported on a div with no valid role attribute.',
446
- '_constructor-name_': 'CheckResult'
447
- }
448
- ],
449
- impact: 'serious',
450
- html: '<div aria-label="Hide Lazy loaded ref stories" aria-expanded="true" class="css-8kwxkl">',
451
- target: [
452
- '.css-8kwxkl[aria-label="Hide Lazy loaded ref stories"]'
453
- ],
454
- failureSummary: 'Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute.'
455
- }
456
- ]
457
- },
458
- {
459
- id: 'duplicate-id-aria',
460
- impact: 'critical',
461
- tags: [
462
- 'cat.parsing',
463
- 'wcag2a',
464
- 'wcag412',
465
- 'EN-301-549',
466
- 'EN-9.4.1.2'
467
- ],
468
- description: 'Ensure every id attribute value used in ARIA and in labels is unique',
469
- help: 'IDs used in ARIA and labels must be unique',
470
- helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI',
471
- nodes: [
472
- {
473
- any: [
474
- {
475
- id: 'duplicate-id-aria',
476
- data: 'root-1-child-a1',
477
- relatedNodes: [
478
- {
479
- html: '<button tabindex="-1" id="root-1-child-a1" aria-expanded="false" class="css-1vdojxu"><div class="css-99l9qv"><svg viewBox="0 0 14 14" width="12" height="12" type="component" class="css-1e3avu6"><use xlink:href="#icon--component"></use></svg></div>Child A1</button>',
480
- target: [
481
- '.css-ohbggj > .css-qyeqia[data-item-id="root-1-child-a1"][data-parent-id="root-1"] > .css-1vdojxu'
482
- ]
483
- }
484
- ],
485
- impact: 'critical',
486
- message: 'Document has multiple elements referenced with ARIA with the same id attribute: root-1-child-a1',
487
- '_constructor-name_': 'CheckResult'
488
- }
489
- ],
490
- all: [],
491
- none: [],
492
- impact: 'critical',
493
- html: '<button tabindex="-1" id="root-1-child-a1" aria-expanded="false" class="css-1vdojxu"><div class="css-99l9qv"><svg viewBox="0 0 14 14" width="12" height="12" type="component" class="css-1e3avu6"><use xlink:href="#icon--component"></use></svg></div>Child A1</button>',
494
- target: [
495
- '.css-ohbggj > .css-ld0a14[data-item-id="root-1-child-a1"][data-parent-id="root-1"] > .css-1vdojxu'
496
- ],
497
- failureSummary: 'Fix any of the following:\n Document has multiple elements referenced with ARIA with the same id attribute: root-1-child-a1'
498
- },
499
- {
500
- any: [
501
- {
502
- id: 'duplicate-id-aria',
503
- data: 'root-1-child-a2--grandchild-a1-1',
504
- relatedNodes: [
505
- {
506
- html: '<a tabindex="-1" href="/iframe.html?path=/story/root-1-child-a2--grandchild-a1-1" id="root-1-child-a2--grandchild-a1-1" class="css-xwriep">',
507
- target: [
508
- '.css-1x6s7u8 > div > div[data-highlighted-ref-id="storybook_internal"] > .css-79elbk[data-title="storybook_internal"] > .css-ohbggj > div[data-selected="true"][data-parent-id="root-1-child-a2"][data-nodetype="story"] > .css-xwriep'
509
- ]
510
- }
511
- ],
512
- impact: 'critical',
513
- message: 'Document has multiple elements referenced with ARIA with the same id attribute: root-1-child-a2--grandchild-a1-1',
514
- '_constructor-name_': 'CheckResult'
515
- }
516
- ],
517
- all: [],
518
- none: [],
519
- impact: 'critical',
520
- html: '<a tabindex="-1" href="/iframe.html?path=/story/root-1-child-a2--grandchild-a1-1" id="root-1-child-a2--grandchild-a1-1" class="css-xwriep">',
521
- target: [
522
- '.css-ocnlra > div > div[data-highlighted-ref-id="storybook_internal"] > .css-79elbk[data-title="storybook_internal"] > .css-ohbggj > div[data-selected="true"][data-parent-id="root-1-child-a2"][data-nodetype="story"] > .css-xwriep'
523
- ],
524
- failureSummary: 'Fix any of the following:\n Document has multiple elements referenced with ARIA with the same id attribute: root-1-child-a2--grandchild-a1-1'
525
- }
526
- ]
527
- }
528
- ],
529
- violations: [
530
- {
531
- id: 'aria-allowed-attr',
532
- impact: 'critical',
533
- tags: [
534
- 'cat.aria',
535
- 'wcag2a',
536
- 'wcag412',
537
- 'EN-301-549',
538
- 'EN-9.4.1.2'
539
- ],
540
- description: "Ensure an element's role supports its ARIA attributes",
541
- help: 'Elements must only use supported ARIA attributes',
542
- helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI',
543
- nodes: [
544
- {
545
- any: [],
546
- all: [
547
- {
548
- id: 'aria-allowed-attr',
549
- data: [
550
- 'aria-expanded="true"'
551
- ],
552
- relatedNodes: [],
553
- impact: 'critical',
554
- message: 'ARIA attribute is not allowed: aria-expanded="true"',
555
- '_constructor-name_': 'CheckResult'
556
- }
557
- ],
558
- none: [],
559
- impact: 'critical',
560
- html: '<div aria-label="Hide Basic ref stories" aria-expanded="true" class="css-8kwxkl">',
561
- target: [
562
- '.css-8kwxkl[aria-label="Hide Basic ref stories"]'
563
- ],
564
- failureSummary: 'Fix all of the following:\n ARIA attribute is not allowed: aria-expanded="true"'
565
- },
566
- {
567
- any: [],
568
- all: [
569
- {
570
- id: 'aria-allowed-attr',
571
- data: [
572
- 'aria-expanded="true"'
573
- ],
574
- relatedNodes: [],
575
- impact: 'critical',
576
- message: 'ARIA attribute is not allowed: aria-expanded="true"',
577
- '_constructor-name_': 'CheckResult'
578
- }
579
- ],
580
- none: [],
581
- impact: 'critical',
582
- html: '<div aria-label="Hide Not ready stories" aria-expanded="true" class="css-8kwxkl">',
583
- target: [
584
- '.css-8kwxkl[aria-label="Hide Not ready stories"]'
585
- ],
586
- failureSummary: 'Fix all of the following:\n ARIA attribute is not allowed: aria-expanded="true"'
587
- },
588
- {
589
- any: [],
590
- all: [
591
- {
592
- id: 'aria-allowed-attr',
593
- data: [
594
- 'aria-expanded="true"'
595
- ],
596
- relatedNodes: [],
597
- impact: 'critical',
598
- message: 'ARIA attribute is not allowed: aria-expanded="true"',
599
- '_constructor-name_': 'CheckResult'
600
- }
601
- ],
602
- none: [],
603
- impact: 'critical',
604
- html: '<div aria-label="Hide Unknown ref stories" aria-expanded="true" class="css-8kwxkl">',
605
- target: [
606
- '.css-8kwxkl[aria-label="Hide Unknown ref stories"]'
607
- ],
608
- failureSummary: 'Fix all of the following:\n ARIA attribute is not allowed: aria-expanded="true"'
609
- },
610
- {
611
- any: [],
612
- all: [
613
- {
614
- id: 'aria-allowed-attr',
615
- data: [
616
- 'aria-expanded="true"'
617
- ],
618
- relatedNodes: [],
619
- impact: 'critical',
620
- message: 'ARIA attribute is not allowed: aria-expanded="true"',
621
- '_constructor-name_': 'CheckResult'
622
- }
623
- ],
624
- none: [],
625
- impact: 'critical',
626
- html: '<div aria-label="Hide Lazy loaded ref stories" aria-expanded="true" class="css-8kwxkl">',
627
- target: [
628
- '.css-8kwxkl[aria-label="Hide Lazy loaded ref stories"]'
629
- ],
630
- failureSummary: 'Fix all of the following:\n ARIA attribute is not allowed: aria-expanded="true"'
631
- }
632
- ]
633
- },
634
- {
635
- id: 'color-contrast',
636
- impact: 'serious',
637
- tags: [
638
- 'cat.color',
639
- 'wcag2aa',
640
- 'wcag143',
641
- 'TTv5',
642
- 'TT13.c',
643
- 'EN-301-549',
644
- 'EN-9.1.4.3',
645
- 'ACT'
646
- ],
647
- description: 'Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds',
648
- help: 'Elements must meet minimum color contrast ratio thresholds',
649
- helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI',
650
- nodes: [
651
- {
652
- any: [
653
- {
654
- id: 'color-contrast',
655
- data: {
656
- fgColor: '#ffffff',
657
- bgColor: '#029cfd',
658
- contrastRatio: 2.92,
659
- fontSize: '10.5pt (14px)',
660
- fontWeight: 'bold',
661
- messageKey: null,
662
- expectedContrastRatio: '4.5:1'
663
- },
664
- relatedNodes: [
665
- {
666
- html: '<div class="sidebar-item css-ld0a14" data-selected="true" data-ref-id="storybook_internal" data-item-id="root-1-child-a2--grandchild-a1-1" data-parent-id="root-1-child-a2" data-nodetype="story" data-highlightable="true">',
667
- target: [
668
- '.css-ocnlra > div > div[data-highlighted-ref-id="storybook_internal"] > .css-79elbk[data-title="storybook_internal"] > .css-ohbggj > div[data-selected="true"][data-parent-id="root-1-child-a2"][data-nodetype="story"]'
669
- ]
670
- }
671
- ],
672
- impact: 'serious',
673
- message: 'Element has insufficient color contrast of 2.92 (foreground color: #ffffff, background color: #029cfd, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1',
674
- '_constructor-name_': 'CheckResult'
675
- }
676
- ],
677
- all: [],
678
- none: [],
679
- impact: 'serious',
680
- html: '<a tabindex="-1" href="/iframe.html?path=/story/root-1-child-a2--grandchild-a1-1" id="root-1-child-a2--grandchild-a1-1" class="css-xwriep">',
681
- target: [
682
- '.css-ocnlra > div > div[data-highlighted-ref-id="storybook_internal"] > .css-79elbk[data-title="storybook_internal"] > .css-ohbggj > div[data-selected="true"][data-parent-id="root-1-child-a2"][data-nodetype="story"] > .css-xwriep'
683
- ],
684
- failureSummary: 'Fix any of the following:\n Element has insufficient color contrast of 2.92 (foreground color: #ffffff, background color: #029cfd, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1'
685
- },
686
- {
687
- any: [
688
- {
689
- id: 'color-contrast',
690
- data: {
691
- fgColor: '#798186',
692
- bgColor: '#1b1c1d',
693
- contrastRatio: 4.3,
694
- fontSize: '8.3pt (11px)',
695
- fontWeight: 'bold',
696
- messageKey: null,
697
- expectedContrastRatio: '4.5:1'
698
- },
699
- relatedNodes: [
700
- {
701
- html: '<div data-side="right" class="css-1x6s7u8">',
702
- target: [
703
- '.css-1x6s7u8'
704
- ]
705
- }
706
- ],
707
- impact: 'serious',
708
- message: 'Element has insufficient color contrast of 4.3 (foreground color: #798186, background color: #1b1c1d, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1',
709
- '_constructor-name_': 'CheckResult'
710
- }
711
- ],
712
- all: [],
713
- none: [],
714
- impact: 'serious',
715
- html: '<button type="button" data-action="collapse-root" aria-expanded="true" class="css-h7e28b">',
716
- target: [
717
- '.css-ohbggj > .css-170ite8.sidebar-subheading[data-item-id="root-1"] > .css-h7e28b[type="button"][data-action="collapse-root"]'
718
- ],
719
- failureSummary: 'Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #798186, background color: #1b1c1d, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1'
720
- },
721
- {
722
- any: [
723
- {
724
- id: 'color-contrast',
725
- data: {
726
- fgColor: '#ffffff',
727
- bgColor: '#029cfd',
728
- contrastRatio: 2.92,
729
- fontSize: '10.5pt (14px)',
730
- fontWeight: 'bold',
731
- messageKey: null,
732
- expectedContrastRatio: '4.5:1'
733
- },
734
- relatedNodes: [
735
- {
736
- html: '<div class="sidebar-item css-qyeqia" data-selected="true" data-ref-id="storybook_internal" data-item-id="root-1-child-a2--grandchild-a1-1" data-parent-id="root-1-child-a2" data-nodetype="story" data-highlightable="true">',
737
- target: [
738
- '.css-1x6s7u8 > div > div[data-highlighted-ref-id="storybook_internal"] > .css-79elbk[data-title="storybook_internal"] > .css-ohbggj > div[data-selected="true"][data-parent-id="root-1-child-a2"][data-nodetype="story"]'
739
- ]
740
- }
741
- ],
742
- impact: 'serious',
743
- message: 'Element has insufficient color contrast of 2.92 (foreground color: #ffffff, background color: #029cfd, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1',
744
- '_constructor-name_': 'CheckResult'
745
- }
746
- ],
747
- all: [],
748
- none: [],
749
- impact: 'serious',
750
- html: '<a tabindex="-1" href="/iframe.html?path=/story/root-1-child-a2--grandchild-a1-1" id="root-1-child-a2--grandchild-a1-1" class="css-xwriep">',
751
- target: [
752
- '.css-1x6s7u8 > div > div[data-highlighted-ref-id="storybook_internal"] > .css-79elbk[data-title="storybook_internal"] > .css-ohbggj > div[data-selected="true"][data-parent-id="root-1-child-a2"][data-nodetype="story"] > .css-xwriep'
753
- ],
754
- failureSummary: 'Fix any of the following:\n Element has insufficient color contrast of 2.92 (foreground color: #ffffff, background color: #029cfd, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1'
755
- },
756
- {
757
- any: [
758
- {
759
- id: 'color-contrast',
760
- data: {
761
- fgColor: '#798186',
762
- bgColor: '#1b1c1d',
763
- contrastRatio: 4.3,
764
- fontSize: '8.3pt (11px)',
765
- fontWeight: 'bold',
766
- messageKey: null,
767
- expectedContrastRatio: '4.5:1'
768
- },
769
- relatedNodes: [
770
- {
771
- html: '<div data-side="right" class="css-1x6s7u8">',
772
- target: [
773
- '.css-1x6s7u8'
774
- ]
775
- }
776
- ],
777
- impact: 'serious',
778
- message: 'Element has insufficient color contrast of 4.3 (foreground color: #798186, background color: #1b1c1d, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1',
779
- '_constructor-name_': 'CheckResult'
780
- }
781
- ],
782
- all: [],
783
- none: [],
784
- impact: 'serious',
785
- html: '<button type="button" data-action="collapse-root" aria-expanded="true" class="css-h7e28b">',
786
- target: [
787
- '.css-ohbggj > .css-170ite8.sidebar-subheading[data-item-id="root-3"] > .css-h7e28b[type="button"][data-action="collapse-root"]'
788
- ],
789
- failureSummary: 'Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #798186, background color: #1b1c1d, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1'
790
- }
791
- ]
792
- },
793
- {
794
- id: 'landmark-unique',
795
- impact: 'moderate',
796
- tags: [
797
- 'cat.semantics',
798
- 'best-practice'
799
- ],
800
- description: 'Ensure landmarks are unique',
801
- help: 'Landmarks should have a unique role or role/label/title (i.e. accessible name) combination',
802
- helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/landmark-unique?application=axeAPI',
803
- nodes: [
804
- {
805
- any: [
806
- {
807
- id: 'landmark-is-unique',
808
- data: {
809
- role: 'complementary',
810
- accessibleText: null
811
- },
812
- relatedNodes: [
813
- {
814
- html: '<aside class="css-1s0lzul"><div></div></aside>',
815
- target: [
816
- '.css-8kwxkl[aria-label="Hide Not ready stories"] > aside'
817
- ]
818
- },
819
- {
820
- html: '<aside class="css-1s0lzul"><div></div></aside>',
821
- target: [
822
- '.css-8kwxkl[aria-label="Hide Unknown ref stories"] > aside'
823
- ]
824
- },
825
- {
826
- html: '<aside class="css-1s0lzul"><div></div></aside>',
827
- target: [
828
- '.css-8kwxkl[aria-label="Hide Lazy loaded ref stories"] > aside'
829
- ]
830
- },
831
- {
832
- html: '<aside class="css-1s0lzul"><div></div></aside>',
833
- target: [
834
- '.css-9whvue[aria-label="Hide Basic ref stories"] > aside'
835
- ]
836
- },
837
- {
838
- html: '<aside class="css-1s0lzul"><div></div></aside>',
839
- target: [
840
- '.css-9whvue[aria-label="Hide Not ready stories"] > aside'
841
- ]
842
- },
843
- {
844
- html: '<aside class="css-1s0lzul"><div></div></aside>',
845
- target: [
846
- '.css-9whvue[aria-label="Hide Unknown ref stories"] > aside'
847
- ]
848
- },
849
- {
850
- html: '<aside class="css-1s0lzul"><div></div></aside>',
851
- target: [
852
- '.css-9whvue[aria-label="Hide Lazy loaded ref stories"] > aside'
853
- ]
854
- }
855
- ],
856
- impact: 'moderate',
857
- message: 'The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable',
858
- '_constructor-name_': 'CheckResult'
859
- }
860
- ],
861
- all: [],
862
- none: [],
863
- impact: 'moderate',
864
- html: '<aside class="css-1s0lzul"><div></div></aside>',
865
- target: [
866
- '.css-8kwxkl[aria-label="Hide Basic ref stories"] > aside'
867
- ],
868
- failureSummary: 'Fix any of the following:\n The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable'
869
- }
870
- ]
871
- }
872
- ]
873
- };
874
- export { results };