Issue Summary

The drag-and-drop functionality of the “Issues“ in the Scrum board is inaccessible to screen reader users.

Steps to Reproduce

1. Open the "Scrum board" page.
2. Navigate to the "Issues" present on the board.
3. Using a screen reader try to change the position of the Issues.
4. Observe that the functionality cannot be operated using a screen reader.

Screen Recording

Screen Recording 2024-02-07 at 11.58.48 PM.mov

Actual Results

The drag-and-drop functionality to arrange the “Issues" is not operable with a screen reader. It can only be performed using a mouse or a keyboard(without a screen reader). Moreover, the elements that perform the drag and drop functionality are not programmatically identified for screen reader users with any role or state. 

This restricts the screen reader users from performing the drag-and-drop functionality.

Expected Results

Make sure the drag-and-drop functionality is accessible for the screen reader users.

Provide shortcut methods for screen reader users and provide hidden instructions to announce the functionality to the users.

The users should be able to drag & drop filters with the screen reader alone. Also, there should be instructions on the page providing Information on accessing drag & drop functionality with the screen reader.

Following are the expected keyboard interactions.

• "Tab" key to navigate to the filter.

• "Space" key to drag/drop the filter.

• "Left/Right" keys to move the filter horizontally to different columns.

• "Up/Down" keys to move the filter vertically in a particular column.

Also, the drag & drop functionality should be accessible for screen reader users. This can be achieved by providing instruction (off-screen) in the ARIA live region for screen reader users.

• When the user navigates to any issue (draggable item)
  For Example: "Draggable filter. Ensure your screen reader is not in browse mode and then press the space bar to lift."

• When a user drags/lifts an issue
  For Example: "You have lifted a filter in ‘Location 1’. Use the arrow keys to move, space bar to drop, and escape to cancel."

• When the user moves the issue from one column to another via arrow keys.
  For Example: "You have moved a filter from ‘Location 1’ to “Location 2”. Use the arrow keys to move, space bar to drop, and escape to cancel."

• When the user drops the issue.
  For Example: " You have dropped the filter. You have moved the filter from "Location 1" to the "Location 2"

The First instruction regarding the Draggable item should be associated with the issue element via the aria-describedby attribute in the source code.

The other instructions regarding drag/move/drop should be marked inside a live region. It should have aria-live="assertive", role="log", aria-atomic="true", etc attributes to ensure that the screen reader announces every time the user interacts with the issues

Provide the global attribute "draggable="true"" to the <div> container.

Please refer to this link for accessible drag-and-drop functionality:

Drag and Drop
PF/ARIA/BestPractices/DragDrop - W3C Wiki 

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest