Describe the bug
@storybook/addon-a11y not reporting a11y test results on next branch . It shows 0 passes and 0 violations on any story regardless of decorator being set or not.
To Reproduce
next branchofficial-storybook kitchen sink app or install/register add-on to any other app.a11y stories with decorator set.Accessibility panel.Expected behavior
Should display amount of test passes or violations respectively in each tab.
Screenshots

Code
It's related to the runA11yCheck function on the addon's declaration and the DOM being selected to run the aXe tests on:
const runA11yCheck = () => {
const channel = addons.getChannel();
const infoWrapper = document.getElementById('story-root').children;
const wrapper = document.getElementById('root');
axe.reset();
axe.configure(axeOptions);
axe
.run(infoWrapper || wrapper)
.then(results => channel.emit(CHECK_EVENT_ID, results), logger.error);
};
System:
Additional context
Tried this on some of the other kitchen sink apps with same result.
Are all your other storybook deps up to date?
Yes this is happening on a fresh clone of latest, 4.1.0-alpha.9.
Hi, I met the same issue. This is a reproduction repo: https://github.com/Bobgy/reproduction-storybook-a11y-bug
It's simply made from a new create-react-app and installing storybook@next
exact version I tested is ^4.1.0-alpha.11. it is still broken
The addon-a11y plugin also appears to be broken in the 4.1.1 release now - displaying 0 passes and 0 violations on all stories.
This is also an issue on the official Storybook example page
I'm guessing this is related to #4704 - Adding a <div id="root-story"> around all my stories, causes aXe to throw a selector warning, but it does run all the tests correctly afterwards. It still scrolls to the bottom of the page.
I'm not sure why the root-story is only added to the Info addon? Scrolling to the bottom of a story is a general issue, that's not just related to pages with the Info addon. The readme addon has the same issue, and in my project i have multiple stories that either render entire pages or components that just take up more than the screen.
index.js:19 Error: Expect axe._selectorData to be set up
at generateSelector (axe.js:3953)
at Object.createUniqueSelector [as getSelector] (axe.js:4009)
at DqElement.get selector [as selector] (axe.js:3400)
at axe.js:2393
at Array.map (<anonymous>)
at axe.js:2386
at Array.map (<anonymous>)
at axe.js:2383
at Array.forEach (<anonymous>)
at Object.push../node_modules/axe-core/axe.js.helpers.processAggregate (axe.js:2375)
The error is related to #3940 - but it doesn't solve the issue with the plugin not running.
@hipstersmoothie, does it work for you after the changes?
Having the same issue using Angular
Having the same issue with the following versions:
"react": "^16.7.0",
"react-dom": "^16.7.0"
"@storybook/addon-a11y": "^4.1.4",
"@storybook/react": "^4.1.4"
The accessibility tab always says 0 VIOLATIONS 0 PASSES
Yippee!! I just released https://github.com/storybooks/storybook/releases/tag/v4.2.0-alpha.10 containing PR #5101 that references this issue. Upgrade today to try it out!
Because it's a pre-release you can find it on the @next NPM tag.
Closing this issue. Please re-open if you think there's still more to do.
I'm still experiencing this issue based on the latest releases:
"react": "^16.7.0",
"react-dom": "^16.7.0",
"@storybook/addon-a11y": "^4.1.7",
"@storybook/addons": "^4.1.7",
"@storybook/react": "^4.1.7"
I'm using the example in the storybook a11y docs, and I'm getting 0 VIOLATIONS 0 PASSES for all stories, even when I copy/paste the example story in your setup docs.
*Edit: Ah, so this hasn't got merged in to the main release branch yet, is that right? At this point in time, that would make 4.1.7 unusable, wouldn't it?
Could we include that in 4.1.x release?
Most helpful comment
The
addon-a11yplugin also appears to be broken in the4.1.1release now - displaying0 passesand0 violationson all stories.