storybook: A11y error: The accessibility scan encountered an error. {}

Describe the bug I’ve followed this tutorial to add “storybook-addon-a11y” to my project. Now it shows “Accessibility” tab in the addons tabs. It works well for most of the stories, but it shows an error for some of them. This is the error:

The accessibility scan encountered an error.
{}

The error object is empty so I have no idea what’s the problem here. I’ve tried to add a console log in this file to see the error in the console, and the result was this: TypeError {}

To Reproduce I’ve added the a11y addon to my project and the error happened!

Expected behavior It should not throw an error for no reason, if something is going wrong, it should show a clear error.

Screenshots

System

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 12.18.3 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-a11y: ^6.0.22 => 6.0.22
    @storybook/addon-actions: ^6.0.20 => 6.0.20
    @storybook/addon-essentials: ^6.0.20 => 6.0.20
    @storybook/addon-links: ^6.0.20 => 6.0.20
    @storybook/html: ^6.0.20 => 6.0.20

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 24 (12 by maintainers)

Commits related to this issue

fix(#12622): addon-a11y import with vite — committed to storybookjs/storybook by jsomsanith 2 years ago
Addon-a11y: fix axe-core import syntax for vite (#17997) Issue: #12622 `Axe-core` exposes a commonjs module equivalent to ```javascript const axe = {}; // a bunch of code adding functions in a... — committed to storybookjs/storybook by IanVS 2 years ago

Most upvoted comments

FYI for anyone else who ends up here, I was receiving this on Storybook 7.0.0-alpha.40 for svelte-vite, because a default install of this plugin goes to 6.5.x. Matching the versions made it go away.

-"@storybook/addon-a11y": "^6.5.13",
+"@storybook/addon-a11y": "^7.0.0-alpha.40",
"@storybook/addon-essentials": "^7.0.0-alpha.40",
"@storybook/addon-interactions": "^7.0.0-alpha.40",

taitems on Oct 28, 2022

Hey @Stunext thank you for your a11y-bug repo. I don’t know vite, but from what Ii see is that webpack and vite don’t seem to bundle the axe-core commonJS the same way. In the a11y runner, we first dynamic-import axe-core, then call axe.run on the root element of the story.

webpack: import(‘axe-core’) ends up with a module containing { default: { run, reset, ...}, run, reset, ...}
vite: import(‘axe-core’) ends up with a module containing { default: { run, reset, ...}}

The code in axe-core is something like

const axe = {};
// a bunch of code adding functions in axe object

module.exports = axe;

With both bundlers we have the default in the dynamic import module containing all the functions, but with webpack, we also have access to the functions directly. This makes sense as, in theory, we can statically import default containing all the functions, of destructure it to import the named functions. Don’t know why vite ends up with only the default export.

But I’ll provide a fix to be compatible with both, as both have access to the module default.

jsomsanith on Apr 18, 2022

@taitems note that you can also use npx sb@next add @storybook/addon-a11y to install an addon, which will use the right version, and will add it to your .storybook/main.js for you.

IanVS on Oct 28, 2022

@joshrobertsv2 it was first included in v6.5.0-beta.0. If you’re having an issue after that version, feel free to open an issue on the vite-builder repo, ideally with a reproduction, and we can take a look.

IanVS on May 27, 2022

With Vite builder:

Didn’t work on 6.4.18 with old repository “storybook-builder-vite” (Build error)

It worked with the update to “@storybook/builder-vite” and version 6.4.19

Again it stopped working with version 6.4.20 and higher. No compilation errors; but it shows the aforementioned error:

The accessibility scan encountered an error. {}

@jsomsanith https://github.com/Stunext/a11y-bug

Stunext on Apr 18, 2022

@weo3dev you can continue to use it, but once 7.0 becomes “stable”, then @next will start to refer to 8.0 alpha versions. This is an npm tag, and you can see what version it corresponds to here: https://www.npmjs.com/package/storybook?activeTab=versions

IanVS on Mar 20, 2023

@IanVS I’m aware of this, and this is something that I’m going to bring over to the team (Storybook & DX) so that we provide a good experience for it. As most addons snippets mention only the package managers (e.g., yarn, npm, pnpm) and we probably should start pushing more into using the add command the way to go and potentially avoid similar situations. Thanks for putting this on my radar 🙏

jonniebigodes on Mar 20, 2023