Extend Storybook's Capabilities with Addons

[00:00] Storybook and all of its default features are just the beginning. On the Storybook website, you'll find tons of integrations built by the community and Storybook team. Most popular by a landslide is the accessibility add on and for good reason. It's awesome. Let's install it so I can show you how to extend [00:19] Storybook. First things first, we need to kill our Storybook server and add the package to our package JSON. This command is using npm so I wanna adapt it to use yarn. Yarn add dev. Once it's installed open the dot storybook mainjs [00:40] module. This module holds all of the config for our storybook. This add ons array registers all of the add ons that we're using here and we can add new add ons of our own. So let's register the at storybook add on Ali add on. Save that and restart our dev [01:00] server. With that, let's see what we got. Click the shortcut cog and open the show add ons panel. Refresh if you don't see any changes and see that we now have an accessibility add on. With just one line of config, we actually get a lot for free. So let's see what's going on here. This [01:20] add on has 3 tabs of its own showing identified issues. So inline text spacing must be adjusted with custom styles. This one is passing along with these other 2, but we do have one violation. Elements must meet minimum color contrast, and this one doesn't. If we want, we can focus these results showing where the offending [01:40] element is. This becomes really handy for multi element components or pages, saving you a lot of time digging around to find the element that's problematic. The beauty of having these inside of Storybook is that anyone on your team can contribute to ensuring that your components are inclusive and accessible to all users without [02:00] having to maintain a specific dev tools environment of their own.