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

View Issue: Tab widget is missing appropriate role and attributes

    XMLWordPrintable

Details

    Description

      Issue Summary

      The links such as "All", "Comments", "Work Log" and so on present within "Activity" accordion are behaving as tabs with manual activation. This tabs are missing appropriate role and attributes.

      Steps to Reproduce

      1. Open the “View Issue“ page.
      2. Navigate to "Activity" accordion present in the main content area and activate it.
      3. Activate mentioned links. Observe it is behaving as a tabs but not coded as such.

      Screenshot

      Actual Results

      The mentioned links appears and functions like a tab/tabpanel interface but missing required ARIA role and attributes. As a result if interactive elements are missing required role and attributes then the functionality will not be exposed by screen reader software.

      Expected Results

      Fix this issue by using the following role and attributes:

      • The element that serves as the container for the set of tabs should have role tablist.
      • Each element(contained within the element with role tablist) that serves as a tab should have role as “tab”.
      • Each element that contains the content panel for a tab has role tabpanel.
      • Each element with role tab has the property aria-controls referring to its associated tabpanel element.
      • The active tab element has the state aria-selected set to true and all other tab elements have it set to false.
      • Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.
      • If the tablist element is vertically oriented, it has the property aria-orientation set to vertical. The default value of aria-orientation for a tablist element is horizontal.
      • Set tabindex="-1" in the source code of inactive tabs. Ensure that these tabs have roving tabindex property.

      For working implementation of tabs with manual activation please refer this link https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual

      Workaround

      Not Available.

      Environment

      MacBook Pro (14-inch, 2021)
      macOs Sonoma 14.2.1
      Chrome - Version 121.0.6167.85 (Official Build) (arm64)
      Firefox- Version 92.0 (64-bit)
      Safari- Version 17.2.1 (19617.1.17.11.12)
      JAWS- Version 2022
      NVDA- Version 2021.2
      Voiceover - Version Latest

      Attachments

        Activity

          People

            Unassigned Unassigned
            2f731c2c22ce Rohan Sakpal
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated: