Accessibility in Storybook

[dgreene1]

Describe the bug
A clear and concise description of what the bug is.

When trying to test the accessibility of the library, you can't focus on the tree and the library does not process key events that it is supposed to, like the down arrow moving lower in the tree at that level.

To Reproduce

Try the keyboard shortcuts described in https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html and you'll find that sometimes the focus shows up and sometimes it doesn't. The most troubling issue is when certain arrow keys accidentally take you out of the tree.

Expected behavior

The keyboard behavior described in https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html should work.

Screenshots
n.a.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser: Firefox w/ NVDA
• Version: 98.0.2

Smartphone (please complete the following information):

n.a.

Additional context
Add any other context about the problem here.

[lukasbach]

Hi @dgreene1, thanks for your report! Can you give some specific examples which keys you pressed and in which example (which storybook story or deployed example). For me the keybindings work as expected.

[lukasbach]

Ah I found an issue from the last time I worked on some performance upgrades, I'm looking into it. Pretty sure that those issues where introduced after the last release though, this should not happen on any consumable version of the library at the moment.

[dgreene1]

@lukasbach I was able to replicate it in the “playground” link on the website so it is occurring out in the published version.

[lukasbach]

Can you kindly try if you can still replicate it? I did some fixes, and it should hopefully not happen anymore.

Btw. the playground shows the current state on master, but the last release to npm was some time ago before I did the changes that probably caused the issue, so consumers of the library should not be affected, that's what I meant with published version, sorry for the misunderstanding.

[dgreene1]

Yes, it's still a problem. I'll give the reproduction steps I just used:

1. turn on NVDA
2. open up Firefox
3. visit Accessibility in Storybook #56
4. press tab (which should show that the tree is focused
5. press enter

expected results:

the first folder should collapse (since it was already open)

actual results:

focus leaves the tree and goes somewhere else. I think it goes to rct-livedescription-tree-1

Comments:

Can this rct-livedescription-tree-1 div be removed and made a part of the documentation instead of part of the actual widget?

[dlech]

focus leaves the tree and goes somewhere else. I think it goes to rct-livedescription-tree-1

I noticed this too. The default live description contains a link which takes focus even though it is not visible on the screen.

Can this rct-livedescription-tree-1 div be removed and made a part of the documentation instead of part of the actual widget?

This can be done in your own app with the renderLiveDescriptorContainer prop. But the link should probably be removed or made non-focusable in the default implementation.

[lukasbach]

The link in the live descriptor region should not be there anymore, I removed that in 8a45c1f and deployed afterwards...

Also note that enter does not toggle the collapsed state of an item, it only selects and invokes the primary action, but space does.

[lukasbach]

I'll close this for now, please let me know if any other issues persist.