Testing accessibility for all components

[mayank99]

All components, especially the more complex ones, need to be tested for accessibility. The most basic form of this involves running automated tools (like axe) which could even be made of part of CI. A more useful form of this will involve testing with (at least) NVDA+Firefox/Chrome on Windows and VoiceOver+Safari on macOS, and also with Talkback+Android and VoiceOver+iOS where possible.

This issue can be used as a checklist to track the status of all components.

Status

Automated (using axe)

(already passing if not mentioned)

• Avatar Bring failing Avatar examples to a11y compliance #1397
• ComboBox Combobox a11y fix  #1456
• Tooltip
• Button group button group a11y compliance #1404
• Carousel fix carousel a11y #1626
• Color picker simplify ColorPalette for a11y #1618, add missing labels to ColorPicker #1621
• DatePicker DatePicker a11y fixes #1486 Ignoring a11y false positives violations related to li elements inside DatePicker with Time Component. #1581
• Header Header a11y fix #1495
• Side navigation SideNavigation a11y fix #1496
• Surface Surface a11y fix #1500
• Table Table a11y fix #1505
• Tabs Tabs: composition #1548
• Tile Fixed a11y violations for Tile examples #1493, add missing alt to Tile avatar example #1631
• Tree Fixed a11y violations for Tree examples #1492
• Button
  • add label to IconButton example #1532
  • add missing label in SplitButton #1533
• Input: add label to Input Button example #1536
• Input group Fixed a11y violations for InputGroup examples #1482
• Select Fixed a11y violations for Select examples #1479
• Slider Fixed a11y violations for Slider examples #1474
• Textarea added label to textareascroll example. #1540
• TransferList added label to TransferListMain example. #1541

Manual accessibility audit

Pending.

Automated screen-reader testing

Pending.

See guidepup.

[maliksenpai]

Currently I'm working on it. I'm doing this tests with this library, is it okay? https://github.com/nickcolley/jest-axe @mayank99

[mayank99]

I'm doing this tests with this library, is it okay? nickcolley/jest-axe

jest-axe is okay, but the problem is it runs in jsdom, so it won't be able to catch many of the issues such as color contrast. A better option would be to run aXe inside cypress/playwright or through storybook.

And of course that is only the first step. After that, we also need to do manual testing and document the results.

[maliksenpai]

So I will do it with jest-axe firstly, after that I will add more test with cypress.

jest-axe does not guarantee that what you build is accessible but still jest-axe is good. @mayank99

[mayank99]

cypress-axe was correctly set up in #1352.

Next steps:

1. fix reported violations in all examples; some might require component changes.
2. manually audit all examples and document+fix any found issues.