Automatic a11y testing with axe Slack time results Niklas

2 Why automatic tests? … instead of linting or manual integration testing? ● catch bugs earlier (they promise ~30 - 57 %) ● test on rendered HTML ● test against WCAG 2.0 and 2.1 on level A and AA ● Note: this not replaces testing the interface with the assistive technologies that real users use

3 Why axe? https://github.com/dequelabs/axe-core#about-axe---our-manifesto ● open source ● works on all modern browsers and with whatever tools, frameworks, libraries and environments you use today ● integrates with your existing functional/acceptance automated tests ● automatically determines which rules to run based on the evaluation context ● highly configurable

4 Why axe? https://github.com/dequelabs/axe-core#about-axe---our-manifesto ● fits nicely into our existing testing infrastructures ○ React with enzyme ○ React with react testing library ● did not tested it yet with chai-only setups

5 A - Unit test style https://github.com/bpmn-io/properties-panel/tree/a11y-tests

6 A - Unit test style https://github.com/bpmn-io/properties-panel/tree/a11y-tests ● one incomplete found: form-field-multiple-labels (toggle switch) Using the best-practice rules, cf. Design docs

7 A - Unit test style

8 B - Integration test style https://github.com/bpmn-io/bpmn-js-properties-panel/tree/a11y-tests ● one violation found: duplicate-id-aria (multiple panels) ● one incomplete found: color-contrast Using the best-practice rules, cf. Design docs

9 B - Integration test style

10 B - Integration test style https://github.com/camunda/camunda-modeler/tree/a11y-tests ● one violation found: region (tab bar) Using the best-practice rules, cf. Design docs

11 Summary and learnings integration tests ● scenario needs to be bootstrapped properly ● cf. our screenshots project (spectron) ● check more rules as the tested DOM is bigger unit test styles ● repeat easily with less lines of code ● good practice when creating reusable components ● amount of tested rules is not that high

12 Find results here https://github.com/bpmn-io/properties-panel/tree/a11y-tests https://github.com/bpmn-io/bpmn-js-properties-panel/tree/a11y-tests https://github.com/camunda/camunda-modeler/tree/a11y-tests Follow up: ● decide to to bring these tests into our projects, and / or ● evaluate the list of broken rules

Thank you!