Issue Summary

Within the field modal non-modal dialog the drag and drop functionality is inaccessible for keyboard-only users and for screen reader users too.

Steps to Reproduce

1. Open the "Accessibility Assessment - Roadmaps" page.
2. Navigate to the field button in the main content area of the page.
3. Verify a non-modal opens, now drag the elements using the mouse.
4. Repeat the same using the keyboard and verify that the drag-able items are inaccessible.

Screen Recording

Screen Recording 2024-02-12 at 12.34.56 PM.mov

Actual Results

The drag-and-drop functionality is not accessible for keyboard-only and screen reader users.

When the user activates the holds the left click on the elements, the drag and drop functionality gets activated, however, the same functionality is not accessible using the keyboard alone resulting in users missing out on critical functionality.

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.

Note: Currently the issues can be dragged & dropped via mouse only due to keyboard support being unavailable for the board's section.

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

Following are the expected keyboard interactions.

• 'Tab' key to navigate to the issues.

• 'Space' key to drag/drop the issue.

• 'Left/right' keys to move the issue horizontally to different columns.

• 'up/down' keys to move the issue 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 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
  For Example: "You have lifted an issue in ‘Not started’ column. 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 an item from the ‘Not started’ column to the “In-progress” column. 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 the ‘Not started’ column to the ‘In-progress’ column".

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 - Drag and Drop

Workaround

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

Environment

MacBook Pro (13-inch, 2018)
macOs Ventura 13.3.1
Chrome - Version 109.0.5414.119 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest