Build a Company Design System - Course Introduction

Which technologies we will be using in this course

Build a Company Design System - Course Overview

What are Design Systems and Why are They so Popular?

How to think of design systems and model them appropriately

Pace Layering and Atomic Design System Mental Models

How to convert a Figma file to requirements

How to Turn a Figma Design System Into Code

Introduction

Module 2 Introduction

How to structure a design system monorepo

How to Structure a Design System Monorepo

Using yarn workspace to create a monorepo

Using Yarn Workspaces to Create a Monorepo

How to Build a Dynamic Design System With TypeScript

Create ESLint and Prettier Configs for a Design System

Design System Monorepo

Module 3 Introduction

How to Work With and Structure Design Tokens

Transforming raw design tokens with Style Dictionary

A Guide to Transforming Design Tokens with Style Dictionary

Creating a Tailwind CSS preset with JavaScript design tokens

Creating Tailwind CSS Presets With Design Tokens

Using `tsc` to build the foundation package

Building the foundation

Foundation package

Module 4 Introduction

Setting up the react component library package

Setting Up A React Component Library for Design Systems

How to Write React Components for a Company Design System

React package

Module 5 Introduction

Developing the component library with Storybook

Setting Up Storybook for Company Design Systems

Using Storybook to document our component library

Creating Your First Stories in Storybook

Storybook controls and Accessibility addon panel

Controls and A11y testing

Storybook package

Module 6 Introduction

Styling React components with JavaScript design tokens

How to Style React Components With Design Tokens

Styling React components with Tailwind CSS preset

How to Use Tailwind CSS With JavaScript Design Tokens

Styling components

Module 7 Introduction

Using React Testing Lirary to test React components

React Testing Library - Install and Write Your First Test

Finding accessibility issues using AXE with Jest

Using jest-axe to Find Accessibility Issues in React Components

What is Visual Testing and How Does it Work?

Testing components

Module 8 Introduction

What are Changesets and How Do They Manage Versioning?

How to test & publish our packages from CI (Github Actions)

How to Setup a CI/CD Pipeline in GitHub Actions

CI, Changelogs and Publishing

Thank you 🙏

Summary

In this course, we will dive into the world of design systems. We will learn how they can help developers increase their productivity, create consistency across a company's products, and ultimately speed up the development process.

We will start by covering the fundamental concepts of design systems, then move on to the architecture of a monorepo codebase. We will set up shared configurations for TypeScript, ESLint, and Prettier, and create a foundation package for hosting and distributing design tokens and assets.

Next, we will create a React package with demo components that are styled using our design system's style tokens. We will also create a Storybook package and learn the best practices for developing and documenting components with TypeScript. We will focus on styling our components in two ways: using CSS-in-JS with styled-components and JavaScript design tokens, as well as Tailwind CSS classes.

Finally, we will learn how to create tests for our React components using React Testing Library and AXE, and manage releases using changesets and set up a CI pipeline with GitHub Actions.

This course aims to be a comprehensive guide, or a cookbook, to building a complete company design system from scratch. By the end of the course, you will have the knowledge and skills to create a practical and maintainable design system for any organization.

This course is a comprehensive guide to publishing your first component library and design assets using React, TypeScript, Storybook, Tailwind CSS, and Styled Dictionary. You’ll create a flexible, enterprise-grade design system library that your co-workers will actually enjoy.

Build a Complete Company Design System

Transform design tokens with Style Dictionary.

Manage an enterprise design system monorepo with Yarn workspaces.

How a simple monorepo works with Yarn workspaces

What design tokens are, and how to generate them with Styled-Dictionary

Automate testing for accessibility issues (Axe) and visual changes (Chromatic)

Develop and document our design system with Storybook

How to publish with Github Actions and Changesets

How to provide a Tailwind configuration for other teams

---
title: Using jest-axe to Find Accessibility Issues in React Components
description: Finding accessibility issues using AXE with Jest
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/832lh63oo9
---

import { ImageCaption } from "~/components/index.js";

## Why testing for accessibility?

Let's try and test our `IconButton` component.

Copy and paste the `Button.test.tsx` file from the previous lesson to a new `IconButton.test.tsx` file and modify some parts:

```tsx
import React from 'react';
import { IconButton } from '../src/IconButton';
import { render, fireEvent, screen } from '@testing-library/react';
import '@testing-library/jest-dom';

test('tests icon button render and click callback', async () => {
  const handleClick = jest.fn();
  render(
    <IconButton onClick={handleClick}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="1.5"
        stroke="currentColor"
        style={{ width: '1em', height: '1em' }}
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
        />
      </svg>
    </IconButton>
  );

  /**
   * Prefer querying by role to improve accessibility
   * https://testing-library.com/docs/dom-testing-library/api-accessibility/
   */
  fireEvent.click(screen.getByRole('button'));

  expect(handleClick).toHaveBeenCalledTimes(1);
});
```

If we run tests again we will notice that tests are passing, but if we navigate to Storybook, we can quickly see that the icon button is not accessible.

Costa Alexoglou

So we discussed about accessibility testing and more importantly automatic

accessibility testing but let's see how we can make it happen. Let's close

file and go to the react packouts and to the test folder creating new icon

button test.tsx and we can paste the following code inside. Again let's remove

the brackets and we are doing basically the same a mock function we pass this

a callback and we need to test if it's being called or not and as a

children we are providing an SVGI basically and let's again run our tests

and we can see that everything is passing so why it should not pass. The

thing is that if we remember from from the storebook add-on we can see that

this is not an accessible button we do not provide an area label and it should

not pass the test accessibility test but here for some reason it passes and and

this is expected because we don't test explicitly for accessibility and to do

this we will use a packouts called axe accessibility. This is a state of the

software you use for accessibility testing and there is a real nice

package called just axe which is basically providing some just maths

functions for your component testing so we will install this right now

and then we will refactor our test to use these packets so here we will import

from just axe axe and the function to have no violations and then we extend

the expect function to have this method and then we will go below here and

paste those two lines while grabbing the container

perfect so what we are doing here is that we render our component and we

grab the container we pass this to axe which is an asynchronous function and we

wait for the results and we expect the results to have no violation so we can

go again and run the tests and let's see what happens now we can see that we

are failing for the accessibility tests and why is that the test is giving us a

URL where we can visit basically to describe the reasons and it says that

the buttons must have a must have something of a text for screen readers

that people can read or listen to and if you can see the test we are failing to

do this we have the SVG children and then just an on-click function but

nothing else so that's what we are going to fix right now we can explicitly

defined an area label which is an icon button and then if we test again we can

see that the tests are now passing thus by providing an area label and this is

really nice to pinpoint accessibility issues in them in the development phase

rather than pushing them into production without even testing for

accessibility and that was it and let's go to the next lesson