Storybook: addon-a11y not working on latest next

Created on 29 Nov 2018  路  11Comments  路  Source: storybookjs/storybook

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

  1. Checkout next branch
  2. Start the official-storybook kitchen sink app or install/register add-on to any other app.
  3. Open any of the a11y stories with decorator set.
  4. Go to Accessibility panel.
  5. See 0 results on both passes/violations.

Expected behavior
Should display amount of test passes or violations respectively in each tab.

Screenshots
screen shot 2018-11-29 at 10 19 17 am

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:

  • Browser: any
  • Framework: all
  • Addons: a11y
  • Version: 4.0.9

Additional context
Tried this on some of the other kitchen sink apps with same result.

a11y bug question / support

Most helpful comment

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.

All 11 comments

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?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zvictor picture zvictor  路  3Comments

purplecones picture purplecones  路  3Comments

ZigGreen picture ZigGreen  路  3Comments

miljan-aleksic picture miljan-aleksic  路  3Comments

wahengchang picture wahengchang  路  3Comments