question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

addon-a11y not working with React in Storybook 4.1.11

See original GitHub issue

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.

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
shilmancommented, Feb 21, 2019

@afisher88 We’re targeting March 4 for the release

0reactions
praneybehlcommented, Feb 21, 2019

Thanks @shilman will do that.

Read more comments on GitHub >

github_iconTop Results From Across the Web

addon-a11y not working with React in Storybook 4.1.11 #5543
Describe the bug. The A11y extension always returns 0 errors 0 passes even when there are violations. To Reproduce
Read more >
Storybook-addon-a11y - Accessibility
Getting started​​ First, install the addon. Add this line to your main. js file (create this file inside your Storybook config directory if...
Read more >
Storybook not loaded with node version 18 - InVision Support
I am unable to load storybook in dsm with node version 18 and it's loading and working preview locally. there is no errors...
Read more >
Fail to load storybook everytime - Stack Overflow
Failed to load storybook, everytime,I run npm run storybook I have ever tried to clear the npm-cache as well, it didn't worked out....
Read more >
storybook/addon-a11y - npm.io
storybook -addon-a11y. This storybook addon can be helpfull to make your UI components more accessibile. npm.io. Getting started. First, install the addon.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found