Uploaded image for project: 'Jira Service Management Data Center'
  1. Jira Service Management Data Center
  2. JSDSERVER-11610

Business Services/Create Objects : Expand/collapse icon Inaccessible by keyboard and no conforming alternative.

    XMLWordPrintable

Details

    Description

      Issue Summary

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

      Element:

      • Expand/collapse icon

      Location:
      Present on the left navigation

      Steps to Reproduce

      1. Launch the URL
      2. Navigate to the left navigation area.
      3. Observe the elements such as "Hardware", "Software", "Organization" and "Configuration" have expand/collapse icons, present in the left navigation area.
      4. While using tab functionality through the left navigation panel we can observe that keyboard support is missing for expand/collapse icon.

      Actual Results

      In the left navigation panel for the Object in the Object schema, the element expand/collapse icons have missing keyboard support. When the keyboard-only users and screen reader users navigate to the Objects such as "Business services ", "Hardware" etc. they receive the focus, but the icon element which expands the objects does not receive the focus. The expand collapse icon elements are active with the mouse click. This will make the keyboard only users difficult to use this feature.

      Expected Results

      The interactive element should receive keyboard focus and screen reader focus. Here's how the element could be made more accessible :

      • Assign a role="button" to the icon element, as the behaviour is moreover like a button.
      • The property such as: aria-expanded="false" - indicates that the container controlled by the disclosure button is hidden and aria-expanded="true" - Indicates that the container controlled by the disclosure button is visible.
      • Ensure the expand/collapse icon is associated with the object which is to be expanded, eg. when the screen reader is on the expand icon for "Hardware", it should announce "Expand Hardware".

      An example could be found at: https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-faq.html

      Screenshot

      Screen Recording

      Screen Recording 2022-05-31 at 5.24.27 PM.mov

      Workaround

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

      Bug Ref: 749930

      Bulldog Ref: JSMDC-13295

      Attachments

        1. after_fix_ins.mov
          10.58 MB
        2. QA JSDSERVER-11610.mov
          8.32 MB
        3. QA JSDSERVER-11610.png
          QA JSDSERVER-11610.png
          499 kB
        4. Screen Recording 2022-05-31 at 5.24.27 PM.mov
          9.65 MB

        Issue Links

          Activity

            People

              ac25cb55d206 Oleksandr Zghonnyk
              12b69dcabe29 Matthew Brennan
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Backbone Issue Sync