Active sprints page: Drag and drop issues feature is not accessible for keyboard & screen reader users.

XMLWordPrintable

    • 8.2
    • Severity 2 - Major

      Issue Summary

      On Active sprints 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.

      Tested URL

      https://instenv-9109-pfsh.instenv.atl-test.space/secure/RapidBoard.jspa?rapidView=1&projectKey=TES&selectedIssue=TES-4

      Steps to Reproduce

      1. Navigate to Jira homepage.
      2. Navigate to any project. For Example : Test-QA
      3. Navigate to "Active sprints" 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

      Screenshot

      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

            Assignee:
            Yurii Travenko (Inactive)
            Reporter:
            ssuryavanshi (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: