Dashboard with Gadget: Drag and drop feature is not accessible for keyboard & screen reader users.

Issue Summary

On Dashboard page, the drag and drop feature for widgets such as "Bubble chart" is not accessible for keyboard & screen reader users.

Note: currently the user can drag & drop widgets via mouse only.

Issue ID: 725415

Steps to Reproduce

1. Navigate to Jira homepage.
2. Navigate to 'Dashboards' menu & activate 'Manage dashboards' link.
3. Navigate to the 'Create a new dashboard' link & activate it.
4. Fill all the details in 'Create new dashboard' form & click 'add' & navigate to the dashboard page.
5. Navigate to the 'Add gadget' button & activate it.
6. Add any gadget from the dialog. For Example : 'Bubble chart'.
7. Try to drag & drop the widget from one position to other with keyboard.

Actual Results

While navigating with keyboard, when user navigate to the widgets such as "Bubble chart", 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 about the drag & drop functionality since the screen reader doesn’t announce any information which conveys the functionality to users.

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

Expected Results

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

The element to drag/drop widgets should be marked inside native <button> element & it should have a descriptive accessible label.

For Example : aria-label="Drag bubble chart".

Following are the expected keyboard interactions for drag/drop feature.

• 'Tab' key to navigate to the widget drag button.
• 'Space' key to drag/drop the widget.
• 'Left/right' keys to move the widget to different drop locations.

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

• When user navigate to any widget (draggable item)
  For Example : "Draggable item. Ensure your screen reader is not in browse mode and then press space bar to lift."
• When user drag/lift a widget
  For Example : "You have lifted the widget. Use the arrow keys to move, space bar to drop, and escape to cancel."
• When user move the widget from one location to other via arrow keys.
  For Example: "You have moved the widget from "location 1" to "location 2". Use the arrow keys to move, space bar to drop, and escape to cancel."
• When user drop the widget.
  For Example: " You have dropped the widget. You have moved the widget from "location 1" to "location 2"

Screenshot

Screen recording

Screen Recording 2022-02-11 at 12.08.32 PM.mov

BACKGROUND

Some people cannot use a mouse due to vision or motor disabilities. Content that can be operated with a mouse must also be made operable with a keyboard. When content is operable through a keyboard, it becomes operable by a variety of assistive technologies such as speech input software, sip-and-puff software, on-screen keyboards, scanning software, and alternate keyboards 

Workaround

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