Skip to content

Using Storybook

Tiffany Forkner edited this page Sep 12, 2025 · 5 revisions

Storybook can be used for more than just accessibility tests. It is also a convenient way to develop new front end features in isolation without having to navigate through the application over and over.

Table of Contents

Running Tests

To run the tests in the Storybook UI, click on the Run tests button.

Click the Run tests button tests running

The test results will show up in the testing panel.

test results

See Accessibility Tests for more information about enabling Accessibility tests

Handling Accessibility Errors

If there is an accessibility error, it will show up in the testing panel and the story list panel.

accessibility error

Open the failing story and then click the Accessibility tab in the Add-on panel.

accessibility panel

Click on the error to see more details. Click on the Jump to element button and the failing element will have a pulsing highlight.

accessibility error details

This should give you the information that you need to resolve the issue. Once you save, it will re-render the story and if the issue is resolved, it will show 0 Violations in the Accessibility tab of the Add-on panel. The results in the story and testing panel won't clear until you run the tests again.

violations resolved after rerunning tests

Clone this wiki locally