Uploaded image for project: 'Bitbucket Data Center'
  1. Bitbucket Data Center
  2. BSERV-17609

Header : Expandable elements have inappropriate reading order

XMLWordPrintable

    Issue Summary

    The content associated with the "Repositories", "Help", "View your 0 unapproved pull requests", and "Alerts" and so on, interactive elements in the header section do not have an appropriate reading order.

    Steps to Reproduce

    1. Navigate onto the above mentioned page.
    2. Navigate onto the mentioned interactive elements with a screen reader and activate them.
    3. Arrow down onto the expandable content from the interactive elements.
    4. Note that the content associated with them is available at the main content area.

    Screenshot 

    Actual Result

    When the "Repositories", "Help", "View your 0 unapproved pull requests", and "Alerts" interactive elements are expanded, the expanded content of these elements is available at the end of the page for screen reader users. This is because this content is not coded directly after these elements in the DOM. It is instead coded at the end of the page. This inappropriate reading order might disorient the users of screen readers. That the content is available at the end might confuse or mislead them.

    Expected Results

    Content must have an appropriate reading order. Assistive technologies navigate content using the order in which elements appear in the DOM. Hence, make sure that the content is programmatically ordered in such a way that it provides an appropriate reading order to the users of assistive technologies.
    Make sure that the content that gets available on expanding the elements is coded directly after the expandable elements in the DOM. This will create an appropriate reading order for the users of assistive technologies.
    For instance, this will enable them to arrow down onto the expanded content when the interactive elements are expanded.

    Code Snippet

    <button aria-expanded="true">Alerts 1</button>
    <h2>Alerts</h2>
    

    Workaround

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

    Environment

    MacBook Pro (16-inch, 2021)
    macOS Monterey Version 12.4
    Chrome - Version 103.0.5060.134 (Official Build) (arm64)
    Firefox- Version 93.0 (32-bit)
    Safari- Version 15.5 (17613.2.7.1.8)
    JAWS- Version 2023
    NVDA- Version 2023.3
    Voiceover - Version Latest

            39720cea55a1 Khushbu Patel - KT
            773dd3a38dd5 Cynthia Singh
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: