A11y testing - Githubissues

histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite

https://histoire.dev

MIT License

3.15k stars 184 forks source link

A11y testing #85

Open Akryum opened 2 years ago

Akryum commented 2 years ago

We could leverage axe to get accessibility testing for stories.

alvarosabu commented 2 years ago

Hi, something similar to this addon https://storybook.js.org/addons/@storybook/addon-a11y?

I think it could be a really nice feature

alvarosabu commented 2 years ago

@Akryum I will like to take this one, since I need it for my product.

Any wish list?

Akryum commented 2 years ago

We can probably take inspiration from the ally one. Maybe a good first step would be to do some discovery about the things we might need to add to the Plugin API.

alvarosabu commented 2 years ago

@Akryum Is it possible to create a new tab through the Plugin API? Also how to add the UI inside the tab (for example a list of the accessibility violations and links)

Akryum commented 2 years ago

That's thing that we would need to add to the Plugin API. Do you confirm you need the following for now?

[x] Add a new tab
[x] Render a component in it using the bundled Vue (integrate with the UI).

alvarosabu commented 2 years ago

Yes, I think those two points will set the bases for plugins that need UI.

I wonder how we could access the current story document from the API ? With api.onPreviewStory?

I need to investigate if axe only works with a selector or if you can actually pass HTML, not sure

Akryum commented 2 years ago

https://github.com/histoire-dev/histoire/discussions/240

binaryfire commented 1 year ago

This would be great. The lack of accessibility testing is the only thing stopping us migrating from Storybook to Histoire