a11y axe tests: Feature/51979

[anqaka]

#467 dev-51979

[vercel[bot]]

This pull request is automatically deployed with Now. To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://magento2-alpaca-components-git-feature-51979.snowdog1.now.sh

[anqaka]

I've implemented a11y automatic tests fro component. The results will be displayed in console. I have 2 concerns and idea to improve:

• using the npm lib installed with yarn instead of min js script loaded in preview. I'm didn't find an easy way to use npm package on template level
• different set of rule for global/elements/modules and views (some rules with concern whole page only, like heading one or
  landmark.

@szafran89 @Aekal please let me know what do you think.

[Aekal]

Can we remove old a11y tools/styles? I mean gulp a11y task from gulpfile.js, _a11y-tests.hbs, docs/styles/a11y-tests/_a11y-tests.scss and maybe somewhere else if they're not used anymore.

[Aekal]

• using the npm lib installed with yarn instead of min js script loaded in preview. I'm didn't find an easy way to use npm package on template level

I think we would need a webpack/gulp script loader from node_modules or some other solution to achive this, but maybe let's skip it for now

[Aekal]

• different set of rule for global/elements/modules and views (some rules with concern whole page only, like heading one or <main> landmark.

To set a custom rules for specific components we can use axe.configure (docs). I think we can split _preview.hbs to 4 files: _global.hbs, _element.hbs, _module.hbs, _view.hbs with different a11y-test.js script inside. Then in every component config.js file at the top we can add preview: '@element' to use that specific layout. So for button it'll be preview: '@element' with custom set of a11y rules. I didn't try to implement this but it should be possible to do it this way, let me know what do you think about this :)