Issue Summary

The drag and drop functionality present in the table is not accessible for keyboard only and screen reader users.

Steps to Reproduce

1. Navigate to Projects dropdown present in the header section.
2. Navigate to any project for example, "Scrum".
3. Navigate to side navigation and select "Release" option.
4. Observe that "Managing Releases" page has been appeared on the screen.
5. Using screen reader try to arrange the table rows based on the requirement.
6. Observe that the functionality cannot be operated with a keyboard.
7. Listen that the elements that perform the drag and drop functionality is not identified with appropriate role and state.

Screenshot

Actual Results

The drag and drop functionality to arrange the table rows is not operable with a keyboard. It can only be performed using mouse. Moreover, the elements that perform the drag and drop functionality is not programmatically identified for screen reader users with any role or state.
This restricts the keyboard-only and screen reader users from performing the drag and drop functionality.

Expected Results

Apply the following changes: * Code the dragable elements (answers) using native HTML <button> element. Alternatively, specify role="button" for <div> element in which the answers are structured along with tabindex value of ‘0’ and required scripts for making it keyboard operable as well as mouse.

• Provide an off-screen text as "selected" as soon as any draggable element is selected to convey it's state. This should be handled via scripting when an element is selected or deselected.

 
To place the text off-screen:
.off-screen

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

•  As soon as any row is selected, the focus should be shifted on the droppable area using JavaScript .focus(). For keyboard only users, the focus will be set to the first droppable area. The droppable <div> areas will also require tabindex=”0” value as soon as the draggable element is selected.
• Specify role="region" to container which consists of droppable area. Also, provide a visual text to identify the droppable block. For example, "Drop - Row 1 here".
• Provide keyboard mechanism as below for the functionality:
• An Escape key mechanism for users to cancel the entire functionality.
• An Enter key to drop an answer in the respective droppable area.
• Once, the draggable element is placed in the respective droppable areas, provide a visual feedback to the users. Make this alert available for the screen reader users by structuring the message within a <div> element and providing a role of alert to the div as soon as the message is displayed. Use ARIA live region properties to make the feedback available to screen reader users and set the politeness level to "assertive".
• When the action is completed or aborted, clean-up the interface by loading the default values and making the droppable area non-interactive. Also, move the focus to the first draggable element using javascript .focus() method, where the user can start again.
• Provide visual instructions on how to access the functionality.

Workaround

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

Environment 

MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 112.0.5615.49 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest