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

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"
}

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 11
  • Comments: 17 (6 by maintainers)

Most upvoted comments

I have the same issues.

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

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

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