Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
basher opened this issue Aug 12, 2020 · 20 comments

Comments

@basher
Copy link

basher commented Aug 12, 2020

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
Copy link
Member

shilman commented Aug 12, 2020

Updated the doc. Can you check again?

@basher
Copy link
Author

basher commented Aug 12, 2020

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
Copy link

Same for me

@shilman
Copy link
Member

shilman commented Aug 12, 2020

cc @tmeasday @tooppaaa

@basher
Copy link
Author

basher commented Aug 12, 2020

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
Copy link

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
Copy link
Member

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

@basher
Copy link
Author

basher commented Aug 13, 2020

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

I've pushed change to my repo.

@tooppaaa
Copy link
Contributor

Done some small fixes on a11y-addon on #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
Copy link
Author

basher commented Aug 14, 2020

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

@tooppaaa
Copy link
Contributor

@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
Copy link
Author

basher commented Aug 20, 2020

@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
Copy link
Contributor

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
Copy link
Author

basher commented Aug 20, 2020

Will do... thanks.

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

@basher
Copy link
Author

basher commented Aug 20, 2020

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
Copy link
Contributor

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
Copy link
Member

shilman commented Aug 20, 2020

🎉

@shilman shilman closed this as completed Aug 20, 2020
@LordRembo
Copy link

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
Copy link
Member

shilman commented Sep 8, 2020

@LordRembo your best bet is upgrading to main.js

@LordRembo
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants