storybook/addon-a11y not working with Ember

[transitorytammy]

Describe the bug After including storybook/addon-a11y, and putting in an element that should return an error (ie. a red button with red text), I get no errors.

A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to index.js and add the following code `` storiesOf("buttons", module) .add("html button", () => { return { template: hbsInaccessible button`, }; });

2. I don't see error in the pane.

Expected behavior I would expect an a11y error to show up.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets If applicable, add code samples to help explain your problem.

System:

• OS: [MacOS]
• Device: [Macbook Pro 2018]
• Browser: [chrome]
• Framework: [ember]
• Addons: [@storybook/addon-a11y]
• Version: [e.g. 4.0.0]

[transitorytammy]

Another example of this issue would be from the listed ember example on storybook site. https://storybook.js.org/basics/live-examples/

https://storybooks-ember.netlify.com/?selectedKind=Addon%7Ca11y&selectedStory=Invalid%20contrast&full=0&addons=1&stories=1&panelRight=0&addonPanel=%40storybook%2Faddon-a11y%2Fpanel

You don't see an error there either.

[gabrielcsapo]

@shilman this is also broken in the default react application https://storybooks-official.netlify.com/?selectedKind=Addons%7Ca11y&selectedStory=Invalid%20contrast&full=0&addons=1&stories=1&panelRight=0&addonPanel=%40storybook%2Faddon-a11y%2Fpanel

@igor-dv I am trying to look into why this is happening, when we merged the manager PR did that cause this?

[divslinger]

Same thing is happening with storybook/html

[transitorytammy]

@gabrielcsapo I would love to help with issue or at least start to look into it if I could. Do you have a link to the "manager PR" you noted in a previous comment?

[gabrielcsapo]

Will look into this tonight @transitorytammy, it looks like it is an issue with all frameworks.

[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!

[transitorytammy]

Hey @gabrielcsapo. I would still be down for looking into this issue. Would you have a link the the "manager PR" you noted that might be causing part of the issue?

[BPScott]

Are you using the notes addon as well by any chance? I believe this was fixed by #5101

[basher]

I'm also unable to use addon-a11y in a brand new CreateReactApp V2 with Storybook V4.1.6.

It even fails with the sample inaccessible button story.

No a11y violations are displayed, even when I remove the button label!

I've also looked at #5101 - I did have notes addon, but it made no difference. I have since removed notes addon.

[akatechis]

I too am facing this issue. My particulars:

1. My app is being built with Parcel-bundler.
2. My addons.js:

   import '@storybook/addon-actions/register'
   import '@storybook/addon-knobs/register'
   import '@storybook/addon-a11y/register'

3. My config.js:

   
   import { configure, addDecorator } from '@storybook/react'
   import { withKnobs } from '@storybook/addon-knobs'
   import { checkA11y } from '@storybook/addon-a11y'

addDecorator(withKnobs) addDecorator(checkA11y)

const loadStories = () => { const ts = require.context('./', false, /.stories.(tsx?)$/) ts.keys().forEach(f => ts(f)) const js = require.context('./', false, /.stories.(jsx?)$/) js.keys().forEach(f => js(f)) }

configure(loadStories, module)

4. My Story file:
```javascript
import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { select } from '@storybook/addon-knobs'

import { Button } from '@storybook/react/demo'

const emojiOptions = {
  LOL: '😀😎',
  Cool: '👍💯',
}

const buttonWithText = () => (
  <Button onClick={action('click')}>Hello Button</Button>
)

const inaccessible = () => (
  <button style={{ backgroundColor: 'red', color: 'red', }}>
    Inaccessible button
  </button>
)

const buttonWithEmoji = () => {
  const label = select('Label', emojiOptions, emojiOptions.LOL)
  return (
    <Button onClick={action('click')}>
      <span role='img' aria-label='so cool'>{ label }</span>
    </Button>
  )
}

storiesOf('Button', module)
  .add('with text', buttonWithText)
  .add('Inaccessible', inaccessible)
  .add('with some emoji', buttonWithEmoji)

I initially tried out the notes addon, but after removing it, the a11y plugin still seems to not work.

Screenshot:

[akatechis]

After doing some more debugging, it looks like the addon breaks at https://github.com/storybooks/storybook/blob/v4.1.11/addons/a11y/src/index.js#L17 in v4.1.11, the latest stable release on NPM.

Looks like it's searching for an element it assumes will always be there, and trying to grab its children. I tried removing the offending line, since later, on line 23, it seems to not have a problem with using wrapper if infoWrapper is not there.

I also tried upgrading every @storybook package I have installed to 5.0.0-alpha.9 to see if that would fix it, but running the storybook command there gives some webpack errors that are beyond my abilities at this point.

Since the error seems to get swallowed, due to inter-frame message passing, I am planning on leaving the addon enabled for now, and waiting for next release which seems to be 5.0.0?

[basher]

There's another open A11Y ticket

Are these 2 issues related? i.e. is simply adding decorator addDecorator(checkA11y); not enough, and we need to configure AXE?

If so, the Storybook A11Y docs perhaps need to make this clear?

[akatechis]

There's another open A11Y ticket

Are these 2 issues related? i.e. is simply adding decorator addDecorator(checkA11y); not enough, and we need to configure AXE?

If so, the Storybook A11Y docs perhaps need to make this clear?

I suspect these are different issues. From my debugging, I see that it's not a configuration issue, but a DOM issue: The addon is looking for an element that is not present on the page.

[matthewmcclatchie]

Having the exact same issue. I'm using the following versions:

...
"@storybook/addon-a11y": "^4.1.11",
"@storybook/react": "^4.2.0-alpha.10",
...

@akatechis - Based on your debugging I changed my root class in the Inspector to story-root and it started working as expected, after navigating to a different page.

I tried setting the addParameters function as suggested over here - https://github.com/storybooks/storybook/tree/next/addons/a11y - but that had no effect.

[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!

[shilman]

For anybody who's watching this issue, I think it's an issue with @storybook/addon-a11y that's been fixed in v5.0 which is currently in RC. Please upgrade to get the fix, and we'll have a stable 5.0 out soon.

See also: https://github.com/storybooks/storybook/issues/5543#issuecomment-465061397

[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!

[shilman]

AFAIK addon-a11y is working great in Storybook 5.x. Closing this issue although I believe it's still broken in 4.x. Anybody who wants to try to back-port the fixes is welcome to submit a PR if they're stuck on 4.x.

[basher]

I've upgraded to V5 and addon-a11y now works.