adobe / adobe/react-spectrum

Drag and Drop: help text provided using aria-describedby only available in screen reader forms mode

Open
#3,220 0 comments 0 reactions 1 assignee Assigned to @devongovett View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

With Windows screen readers, like NVDA or JAWS, the help text provided on the drag target and drop targets using `aria-describedby` only gets read when the screen reader is shifted into forms mode. In browse/virtual cursor mode, there is no indication that an element being read by the screen reader is a drop target.

## 🤔 Expected Behavior

When the drag session starts, by pressing space or enter on a drag target, the screen reader should shift into forms mode, which should ensure that the help text get announced. When the drag session ends, the screen reader can exit forms mode.

## 😯 Current Behavior

Using NVDA or JAWS screen reader on Windows.
1. Open the [Default Drag and Drop Storybook example](https://reactspectrum.blob.core.windows.net/reactspectrum/011111facd6728d67f71b7ee8a8fb9a1c0871df8/storybook/iframe.html?providerSwitcher-locale=&providerSwitcher-theme=&providerSwitcher-scale=&providerSwitcher-toastPosition=bottom&args=&id=drag-and-drop--default&viewMode=story).
2. In browse mode/virtual cursor mode, navigate to the button labelled "Drag me."
3. **The `dragDescriptionVirtual` message, "Click to start dragging." does not get announced.**
4. Press Space or Enter key to activate the "Drag me" button and start dragging.
5. **NVDA or JAWS will not shift into forms mode.**
6. The live announcer will announce the, `dragStartedVirtual` message, "Started dragging. Navigate to a drop target, then click or press Enter to drop," followed by the `endDragVirtual` message, "Dragging. Click to cancel drag."
7. Use down arrow to move the virtual cursor to the first available drop target, a button labelled, "Drop here."
8. **The screen reader fails to announce the `dropDescriptionVirtual`, "Click to drop."**
9. Press Enter key to complete drop action.
10. The live announcer will announce the `dropComplete` message, "Drop complete."

## 💁 Possible Solution

When the drag session starts with `getDragModality() === 'virtual'`, add `role="application"` to the closest generic ancestor that contains both the drag target element and all available drop targets. Then, after a brief delay, blur and restore focus to the drag target, which, because it is now contained within an element with `role="application"`, should switch the screen reader into forms mode.

## 🔦 Context

This issue was raised by Rakesh Paladugula ([@rakesh_a11y](https://twitter.com/rakesh_a11y)), who noticed that he had to manually switch into forms mode to hear the help text for drop targets.

> I am looking at this Drag and Drop on React spectrum. [https://reactspectrum.blob.core.windows.net/reactspectrum/ef9722eb49c354476c87cf7f6df9f87d4fc4[…]ok-17/index.html?path=/story/drag-and-drop--default](https://reactspectrum.blob.core.windows.net/reactspectrum/ef9722eb49c354476c87cf7f6df9f87d4fc44857/storybook-17/index.html?path=/story/drag-and-drop--default) . This is working perfect with NVDA and JAWS, but only concern is that the enter key to pick the control and drop only works when screen reader focus is in forms mode. Currently, I as a user have to switch from browse mode to forms mode manually. I expect that the switch of mode happens automatically when that is expected to complete an action. Is this behavior thought for and any issue raised for it?

## 💻 Code Sample

## 🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | @react-aria/dnd@3.0.0-alpha.9
| Browser | Microsoft Edge 102.0.1245.39 (Official build) (64-bit)
| Operating System | Windows 10 Enterprise 21H2 OS build 19044.1706

## 🧢 Your Company/Team
Adobe/Accessibility

## 🕷 Tracking Issue (optional)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.