Unit Testing for Accessibility

[hjhart]

Hi all! At Brightline we are trying to become more and more accessible. We're building a lot of our front-end components using ViewComponent.

We have a good way of testing accessibility via capybara with be_axe_clean inside of feature specs.

e.g.

visit members_dashboard_path
expect(page).to be_axe_clean.according_to(*WCAG_TARGET)

This is all good and well, but it's an expensive test. We render the entire page, wait for it to load, then expect accessibility. Does anyone have any good approaches to a more unit-based approach to testing view components with accessibility?

[Spone]

Hi @hjhart, do you write previews for your components? If it's the case, you can use the previews URLs to run your accessibility tests. Your tests will run faster as only the single component you want to test is rendered.

I suspect you may also want to test the interaction between components rendered on the same page. For this case, what about creating a "static" view (ie. that doesn't load data from the DB) with the relevant components, and running your tests against it?

[hjhart]

That's a good point. We use storybook for viewing our components. We've been having some issues with it, typical javascripty stuff (e.g dependency hell... how to stub ActiveRecord-like objects). I'm wondering if previews are a simpler solution. I also like the idea of request specs hitting the preview controller and checking for accessibility..

I think what you proposed sounds like a great solution. Thanks!

[joelhawksley]

@hjhart what @Spone is suggesting here is what we're looking to do internally at GitHub as well. I wouldn't be surprised if we look at ways to bring some sort of tooling around testing previews into the framework. I'd love to hear about your experience with this approach!