Feature: Enhance a11y - Githubissues

oruga-ui / oruga

🐛 Oruga is a lightweight library of UI components without any CSS framework dependency

https://oruga-ui.com

MIT License

1.12k stars 169 forks source link

Feature: Enhance a11y #596

Open mlmoravek opened 1 year ago

mlmoravek commented 1 year ago

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.

mmazanec22 commented 7 months ago

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.

mlmoravek commented 7 months ago

@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 :)

mmazanec22 commented 7 months ago

@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.

mlmoravek commented 5 months ago

@mmazanec22 Since the axe setup is now merged, you are welcome to add more tests and suggest a11y improvements if you can :)