Course Introduction

Introduction

Let's understand what this tool is all about.

What is Storybook? Better React UI Component Development

Storybook and Component Driven, Atomic Design in React

Let's learn about the installation process of Storybook.

How to Install Storybook and Add Stories to React Components

Let's learn about the very basics of Storybook stories

Intro to Storybook Component Story Format and args

Let's understand what Storybook decorators are and how to create them.

How to use Storybook Decorators to Style Components

Let's dive into the addons that come with the default Storybook template.

The 9 Best Storybook Addons to Build Better Story Workflows

Let's customize Storybook theme to match our brand!

How to Customize the Storybook React Theme for Your Brand

We have finished the first module! Let's discuss what we learned.

Wrapping up

Storybook - How it works

Now that you've learned the basics, it's time to start working on MealDrop, the main project of this course.

Section overview

We will be looking at the template project that we will use in this course.

Accessing the project

Breaking down our use-case

How to Write an Atomic Component in Storybook

Adding styled components support in Storybook.

How to Add Styled Component Themes to Storybook

Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.

Set Storybook Themes With Decorator Global Values and Parameters

How to Connect Storybook to Figma

How to Compose Components in Storybook

Finalizing the feature and integrating it into the app.

How to Integrate Storybook Components Into a React App

We have finished the second module! Let's discuss what we learned.

Starting the main project

It is time to learn how to deal with components that do fetch requests.

Using a container pattern to deal with complex components.

Fetch Data for Storybook Components With Container Pattern

Using conditional logic to deal with fetch requests.

Add Conditional Logic to Storybook Compontent Data Fetching

How to Mock Storybook Data Fetching Requests With MSW

Conclusion on data fetching strategies in Storybook.

Dealing with fetch requests

Let's learn how to work with page components on Storybook.

Let's add the page templates to Storybook.

Adding PageTemplate and Redux support to Storybook

Let's analyze the HomePage component and add it to Storybook.

How to add Complex Components to Storybook

Let's analyze the restaurant detail page component and add it to Storybook, including deeplinking and React portals support.

How to Add Deeplinking and React Portals to Storybook

How to Mock Storybook App Loading Scenarios With MSW

Adding Pages to Storybook

It is time to learn testing strategies in Storybook.

Let's add the official Storybook ESLint plugin

How to Install the Storybook ESLint plugin

Let's write some interaction tests directly in Storybook!

How to Use React Testing Library and Interactions in Storybook

Let's use the Storybook test runner to automate our tests!

How to Automate Storybook Testing With Test Runner

How to Run Accessibility Testing in Storybook With Addon-a11y

We have finished the fifth module! Let's discuss what we learned.

Storybook and testing

Using Chromatic for automatic Storybook deployment.

Deploy Storybook on Chromatic for Integrated Development

Using Chromatic and Storybook for visual regression testing.

Visual Regression Testing with Storybook and Chromatic

We have finished the sixth module! Let's discuss what we learned.

Deploying our Storybook

Conclusion and extra resources

Final thoughts

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

In this course, we will unleash the full potential of Storybook for React apps. We start from the basics of Storybook and later switch to a real world application, learning how to develop features directly in Storybook, saving lots of development time and at the same time, creating a living documentation of components and features.

You will learn how to break down features into atomic and composite components using [Component Driven Development](https://www.componentdriven.org/)

![Showing a component breakdown process](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.03/public/assets/component-breakdown.png)

You will see the power of addons, and how they help improve the development experience and the end quality of components. We will connect design tools, test accessibility, and much more.

![Figma connected to Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/figspec-view.png)

You will also learn how to mock fetch requests, add Redux, theming and routing support to Storybook, and add full pages to it. You're going to even add entire pages to Storybook, allowing you to simulate all use cases you want in isolation for easy access!

![Full page in Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_04/lesson_04.04/public/assets/modal-working.gif)

On top of that, you'll be using the latest features of Storybook such as interactions, combining the power of Storybook wrappers for Testing library and Jest that run in the browser to write stories with automated interactions!

![Storybook test runner](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.04/public/assets/click-to-debug.gif)

Finally, you'll be setting up Chromatic, a cloud based tool that improves your Storybook experience by bringing you Storybook hosting and visual regression tests, in a way that will help you catch regressions but also improve the collaboration between you and your colleagues while making pull requests.

![Chromatic dashboard](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/first-build.gif)

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages in your work.
You'll also learn how Storybook helps you collaborate with your colleagues, both technical and non-technical (like designers and stakeholders)!

This is a course which will show you how to unleash the full potential of Storybook in the context of React applications.

Storybook for React Apps

Unleash the full potential of Storybook, adding features and pages

Tools to improve designer-developer collaboration

) testing is a type of software testing to ensure that your application is usable by as many people as possible, including people with visual disabilities and other kinds of impairments. Often times, developers don't think about the accessibility of the components they are writing, which can result in, for instance, a payment form which is not accessible by screen readers, preventing blind users from buying products in your application!

Having accessible applications is also part of the law in many countries! This is therefore a very important topic and we should think about it always. I know sometimes it's difficult to remember it, but there are tools to help us! Let's go over a couple of them.

 is very famous in the Storybook community. It helps you develop more accessible components by running accessibility tests (based on 

) directly in Storybook, giving hints on what can be improved. This is a great exercise to improve our accessibility skills as well!

Let's add it to our project. We start by installing the addon:

// main.ts
export default {
  // ... rest of the code
  addons: [
    // ... other addons
    '@storybook/addon-a11y',
  ],
}

That's it, now the addon should be working. It's as simple as that! Now run Storybook, and you should see a new 

 tab in the addons panel. Here's how it looks when checking against the 

As you make changes to your components, even just by playing with the args, the accessibility tests will rerun and give you insights. As an exercise, let's remove the 

 file (you might need to refresh the browser after changing the file):

// src/components/RestaurantCard/RestaurantCard.tsx
// remove the "alt" property from it
<RestaurantImage $isClosed={isClosed} loading="lazy" src={photoUrl} alt="restaurant" /> 

The greatest fact about this addon is that it not only tells you there are issues but also educates you on how to fix them with helpful links from 

. In the end, you become a better developer!

---
title: How to Run Accessibility Testing in Storybook With Addon-a11y
slug: accessibility-testing
description: Accessibility testing with Storybook.
privateVideoUrl: https://fullstack.wistia.com/medias/6lyypaejug
isPublicLesson: false
---

## Accessibility testing

Accessibility (or **a11y** — **a** then 11 characters then **y**) testing is a type of software testing to ensure that your application is usable by as many people as possible, including people with visual disabilities and other kinds of impairments. Often times, developers don't think about the accessibility of the components they are writing, which can result in, for instance, a payment form which is not accessible by screen readers, preventing blind users from buying products in your application!

Having accessible applications is also part of the law in many countries! This is therefore a very important topic and we should think about it always. I know sometimes it's difficult to remember it, but there are tools to help us! Let's go over a couple of them.

## Addon-a11y

The [accessibility addon](https://storybook.js.org/addons/@storybook/addon-a11y) is very famous in the Storybook community. It helps you develop more accessible components by running accessibility tests (based on [axe](https://www.deque.com/axe/)) directly in Storybook, giving hints on what can be improved. This is a great exercise to improve our accessibility skills as well!

Let's add it to our project. We start by installing the addon:

```sh
yarn add -D @storybook/addon-a11y
```

And registering it in `.storybook/main.ts`:

```ts
// main.ts
export default {
  // ... rest of the code
  addons: [
    // ... other addons
    '@storybook/addon-a11y',
  ],
}
```

As it's a change in `main.ts`, we need to restart Storybook.

That's it, now the addon should be working. It's as simple as that! Now run Storybook, and you should see a new **Accessibility** tab in the addons panel. Here's how it looks when checking against the `RestaurantCard` component:

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.05/public/assets/a11y-panel.png)

As you make changes to your components, even just by playing with the args, the accessibility tests will rerun and give you insights. As an exercise, let's remove the `alt` property from the `RestaurantImage` component in the `RestaurantCard.tsx` file (you might need to refresh the browser after changing the file):

```tsx
// src/components/RestaurantCard/RestaurantCard.tsx
// remove the "alt" property from it
<RestaurantImage $isClosed={isClosed} loading="lazy" src={photoUrl} alt="restaurant" /> 
```

Yann Braga

Something we should always test in our applications is accessibility. Access

ibility testing is a type of software testing to ensure that your application is

usable by as many people as possible, including people with visual disabilities

Also known as A11Y, often times developers don't think about it when writing

their components, which can result in, for instance, a payment form which is

not accessible by screen readers, preventing blind users to buy products in

Building accessible applications is a social responsibility and is part of the

law in many countries, and there are many types of accessibility issues that

Here's a restaurant card. It looks nice and you can read information in it. Let

's change the color of the text to white.

The color contrast is so low that I'm pretty sure you're having a hard time

reading it. Can you imagine how worst this could feel for people with visual

Here's a form that tells which fields are required by using the red color. But

what about users that don't see color? We should use more indicators like an

Accessibility is a very important topic that we should always think about. I

know sometimes it's difficult to remember, but there are tools to help us get

Accessibility is the most used accessibility engine that helps detect a lot of

accessibility issues and helps educate you how to fix them. And in this lesson,

we'll learn how to integrate Axe into Storybook so we can always keep a close

eye in our components accessibility. Let's get to it.

When looking for integrations, we can always go to the official Storybook

website and go to the add-on gallery. In the popular section, we already see

accessibility, which is exactly what we're looking for.

Accessibility add-on allows you to integrate Axe into Storybook and get a

visual overview of the accessibility errors or passes in your stories. So let's

go ahead and edit to our project. We essentially need to install the add-on,

which is yarnaddsstorybook/addonA11Y as a dev dependency. So let's go to our

project, open a terminal, and if you have Storybook running, just kill it and

The next step is to register the dependency in the main file. So let's just

copy this right here and go to our main file under Storybook main.

And then in the add-on section, we just register the add-on A11Y. And that's it

. Now the add-on panel should be working. It's as simple as that. So we just

need to run Storybook and we should see a new accessibility panel. So let's run

So let's visit the restaurant card and look at the add-on panel. Over here, you

see that we now have a new tab called Accessibility. And as you can see here,

the component is good. It's got the accessibility checks, which are all passing

But as an experiment, let's make it fail. So let's go to the implementation of

the restaurant card under Source, Components, and then Restaurant Card.

And then at the bottom, you should see a restaurant image that contains an

alternative property. So let's just remove it. And when we're looking at the

accessibility panel, this should be rerunning, including the violation that we

have. And if it does not rerun, you can click on Test Completed. And that's

just going to rerun the accessibility tests. And over here, we see now we have

So once we expand this, and also we can click here to highlight the element,

which has the accessibility violation, we get the explanation of what is going

on together with the priority of the issues.

And not only that, we actually have a link that explains us further and educ

ates us exactly what is the issue and how to fix the problem.

So let's go back to our stories and fix the accessibility issue. And now we can

also rerun the accessibility here and see that everything is passing.

What's great about the accessibility add-on is that it provides you this new

option in the toolbar, which gives you different kinds of filters for different

So for instance, deuteronomally, it's a type of impairment where people don't

see specific colors. And the same goes for protonomally, or maybe even graysc

aling because people might not be able to see colors.

And another thing that we can do here is, for instance, we go to the restaurant

detail page and some users might be elder and have a blurred vision.

So this filter allows us to simulate that, and we should make sure that the

elements stand out and the applications still usable for them.

And this is a great tool to have in any storybook. Essentially, you can use

this for your own sake so you can develop more accessible components, but you

can also share all these kinds of functionalities with the designers in your

team so they can also get more education about it.

And you might be asking, "That is great, but I also don't want to manually

check every single accessibility issue for my components. That might be too

So how can we automate the checking for us? Well, in the previous lesson, we

learned about the test runner and we can use its experimental hooks in

combination with other tools to automate the accessibility testing of our

So the test runner allows us to have a new file which is called test-runner.js

And this configuration expects the module.exports to be returning an object

First of all, an asynchronous pre-render function that receives the playwright

page and we can do a lot of things with it, as well as an async/post-render

function which also has access to the playwright page.

And these are the hooks from the test runner. The pre-render will execute

before the component renders and the post-render will execute after the

And because we're using playwrights, there is an accessibility playwright

integration called "X Playwrights" that we can just install and use in our

So let's just go ahead and do it. So we essentially get this and we go to our

terminal, we kill storybook, and we do yarn add as a developer dependency "X

And then we can use this dependency over here. So let's just get it, we're

And then we can use two things, check accessibility as well as inject "X".