Issue Summary

The feature allows users to rearrange issues vertically within a section or move them from one section to another. The feedback messages related to this drag and drop session are not appropriate for screen reader users.

Steps to Reproduce

1. Open the "Backlog" page.
2. Navigate to the mentioned instances.
3. Observe that by using the mouse cursor and keyboard user can perform the drag-and-drop functionality
4. Observe that the feedback announcements during moving and dropping a task is not appropriate for screen reader users.

Screen Recording

Screen Recording 2024-03-07 at 12.08.18 PM.mov

Actual Results

The user can move issues in vertical positions within the section or from one section to another section by using the mouse cursor and keyboard but the feedback related to the movement of the task is not announced properly. Also, when the task is dropped, the drop location is not conveyed properly.

As a result, Screen reader users will not be able to perform the functionality that is available for the sighted users.

Expected Results

Every functionality should be accessible to all users and should provide proper instructions to use those kinds of functionality.

Provide shortcut methods for screen reader and keyboard-only users and provide hidden instructions to announce the functionality to the users. Make sure that the feedback messages related to the drag and drop is appropriate and accurate.

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.
To place the text off-screen can refer to the code below:

.off-screen{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
} 

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

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

• When the user moves the image adjust it in the given frame via arrow keys.
  For Example: "You have moved the issue from ‘Position 1’ to 'Position 3' in Sprint. 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 issue. You have moved the issue from "Position 1" to the "Position 3" in Sprint.

The First instruction regarding the Draggable item should be associated with the draggable button 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.

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

https://pauljadam.com/demos/drag-drop.html

https://www.w3.org/wiki/PF/ARIA/BestPractices/DragDrop

Workaround

Currently, there is no known workaround for this behaviour.

Environment

MacBook Pro (16-inch, 2019)
macOS 14.3 (23D56)
Chrome - Version 121.0.6167.184
Firefox- Version 122.0.1 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2024
NVDA- Version 2023.3
Voiceover - Version Latest