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)

• [x] Avatar #1397
• [x] ComboBox #1456
• [x] Tooltip
• [x] Button group #1404
• [x] Carousel #1626
• [x] Color picker #1618, #1621
• [x] DatePicker #1486 #1581
• [x] Header #1495
• [x] Side navigation #1496
• [x] Surface #1500
• [x] Table #1505
• [x] Tabs #1548
• [x] Tile #1493, #1631
• [x] Tree #1492
• [x] Button
  • [x] #1532
  • [x] #1533
• [x] Input: #1536
• [x] Input group #1482
• [x] Select #1479
• [x] Slider #1474
• [x] Textarea https://github.com/iTwin/iTwinUI/pull/1540
• [x] TransferList https://github.com/iTwin/iTwinUI/pull/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 https://github.com/iTwin/iTwinUI/pull/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.