Controls and A11y testing
Storybook controls and Accessibility addon panel
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.
Get unlimited access to Build a Complete Company Design System, plus 80+ \newline books, guides and courses with the \newline Pro subscription.
[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.