Documentation Update for @storybook/addon-a11y Installation and Storybook Configuration

[MasakiNishi]

Issue Description

I encountered an issue while following the Storybook for React tutorial, specifically during the "Catch Accessibility Issues" section of the Build a simple component page. Upon installing @storybook/addon-a11y and running yarn storybook, I received a build error due to an unresolved dependency: "@storybook/icons". This issue persists and affects new users following the tutorial.

A related issue is documented here: #26685, indicating that this is a recurring problem for many users.
The corresponding code for the tutorial is here: https://github.com/chromaui/learnstorybook.com/blob/master/content/intro-to-storybook/react/en/simple-component.md?plain=1#L322

Proposed Changes

Temporary Documentation Update: Until a permanent fix is implemented, it might be beneficial to update the tutorial documentation to include a temporary workaround. Specifically, it could instruct users to install a specific version of the addon that does not cause the error, using the command:
yarn add --dev @storybook/addon-a11y@7.6.16
This version is confirmed by several community members to bypass the current issue.

Proposed changes to a separate matter

In the same section of the above issue, I encountered another potential oversight in the documentation. This section instructs users to update the .storybook/main.js configuration file to enable the addon-a11y addon. However, In my environment, hot reloading of vite was not applied in .storybook/main.js. Should it specify to restart Storybook server(yarn storybook) to see these changes take effect? The lack of this information might lead to confusion, particularly for those new to using Storybook. (It could be that It didn't need to reboot or I could be wrong.)

The corresponding code for the tutorial is here:
https://github.com/chromaui/learnstorybook.com/blob/master/content/intro-to-storybook/react/en/simple-component.md?plain=1#L325

I am willing to assist in updating the documentation and can submit a pull request with the proposed changes if approved. Please advise if there are any problems.

[jonniebigodes]

@MasakiNishi, thank you for putting together this pull request and letting us know about this issue. For context, I'm aware of it and will upgrade the templates to Storybook's stable version. For the other item you're referring to, regarding the activation of the A11y addon, it's a nice find that we should have committed to. Once again, for context, when you install and register an addon with Storybook in .storybook/main.js|ts, you'll need to restart Storybook to detect it and have the UI updated accordingly.

Hope you have a great day.

Stay safe

[MasakiNishi]

@jonniebigodes, thank you for the detailed feedback and for acknowledging the issue. I appreciate the context and the plan to upgrade the templates to Storybook's stable version.

Regarding the activation of the A11y addon and the necessity to restart Storybook after updating the .storybook/main.js file, I’ve created a new commit to address this. The PR includes the instructions to ensure users are aware of the need to restart the server for the changes to take effect.

Here’s the updated PR for your review: PR #764.

I hope these adjustments align with your expectations. Please let me know if there are any further changes needed.

Thanks again for your guidance and support!