Storybook: Make shortcut button and submenu accessible

[carcoral]

Is your feature request related to a problem? Please describe.
Currently, the Shortcuts sub-menu items are not accessible for screen readers and for keyboard-only navigation (no mouse). This makes it frustrating when trying to navigate storybook for accessibility testing purposes.

Describe the solution you'd like
Make the Shortcuts button and submenu items accessible for the screen reader and keyboard navigation, here is a solution using A.R.I.A that the team could leverage https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html
Also, include an option to jump to the main content from the shortcuts submenu, ideally the first one

Describe alternatives you've considered
Other alternatives could be considered but would imply design changes. LinkedIn has a really interesting approach to shortcuts and keyboard navigation. Go to your LinkedIn home page and without touching your mouse, navigate the page by using the tab key.

Are you able to assist bring the feature to reality?
Yes, I can, I can help to advise and testing the solution. I will be more than happy to collaborate and make storybook an accessible for all tool.

Additional context
We are in the process of creating our component library, my team is responsible for Accessibility testing and acceptance for all components and UI elements we release. It is frustrating to test the components on Storybook with a screen reader; the navigation and functionality of storybook itself are very complicated are an assistive technology user.

Please let me know if there are any questions, I love storybook and I believe there is lots of room for improvement and the opportunity to make it a remarkable accessible tool.

[shilman]

@jsomsanith-tlnd @CodeByAlex @Armanio @domyen anybody want to jump on this one? great chance to practice what we preach here!

[jsomsanith-tlnd]

Oh, indeed the navigation bar groups are not focusable.
And there are some other issues :

• there are no landmarks neither to allow the jump to the menu/content/...
• the ellispsis menu button has no outline and aria-label is missing
• we should do an accessibility audit

It's quite hard to find some free time for now, but I'll try to look at it when I can. In the meantime, if someone wants/can to look at it, feel free to do that.

[gdkraus]

What time frame are you looking at being able to make changes? Our company is looking at adopting Storybook, and accessibility of the UI is very important to us. I can give you an accessibility evaluation of the UI itself, I just don't have cycles right now to commit code changes for it. I can also recommend companies who would do it for a fee if you would rather go that route.

[domyen]

I think the first steps here are:

1. Create a checklist of what's inaccessible
2. For each item, propose or link to a solution

Then contributors can jump in and commit solutions without needing to be super familiar with the WCAG.

All my free time is going to another Storybook project right now 😅

[jsomsanith]

For the navigation side panel, I would go for an accessible treeview instead of the menu button link that was suggested.
The reason is that it's really a treeview, and navigation will be way easier with treeview gestures than menu gesture via tab key.

I ended up with this lib during my search : https://github.com/lissitz/react-accessible-treeview
It's pretty young (the project started less than 2 months ago), but looking at the demo, it's 100% accessible.
The only bad part I saw is the component api: https://github.com/lissitz/react-accessible-treeview#data. We have to flatten the tree and describe the hierarchy via ids.

[carcoral]

Thanks all for your attention to this.
At our company (www.healthpartners.com) we are committed to StoryBookJS, we are on version 5.X.X of our design/component library, all versions released with StoryBooJS

@domyen I can help with creating the list of accessibility issues/improvements and provide solutions/suggestions for each. It could help to also prioritize the items based on user impact (keyboard navigation and screen reader support)

@jsomsanith I looked at https://github.com/lissitz/react-accessible-treeview and I found some issues for keyboard navigation. The lib claims that it was modeled after https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html but I see some differences in the behavior with Keyboard only navigation. I am going to test it with NVDA, VoiceOver(mac) and JAWS later today and provide some feedback

It is in my best interest (and our company as well) to help and collaborate with this.
On a personal note, I am going to be taken two weeks of paternity leave, that could happen any time now. If I go idle that will be the reason.

[domyen]

@carcoral Thanks creating the list and helping triage would be super helpful. 🙏

WRT to replacing the treeview, I suspect this is a non-trivial UI undertaking that requires buy-in from more folks on the maintenance team. The folks who know worked on the current treeview include, iirc @igor-dv @shilman @ndelangen @tmeasday and myself. I'd suggest punting this to another issue if it's urgent.

[carcoral]

Hi Everyone,
I will be back from my paternity leave next week. I will start working on this and the issue list aI promised the group on Monday 10/7.

[shilman]

Awesome @carcoral!

[ndelangen]

@carcoral happy to help, PM me on discord if you want to pair on this.
https://discord.gg/sMFvFsG

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

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!