oruga
oruga copied to clipboard
oruga-ui
Feature: Enhance a11y
Description
- Add eslint-plugin-vuejs-accessibility
- Add "plugin:vuejs-accessibility/recommended" eslint rule.
- Update all components to fullfill the recommended a11y rules.
Why Oruga need this feature
Accessibility is a big topic and a component library should implement a11y support by default as good as they can.
I'm using Deque's axe for integration and e2e tests on a project that uses oruga (jest-axe for integration, axe via nightwatch for e2e). We recently bumped a few (edit: oruga) versions from 0.5.10 to 0.8.3. The change created several accessibility problems that jest-axe is catching, including:
- incorrect aria in the steps component
- incorrect aria in the switch component
- nested interactive controls in the switch component
Adding axe to the tests for this project in addition to the recommendations above could help prevent future breaking updates.
@mmazanec22 I have no experience with axe. Would you like to make a PR with an example of how to use it? However, you are always welcome to add some a11y improvements to the codebase :)
@mlmoravek I made an attempt with #846 and fixed an a11y issue in the steps component. If this looks like an ok approach, I'd be happy to continue with the other components that were flagged.
@mmazanec22 Since the axe setup is now merged, you are welcome to add more tests and suggest a11y improvements if you can :)