storybook: addon-a11y not working with React in Storybook 4.1.11

Describe the bug The A11y extension always returns 0 errors 0 passes even when there are violations

To Reproduce Steps to reproduce the behavior: https://github.com/afisher88/react-storybook-sandbox

This repository contains a component that should fail on colour contrast and a component that contains a button with no type or text.

Expected behavior A11y errors and passes should show in the A11y panel

Screenshots storybook

Code snippets package.json

  "devDependencies": {
    "@babel/core": "^7.0.1",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-a11y": "^4.1.11",
    "@storybook/addon-actions": "^4.1.11",
    "@storybook/addon-links": "^4.1.11",
    "@storybook/addons": "^4.1.11",
    "@storybook/react": "^4.1.11",
    "babel-loader": "^8.0.2",
    "css-loader": "^2.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.9.3",
    "path": "^0.12.7",
    "sass-loader": "^7.1.0",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0"
  }

addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-a11y/register';

config.js

import { configure, addDecorator } from '@storybook/react';
import { checkA11y } from '@storybook/addon-a11y';

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);

addDecorator(checkA11y);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

System:

  • OS: Windows10
  • Device: Desktop
  • Browser: Chrome
  • Framework: React
  • Addons: A11y
  • Version: 4.1.11

Additional context I am trying to use the global decorator, however I’ve tried the component decorator and have the same issue.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 17 (10 by maintainers)

Most upvoted comments

@afisher88 We’re targeting March 4 for the release