VoiceOver in Chrome is not announcing lift instructions

[ccveer]

Expected behavior

VoiceOver announces the default lift instructions: "Draggable item. Ensure your screen reader is not in browse mode and then press space bar to lift.".

Actual behavior

VoiceOver does not announce the lift instructions

Steps to reproduce

1. Open https://react-beautiful-dnd.netlify.com/?path=/story/accessibility--single-list in Chrome
2. Turn on VoiceOver
3. Tab to one of the draggable items

Suggested solution?

Add a default role to the draggable items that is an inter-actable role.

The reason I would fix it this way is due to the following:

which comes from https://www.w3.org/TR/using-aria/#label-support

I would probably use the "button" role, but I believe any of the Widget roles will work. https://www.w3.org/TR/wai-aria/#widget_roles

What version of React are you using?

I see this in my implementation on version 16.12.0, but it is also occurring on whatever version is being used by your implementation I referenced in Steps to reproduce.

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

I see this in my implementation on version 12.2.0, but it is also occurring on whatever version is being used by your implementation I referenced in Steps to reproduce.

What browser are you using?

Chrome Version 79.0.3945.88 (Official Build) (64-bit)

[alexreardon]

Try opening the example out of an iframe. There is a little pop out button

[ccveer]

I clicked this button and retested. I got the same results.

[alexreardon]

What version of your operating system are you using?

[alexreardon]

I can confirm that lift instructions are not being fired on all elements (eg div). I think we will need to look at giving the element a role if it doesn't have one already. Damn!

[alexreardon]

Ideally we do not put a role on every element as that would override the default behaviour for particular elements such as anchor. But we won't know what the tag of the drag handle elements are ahead of time. I'm not sure what to do with this.

[ccveer]

Could you surface the ability to add a role to the elements?

[alexreardon]

You can add a role today if you want to (which is an okay work around)

[alexreardon]

Ideally, we add a role to non-interactive elements by default..

[alexreardon]

I cannot see a way of conditionally adding a role. Super open to ideas. I think we need to just add a role (eg button) and call that out in the docs, and show how people can remove it or change it where appropriate

I think we need to continue push being accessible out of the box

[alexreardon]

I want to have more of a read of the spec + play with screen readers

[alexreardon]

At one point I had voiceover reading the description, but now i don't. I am continuing to experiment

[alexreardon]

Any input would be super appreciated. I have what I think is the correct solution: https://github.com/atlassian/react-beautiful-dnd/blob/accessibility-refresh/docs/guides/screen-reader.md#on-focus-messaging

[alexreardon]

This will be a breaking change as we are moving from aria-labelledby to aria-describedby

[alexreardon]

@ccveer can you try on this dev build? https://deploy-preview-1741--react-beautiful-dnd.netlify.com/?path=/story/single-vertical-list--basic

[ccveer]

Everything is working as expected on my end. Thank you!

[alexreardon]

Hi @ccveer can you please try out this one?

https://deploy-preview-1741--react-beautiful-dnd.netlify.com/?path=/story/single-vertical-list--basic

I've tested it on JAWS and NDVA, but worth getting a second look

[alexreardon]

I haven't figured out how to get spacebar to work correctly for JAWS. It seems to work correctly in 'forms mode', but i cannot figure out how to force JAWS into forms mode

[ccveer]

Just tested on VoiceOver and it works great! Thanks so much!

[ccveer]

I've only ever used VoiceOver, Narrator, and NVDA, so I unfortunately don't know how to help you with JAWS.

[alexreardon]

That's all good. Did the new solution work with those ones @ccveer ?