Storybook: withA11y decorator has been removed in V6 - migration docs are a bit vague when explaining how to use accessibility addon

[basher]

The V6 migration docs indicate replacing the decorator with addParameters({ ... }).

But where exactly?

• Presumably some global config file?
• I tried in main.js which didn't work?
• I don't have config or preview files - I tried adding them, but to no avail.

Context

I'm using @storybook/html in standalone mode because I use Parcel to bundle my UI rather than Webpack.

In V5.3, a simple HTML story would look something like this:

import { withA11y } from '@storybook/addon-a11y';

export default {
    title: 'Component Title',
    decorators: [withA11y]
};

export const MyComponent = () => `
<div>
    ...some HTML...
</div>
`;

System:

System:
    OS: Windows 10 10.0.18362       
    CPU: (12) x64 Intel(R) Core(TM) 
i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.1 - C:\Program Files 
(x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.105
    Edge: Spartan (44.18362.449.0)  
  npmPackages:
    @storybook/addon-a11y: ^6.0.4 => 6.0.4 
    @storybook/addon-docs: ^6.0.4 => 6.0.4 
    @storybook/addon-knobs: ^6.0.4 => 6.0.4 
    @storybook/html: ^6.0.4 => 6.0.4

[shilman]

Updated the doc. Can you check again?

[basher]

Thanks, but still not working. I still get Initializing....

I've tried adding preview.js in the each of my 2 storybooks (the preview storybook, and the standalone HTML storybook) - individually, and both of them at the same time.

And, of course, I've removed the decorator from the story.

[AleshaOleg]

Same for me

[shilman]

cc @tmeasday @tooppaaa

[basher]

I've updated my 2 test repos to demo the problem in Storybook V6 with Parcel V2:

Storybook HTML standalone
Storybook preview wrapper

[marie-maxime]

If the a11y tab is stuck to "initialize" and no error is displayed, make sure to update this:

In main.js
change

// .storybook/main.js
module.exports = {
  addons: [
    '@storybook/addon-a11y/register',
  ],
};

to

// .storybook/main.js
module.exports = {
  addons: [
    '@storybook/addon-a11y',
  ],
};

Remove /register.

[tmeasday]

@shilman should we add @marie-maxime's note to the migration doc?

[basher]

Sorry to say @marie-maxime but it doesn't work for me. 😢

I've pushed change to my repo.

[tooppaaa]

Done some small fixes on a11y-addon on https://github.com/storybookjs/storybook/pull/12003

This might resolve your issues but haven't verified yet. @basher, I saw on your second repo that you used manual: true which will be fixed by this.

@tmeasday If I'm right, the migration for removing /register is documented and this should be done for all addons (I'm sure I've read this somewhere 🤔)

[basher]

Thanks @tooppaaa - I'll keep my fingers crossed! 😄

[tooppaaa]

@basher I did some digging on your repos.

• Running npm run storybook worked
• Running npm run storybook:preview doesn't worked

I am not sure what you try to do is supported. Using your own iframe served from a custom page means storybook is not able to apply presets and inject addons code in your preview.

Addon a11y and many others, needs to be present in both applications (manager & preview).
In addition, we're relying on a channel to communicate between these 2 instances, another bit of code needed.

[basher]

@tooppaaa I'm using standalone/preview mode because I use Parcel to bundle my CSS/JS, not Webpack - see my original comment.

This works with accessibility addon in Storybook v5.3 but not in v6.

I understand that standalone is no longer supported, and I've had conversations previously with @shilman regarding Storybook server, and whether that would be a better solution to using Parcel bundler.

I've also tried using Storybook composition in v6 instead of standalone/preview to see if that works better... just waiting for a CORS issue to be resolved.

[tooppaaa]

We changed how the addon id working to use channel instead.
Let me know if this works using composition, that will be a good use case !
If it's not, we can definetely spend some time to fix this.

[basher]

Will do... thanks.

I really want to keep using Storybook, even though my specific use case is _"unusual"_ (i.e. HTML stories + Parcel). 😉

[basher]

CORS issue now fixed.
Accessibility addon now works for my "wrapper" Storybook - so maybe this specific issue can be closed?

However...
I've added some details to this validateDOMNesting bug for issues with my Storybook composition + HTML/Parcel stories.

😢

[tooppaaa]

Awesome !
Happy to hear that it work in your use cases.

In favor of closing as well to track DOM Nesting in the other issue.
I don't think it's related to addon a11y :)

[shilman]

🎉

[LordRembo]

I upgraded to 6.0.21 and having the same issue with A11y being stuck ast 'initializing'.
However, I'm using a 'config.js'-file in combination with a 'addons.js' file and when I drop the '/register', A11y simply doesn't load.
Any ideas on how I could get it to work?

[shilman]

@LordRembo your best bet is upgrading to main.js

[LordRembo]

Alright, thanks. I was just going over the migration doc and stumbled upon info saying config.js was 'soft' deprecated in 5.3 :D