Audit Component Accessibility Using Storybook

Instructor: [0:00] To install the Storybook add-on, we'll need to npm install or yarn add the npm package to our development dependencies. Then, to enable the add-on, we'll need to add it to our Storybook config in the main.js file within the .storybook directory. You'll just need to add it to this array of add-ons.

[0:26] Now, let's see the add-on in action in our Storybook. Here's a story I've written with an example form. We've got some form inputs and some buttons. Over here, in the add-ons panel, we now have a tab here for accessibility. We click on that and it's already run tests on this Story.

[0:48] We've got two violations here. We can expand them to learn more about them. Each violation will list what the test criteria was, how that test criteria was violated, and it'll list each element that violates the test criteria.

[1:07] For this one, we've just got this one button. Down here, we have an input and a text area that are violating this test. If you click to Highlight the Results, it'll highlight in the Story, the actual element that is violating the test. For each of the elements that violate the test, it lists more details about exactly how it was violated, and suggestions on how to fix.

[1:41] Finally, there are links to more info, which takes you to Deque University, and gives you a plethora of details about this issue.

[1:53] Let's fix these errors and come back and test again, and see what our results look like. We had two violations. If we refresh this, the tests are run again. We no longer have any violations.