Issue Summary

On "Find an Issue", the drag and drop functionality to reorder columns is not accessible for keyboard and screen reader users.

Note : This issue is found on "Basic" and "Advanced" mode.

Steps to Reproduce

1. Open any project. 
2. Activate "Issues" button in the header section and select "Search for issues" option.
3. Navigate through page using keyboard or screen reader. 
4. Observe that the drag and drop functionality to reorder columns is not accessible for keyboard and screen reader user.

Screen Recording 

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

Actual Results

When the screen reader users navigate to the column headers, the drag-and-drop functionality is not accessible for the keyboard-only and screen reader users.

Observe that the mouse users can perform the drag and drop using mouse click and gold to lift the element and using mouse interactions can change the position of teams.

The same interactive elements are not accessible for screen reader and keyboard-only users and no alternate method is provided to perform this operation.

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.

Following are the expected keyboard interactions.

Provide buttons for drag and drop functionality using  <button> element. Buttons should receive Keyboard as well as a Screen reader focus. 

The following could be a referred for keyboard interactions:

1. Tab to move through the buttons elements. Provide accessible names for buttons.
2. Space to select an item.
3. Arrow keys to switch between the positions.
4. Enter to Drop. 

Refer following for screen reader behavior:

1. Make sure to provide off-screen instructions and make the instructions announced using aria-describedby attribute along with its label.
2. When the buttons are activated using “Space” the status such as “Lifted” should be announced for the screen reader users.
3. When users move the position of the buttons using arrow keys the position/ Rank should be announced by the screen reader.
4. When the user enters the space key disengage the drag functionally and set the current position of the button. Make sure the same is conveyed to the screen reader users too.

Alternatively, Provide alternate methods to perform the task of changing ranks of the components, such as by providing functionality where the user can select the team and change its rank by selecting its position manually using dropdown elements of it.

Make sure the functionality is accessible for screen reader and keyboard only users too.

Workaround

Not available

Environment

MacBook Pro (16-inch, 2021)

macOS Sonoma Version 14.1

Chrome - Version 119.0.6045.159 (Official Build) (arm64)

Firefox- Version 93.0 (32-bit) Safari- Version 17.1 (19616.2.9.11.7)

JAWS- Version 2023

NVDA- Version 2020.3

Voiceover - Version Latest