Uploaded image for project: 'Jira Data Center'
  1. Jira Data Center
  2. JRASERVER-73380

Search Issue Left Navbar : Inaccessible by keyboard and no conforming alternate

    XMLWordPrintable

Details

    Description

      Issue Summary

      The dock/undock element is not accessible by keyboard alone and there is no conforming accessible version of the same functionality reachable from the non-conforming page.

      On collapsing the filter section on the left side:
      Element: Dock the filters panel.
      Location: Left side of the page

      Note: On hovering of the left highlighted part of the page, It displays the filter section. Make it accessible even through keyboard navigation.

      Steps to Reproduce

      1. In the Jira dashboard, Navigate to the "Issues" menu link in the header section.
      2.  Navigate to "Search for issues" and activate it.
      3. In the Search dashboard, navigate to "Advanced" in the search navigation bar and activate it.
      4. Navigate to the search input field present in the main content area.

      Actual Results

      In the Search Issues dashboard, the left navigation panel the "Dock the filters panel" panel does receive keyboard focus when the panel is Undocked. When the panel is docked the element receives keyboard focus. 
      The element is coded into <span class="toggle-filter-panel aui-icon aui-icon-small aui-iconfont-chevron-double-right">Dock the filters panel ([)</span> element incorrectly.

      This makes it keyboard-only users difficult to access the docking panel.

       

      Expected Results

      Following are the expected keyboard interactions.

      • The "Dock the filters panel" should receive keyboard focus and screen reader.
      • The elements should get activated with the "Enter" key.
      • When the user docks and undocks the panel the screen reader should announce the actions.

      Apply the following suggested fixes in the source code.

      • Provide a tabindex="0" so that the dock icon could receive focus.
      • Provide a clear & descriptive label and role to the dock element. For Example: 
      1. role="button" or change the source code attribute from <span> to <button>.
      2. aria-label="Dock the filter panel" - when the panel is undocked.
      3. aria-label="Undock the filter panel" - when the panel is docked.

      Screenshot

      Screen Recording

      JRASERVER-73380.mov

      Workaround

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

      Bug Ref: 723732

      Attachments

        1. 73380-after-fix.mov
          43.47 MB
        2. 73380-QA-Verification.mov
          12.56 MB
        3. JRASERVER-73380.mov
          14.25 MB
        4. Screenshot 2022-03-17 at 11.50.08 AM.png
          Screenshot 2022-03-17 at 11.50.08 AM.png
          967 kB

        Issue Links

          Activity

            People

              c3057d0e8d6b Vadym Ohyr
              12b69dcabe29 Matthew Brennan
              Votes:
              2 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: