Telefonica
feat(Storybook): add a11y addon
Issue: Link
This is not a perfect solution. I couldn't make the add-on work without forcing manual testing: it loads correctly when you open storybook, but as soon as you switch to a different story, the tests are not executed anymore. Because of this, I had to rely on JS in order to force tests to be executed in different scenarios:
- When skin/platform/colorScheme change using the other storybook addons
- When we press the "Accessibility" tab in the storybook panel. This was tricky, because it can be pressed in two different ways:
- If the panel is wide enough, the tab is a visible button in the UI.
- Otherwise, it may be a button inside a tooltip that is rendered outside the storybook panel (as a child of the HTML document).
Also, it seems that the feature of highlighting results is not working at all. I've tried another storybook and it doesn't work in there neither. Despite that, I've been reviewing this with @yceballost and he thinks that we can live with this.
Size stats
| master | this branch | diff | |
| Total JS | 10.7 MB | 10.7 MB | 0 B |
| JS without icons | 1.92 MB | 1.92 MB | 0 B |
| Lib overhead | 52.1 kB | 52.1 kB | 0 B |
| Lib overhead (gzip) | 14 kB | 14 kB | 0 B |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Accessibility report ✔️ No issues found
ℹ️ You can run this locally by executing yarn audit-accessibility.
Deploy preview for mistica-web ready!
✅ Preview https://mistica-7sn4rznqs-flows-projects-65bb050e.vercel.app
Built with commit 9c8ab07aa9463569a3e52ffd0b6d32d19ae575e1. This pull request is being automatically deployed with vercel-action
I'd like to discuss the function we need to cover with this addon.
- We already run automated a11y tests for all the stories using Axe. Isn't this addon redundant?
IMO, this addon helps to detect misuse in some brands for developers and designers from other teams.
For example, an inverse header in Movistar should not be used because the background colour does not contrast with inverse text, however, in Vivo this use is valid.
