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

Business Services/Create Objects : Button 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.

      Steps to Reproduce

      1. Launch the URL
      2. Navigate to the "Name" section, which is present below the "Filter Search" Combobox field.
      3. Observe that while using tab functionality in the "Name" section, the elements such as "Sort by name", "Billing Service", "Email Services" etc. do not receive keyboard support.

      Actual Results

      In the main content area, there are elements such as "Sort by name", "Billing Service", "Email Service", "ERP Service", "Payroll Service", and "Public Service" does not have keyboard support. When the keyboard-only users or screen reader users navigates the webpage with the help of the keyboard, the elements get skipped after "Advanced" and it directly goes to the "Refresh" link. This will make it the keyboard-only users difficult to use this feature.

      Expected Results

      • Modify the scripts of the tabs to ensure that the tabs are accessible for all users.
      • Set the role="tablist" for the <div> element containing tabs.
      • Set the aria-labelledby="tablist-1" for the <div> element containing tabs.
      • Set the role for the <div> element used for displaying "Sort by name", "Billing Service", etc as “tab”. In addition, specify the ARIA attributes for tabs, i.e “aria-selected”. (The value of the aria-selected attribute  needs to change on the basis of the currently active tab.) Set aria-selected=”true” for the active tab.
      • Specify an “id” attribute for the <div> element used to display the content of each tab. In addition, ensure that the value of the “id” attribute is referenced correctly via the aria-controls attribute of each tab. 
      • Set the role=“tabpanel” for the <div> elements displaying the contents associated with "Sort by name", "Billing Service", etc tabs. A working example of accessible tab functionality can be found at https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html

      Screenshot

      Screen Recording

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

      Workaround

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

      Bug Ref: 748634

      Bulldog Ref: JSMDC-12819

      Attachments

        1. tab.png
          tab.png
          680 kB
        2. Screen Recording 2022-05-31 at 5.54.20 PM.mov
          4.98 MB
        3. 11604-QA-Verification.mov
          27.13 MB

        Issue Links

          Activity

            People

              a504d30b4d3f Roman Litvishko (Inactive)
              12b69dcabe29 Matthew Brennan
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Backbone Issue Sync