Storybook: [addon-a11y] Error: Expect axe._selectorData to be set up

[vajkri]

Bug summary

After having installed a11y-addon, when running yarn storybook I get the following console error:

Error: Expect axe._selectorData to be set up
    at generateSelector (axe.js:2810)
    at Object.createUniqueSelector [as getSelector] (axe.js:2866)
    at DqElement.get selector [as selector] (axe.js:2265)
    at axe.js:1262
    at Array.map (<anonymous>)
    at axe.js:1255
    at Array.map (<anonymous>)
    at axe.js:1252
    at Array.forEach (<anonymous>)
    at Object.../../node_modules/axe-core/axe.js.helpers.processAggregate (axe.js:1244)

Everything looks normal on the front end and works as expected, even though the console error is there.

Steps to reproduce

1. Install a11y addon
2. Add import '@storybook/addon-a11y/register' to addons.js
3. Add addDecorator(checkA11y) to config.js
4. Run yarn storybook

I use Typescript, React and Styled components.

My config.js looks like this:

import React from 'react'
import { configure, addDecorator } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import generic from '../src/generic'
import elements from '../src/elements'
import styled from 'styled-components'
import { styles, globalStorybookStyles } from '../src/stories/styles'
import { checkA11y } from '@storybook/addon-a11y'

addDecorator(
    withInfo({
        inline: true,
    })
)

addDecorator(checkA11y)

addDecorator(story => {
    return <StyledDiv role="main">{story()}</StyledDiv>
})

const StyledDiv = styled.div`
    // Globals
    ${generic} ${elements}

    // Storybook globals
    ${globalStorybookStyles}

    // Container styles
    ${styles}
`

// Import all files ending in *.stories.tsx from src
function loadStories() {
    const req = require.context('../src', true, /^.*\.stories\.tsx$/)

    // Show these above the other sections
    require('../src/stories/introduction/gettingStarted.stories')
    require('../src/stories/behavior.stories')

    req.keys().forEach(filename => {
        req(filename)
    })
}

configure(loadStories, module)

Versions of Storybook and other stuff

"dependencies": {
    "@material-ui/core": "^1.3.1",
    "@storybook/addon-a11y": "4.0.0-alpha.14",
    "@storybook/addon-actions": "4.0.0-alpha.14",
    "@storybook/addon-info": "4.0.0-alpha.14",
    "@storybook/addon-links": "4.0.0-alpha.14",
    "@storybook/addon-notes": "4.0.0-alpha.14",
    "@storybook/addon-viewport": "4.0.0-alpha.14",
    "@storybook/addons": "4.0.0-alpha.14",
    "@storybook/react": "4.0.0-alpha.14",
    "@types/webpack-env": "^1.13.6",
    "cpx": "^1.5.0",
    "deepmerge": "^2.1.1",
    "enzyme-to-json": "^3.3.4",
    "gh-pages": "^1.2.0",
    "is-buffer": "^2.0.2",
    "jest-styled-components": "^5.0.1",
    "json-ts": "^1.6.4",
    "polished": "^1.9.2",
    "react": "^16.2.0",
    "react-docgen-typescript-loader": "^2.1.1",
    "react-dom": "^16.2.0",
    "react-remarkable": "^1.1.3",
    "require-context": "^1.1.0",
    "styled-components": "^3.3.0",
    "ts-loader": "^4.3.1",
    "tslint": "^5.9.1",
    "typescript": "^2.9.1",
    "webpack": "^4.11.1",
    "webpack-cli": "^2.1.3"
}

[ssylvia]

I have the same issues.

[ReDrUm]

Still occurring in 4.0.0-alpha.20.
The console warning triggers on mount of any Story page.

[ndelangen]

Can confirm:
https://storybooks-official.netlify.com/?selectedKind=Addons%7Ca11y&selectedStory=Default&full=0&addons=1&stories=1&panelRight=0&addonPanel=%40storybook%2Faddon-a11y%2Fpanel

[ndelangen]

Related:
https://github.com/dequelabs/axe-core/issues/1041

[ndelangen]

We likely need to do this as well:

I've come up with an approach that schedules aXe calls serially, so that the next call doesn't occur until it's certain the previous call has completed. Thanks again!

Would anyone here maybe want to open a PR for a fix?
@vajkri @ssylvia @ReDrUm

[LekoArts]

Any progress on this issue?

[ndelangen]

This issue is still open:
https://github.com/dequelabs/axe-core/issues/1041

[lawrenceforsytheiii]

I was experiencing the same issue, but was able to alleviate by registering addon-actions on top of addon-a11y.

My addons.js is as follows:

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

Obviously just a temporary fix for those keen to use addon-actions as well.

[pouyas-github]

@lawrenceforsytheiii It didn't fix it for me.

[NickToye]

I can also confirm this didn't fix it for me either.

[nickmccurdy]

I’m also having this issue

[ndelangen]

fixed in: #4086

[ndelangen]

Turns out I needed to fix 2 issues to solve this:

1. When editing stories, HMR kicks in and loads addons twice. Some addons have side-effects which could then be executed twice.

2. When running axe and navigating very fast, it could happen that storybook would run axe on 2 elements at the same time.

I fixed both issues. Will be part of 5.0.0

[ReDrUm]

Great news. Thanks @ndelangen!

[vajkri]

Great to hear! Thx @ndelangen 👏🏽

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!