Issue Summary

General - Drag and drop feature is not keyboard accessible.

Element name: Drag tasks here to make the final
Tasks: Source Code Checkout, Script,.... etc links

Location of the elements: List of tasks, under the "Create tasks" heading section, in the main content.

Additional details: We can drag and drop the list of tasks with the mouse. There is no way to drag and drop with the keyboard.

Steps to Reproduce

1. Open the home page
2. Navigate to the "Deploy" link and activate it.
3. Navigate to the "All deployment projects" link and activate it.
4. Navigate to the deployment project link and activate it.
5. Navigate to the "Edit Environment" link and activate it.
6. Navigate to the "Set up task" link and activate it.
7. Navigate and click on the "Add task" link.
8. Then the "Task types" modal will display. Navigate to the "Script" link and activate it.
9. Navigate to the mentioned instance and observe that drag and drop functionality is inaccessible.

Actual Results

While navigating with the keyboard, when the user navigates to the interactive elements such as "(Deprecated )Per Build Container (PBC)...", "Artifact Download", "Script" and so on it can’t be dragged & dropped from one location to another. The element to drag/drop widget doesn’t receive keyboard focus. Also, the screen reader users are not aware of the drag & drop functionality since the screen reader doesn’t announce any information which conveys the functionality to users.

This makes it keyboard-only users & screen reader users difficult to perform the drag & drop operations effectively.

Expected Results

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

Provide shortcut methods for screen reader and keyboard-only users and by providing hidden instructions announce the functionality to the users.

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

Following are the expected keyboard interactions.

• "Tab" key to navigate to the task.

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

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

• "Up/Down" keys to move the task 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 ARIA live region for screen reader users.

• When the user navigates to any issue (draggable item)
  For Example: "Draggable task. 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 task 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 task 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 task. You have moved the task from "Location 1" to "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.

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

Screenshot

Workaround

Not Available

Bug Ref: 459515