Measurable accessibility and quality workflow

[soykje]

Hi everyone! 👋

As Spark is trying to provide a strong Design System with accessibility "out of the box", we also want to install a strong and reliable workflow to develop & test our components, on an accessibility basis specifically.

Tools

There are a few tools we should agree to use, I guess:

• aXe Chrome extension
• Lighthouse Chrome extension
• aXe React package which replaces the deprecated React a11y one.
• aXe StoryBook extension which is also documented here.

Documentation

A documented guideline may also be helpful in our SB (just as the one from Radix). We could write about our tooling and our quality workflow (tests, CI, ...), and how each contributor could be part of it 👍

CI

I think we also should try to define the accessibility level we want to be compliant with (WCAG A, AA, AAA...), and maybe setup a CI check task that could help us improve our work on accessible features?

[soykje]

@andresin87 suggested https://playwright.dev/docs/accessibility-testing... Maybe we should also have a look 👍

[soykje]

@Powerplex just proposed to add the StoryBook a11y from Axe plugin. We may after be able to add some a11y checks to CI. 💪

[soykje]

After this addition, we worked on a11y check on CI: #878

[soykje]

Should we add a dedicated section at the root of SB/Zeroheight? Would be about explaining our a11y interest and concerns, the WCAG level we took as reference, and few other things... cc @Powerplex @turolopezsanabria