Controls and A11y testing

Storybook controls and Accessibility addon panel

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Build a Complete Company Design System course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Build a Complete Company Design System, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Build a Complete Company Design System

  • [00:00 - 00:16] So, before testing, as we've discussed, let's go to the bottom component. We have the disabled prop and we explicitly defined it in our type as we already have this in the rank-o-bonnet props for a button.

    [00:17 - 00:38] We want to explicitly define this if we want this to be able to be seen inside our store book control panel. And this is really nice in case we want to work with some specific styling for disabled buttons that we want to demonstrate to the developers that, hey, we have a disabled state and we want you to play with this and see how it looks like.

    [00:39 - 01:06] So, for the accessibility part, we've already installed this plugin and we can see this taking place here. So we have an inaccessible button and if we go back to our icon story, we can see that we have an inaccessible button and what actually makes this accessible and inaccessible is if we pass an area label or not.

    [01:07 - 01:27] And this is crucial because if we don't pass explicitly an area label in an icon component, we are not sure about what this icon button is representing. So here it's inaccessible, but here that we provide an area label, it's totally accessible and it's passing the accessibility test inside store book.

    [01:28 - 01:37] So that was it about accessibility inside store book and then we will move on with styling our components with JavaScript tokens and tail of the classes.