Specific Board : Close element inaccessible by keyboard alone user.

XMLWordPrintable

    • 8.22
    • Severity 2 - Major

      Issue Summary

      The close details element is not accessible by the keyboard alone and screen reader user.

      Element Name:
      Close details Element
      Location: Present in the Right top section on the details panel.

      Tested URL

      https://instenv-10447-lliy.instenv.internal.atlassian.com/secure/RapidBoard.jspa?rapidView=9&projectKey=SID&view=detail&selectedIssue=SID-1

      Steps to Reproduce

      1. In the Jira dashboard, Navigate to the "Project " menu link in the header section.
      2.  Navigate to any project and activate it.
      3.  In the left panel, select "Kanban board" board.
      4. In the "Kanban board" dashboard under the "TO DO" list select any bug which with open a details section on the right side of the page.
      5. Navigate to the Close element in the Right section of the Details panel which is available.

      Actual Results

      In the details section for the available bugs, the "Close details" element which is used to close the details panels do not receive keyboard alone and screen reader focus. When the element is activated via mouse click the details panel closes. 

      The element is coded into <span class="ghx-iconfont aui-icon aui-icon-small aui-iconfont-close-dialog">Close detail ( T )</span> incorrectly.

      This makes it keyboard-only and screen reader users difficult to access close element to close the details panel.

      Expected Results

      Following are the expected keyboard interactions.

      • The interactive element "Close details" should be able to receive keyboard focus and the screen reader focus.
      • The screen reader should announce the element as a "Close details button"
      • On closing the details panel the focus should go to the selected details in the Todo section.

      Apply the following suggested fixes in the source code.

      • Provide a clear & descriptive label and role to the checkbox element. For Example: 
      1. role="button" or code the element into <button> attribute.
      2. Additionally add aria-label="Close details tab" to the button.

      Screenshot

      Screen Recording

      JRASERVER-73384.mov

      Workaround

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

      Bug Ref: 733634

        1. JRASERVER-73384.mov
          7.51 MB
          Akhilesh Paradhi
        2. Screenshot 2022-03-17 at 6.27.22 PM.png
          1.07 MB
          Akhilesh Paradhi

            Assignee:
            Oleksandr Stoliar
            Reporter:
            Matthew Brennan
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: