Issue Summary

On Kanban board page, drag & drop issues functionality is not accessible with keyboard alone. 

For Example : The issues can not be moved from one column to another using keyboard.

Steps to Reproduce

1. Navigate to Jira homepage.
2. Navigate to any project. For Example : Test-QA
3. Navigate to "Kanban board" page.
4. Navigate to the issues present inside main content. For Example : TES-1, TES-2, etc.
5. Try to drag & drop issues with keyboard alone.

Actual Results

While navigating with keyboard, when user navigate to the issues in main content such as 'TES-1', 'TES-2', etc they can’t be dragged & dropped from one column to another. 

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.

Note: Currently the issues can be dragged & dropped via mouse only.

Expected Results

The users should be able to drag & drop issues with keyboard alone. Also there should be instructions on the page providing the Information on accessing drag & drop functionality with 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 an instruction (off-screen) in ARIA live region for screen reader users.

• When user navigate to any issue (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 an issue
  For Example : "You have lifted an issue in To do column. Use the arrow keys to move, space bar to drop, and escape to cancel."
• When user move the issue from one column to other via arrow keys.
  For Example: "You have moved an item from To-do column to In-progress column. Use the arrow keys to move, space bar to drop, and escape to cancel."
• When user drop the issue.
  For Example: " You have dropped the issue. You have moved the issue from To-do column to In-progress column".

The First instruction regarding the Draggable item should be associated with the issue element via aria-describedby attribute in 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.

Note: The above implementation is referenced from the Jira cloud. Please refer to following page to understand the drag & drop functionality implementation in Jira cloud so the behaviour is consistent in Jira DC as well.

https://test400.jira-dev.com/jira/software/projects/SDDHRJ/boards/23

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

Screenshot

Screen recording

Screen Recording 2022-02-16 at 5.06.43 PM.mov

Workaround

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