React-beautiful-dnd: Need to move away from aria-roledescription

[benjaland]

Bug or feature request?

Bug

Expected behavior

With JAWS or NVDA screen reader running, pressing the space bar when the draggable component is focused initiates the dragging process.

Using the storybook as an example
https://react-beautiful-dnd.netlify.com/?selectedKind=single%20vertical%20list&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

This has also been seen "in the wild" with other implementations.

Actual behavior

With JAWS or NVDA screen reader running, pressing the space bar actives the hyperlink functionality, taking the user in this instance to the Adventure Time Wiki page.

Steps to reproduce

1) Download and install a screen reader
2) Switch on the screen reader
3) Open Chrome (tested using 65.0.3325.146 (Official Build) (64-bit))
4) Navigate to https://react-beautiful-dnd.netlify.com/?selectedKind=single%20vertical%20list&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
5) Press the "TAB" key on the keyboard until you reach one of the draggable cards
6) Press the space bar key
7) See that the dragging action is not activated and that you are now on a new webpage.

What version of React are you using?

Your instance/storybook.

What version of react-beautiful-dnd are you running?

Your instance/storybook.

What browser are you using?

Chrome 65.0.3325.146 (Official Build) (64-bit)

Demo

https://react-beautiful-dnd.netlify.com/?selectedKind=single%20vertical%20list&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

[alexreardon]

Thanks for checking this out. We have previously run tests with various screen readers and everything worked as expected /cc @seancurtis.

I find that running the examples in an iframe often messes with things. Try running the examples out of an iframe:

(add .iframe.html before the query)

react-beautiful-dnd.netlify.com/iframe.html

[benjaland]

Hi Alex,

Thanks for the quick reply.
I tested the link you provided and you're right, the drag n drop functionality works with the spacebar on the machine I'm currently on - and doesn't work on the original storybook link I had used. (Chrome 69.0.3497.100 (Official Build) (64-bit) (cohort: Stable))

It's worth noting though that even though the drag and drop functionality works on the iframe link you provided, JAWS 2018 provides no information from the aria-roledescription. The entire drag and drop process is silent.

I will test on IE (Which JAWS prefers) and NVDA/Firefox later today.

[alexreardon]

Thank you. This is a tricky space to get right. Any suggestions welcome
On Wed, 24 Oct 2018 at 6:48 pm, benjaland [e-mail] wrote:

Hi Alex,

Thanks for the quick reply.
I tested the link you provided and you're right, the drag n drop
functionality works with the spacebar on the machine I'm currently on - and
doesn't work on the original storybook link I had used. (Chrome
69.0.3497.100 (Official Build) (64-bit) (cohort: Stable))

It's worth noting though that even on the iframe link you provided, JAWS
2018 provides no information from the aria-roledescription.

I will test on IE (Which JAWS prefers) and NVDA/Firefox later today.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/865#issuecomment-432549655,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACFN7XZedVAUz6LzIyeCrLjQgdn6qQTbks5uoBs2gaJpZM4X1iFK
.

[alexreardon]

We currently use aria-roledescription as we found it had the most
consistent announcement. But open to other mechanisms for the initial
announce!
On Wed, 24 Oct 2018 at 6:52 pm, Alex Reardon [e-mail] wrote:

Thank you. This is a tricky space to get right. Any suggestions welcome
On Wed, 24 Oct 2018 at 6:48 pm, benjaland [e-mail]
wrote:

Hi Alex,

Thanks for the quick reply.
I tested the link you provided and you're right, the drag n drop
functionality works with the spacebar on the machine I'm currently on - and
doesn't work on the original storybook link I had used. (Chrome
69.0.3497.100 (Official Build) (64-bit) (cohort: Stable))

It's worth noting though that even on the iframe link you provided, JAWS
2018 provides no information from the aria-roledescription.

I will test on IE (Which JAWS prefers) and NVDA/Firefox later today.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/865#issuecomment-432549655,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACFN7XZedVAUz6LzIyeCrLjQgdn6qQTbks5uoBs2gaJpZM4X1iFK
.

[lilymatcha]

Wanted to add additional information: I ran into a similar issue when I run the example in Chrome. However, it works fine in Edge--this might be a browser support issue.

[lilymatcha]

@benjaland Did you encounter the same issues with JAWS or NVDA when running on Edge?

[alexreardon]

This is not being ignored. I am working with a number of organisations to find a good path forward.

The issue with JAWs and nvda is the "virtual cursor". If you disable that then everything is fine. Both of those screen readers are intercepting a spacebar press and sending a click event.

We are hopefully also getting in touch with some a developer from nvda to see what we can do on our end, or if there is something they can do on theirs 👍

[alexreardon]

1238 has some fantastic detail for reference.

Any suggestions on an alternative? aria-roledescription previously yielded the most consistent announcements

[FlipgridMartin]

Is just a plain old aria-label an option? The seems to be the most consistent from my testing.

[jgage176]

Not understanding the title change. Is that the root cause with the "virtual cursor" issue? I am also seeing this issue, both locally in my own site and on one of the examples that doesn't have hyperlinks, since those it just navigates to: https://react-beautiful-dnd.netlify.com/?path=/story/accessibility--single-list. There running NVDA prevents reordering of the list, but disabling it makes everything work fine.

[alexreardon]

Fixed as a part of #1385