addon-a11y not working with React in Storybook 4.1.11
See original GitHub issueDescribe 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
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:
- Created 5 years ago
- Comments:17 (10 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@afisher88 We’re targeting March 4 for the release
Thanks @shilman will do that.