Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-93365

Create new page | Insert files: Tab not programmatically determined

    XMLWordPrintable

Description

    Issue Summary

    In "Insert image and files", the "Attached to this page", "Image from this web" and "Search on the other web" buttons are not programmatically determined as a tab

    Steps to Reproduce

    1. Navigate to the mentioned page
    2. Navigate to the "Insert more content" button and activate it.
    3. Navigate to the "Insert images and files" option and activate it.
    4. Using a screen reader, navigate to the mentioned elements in the main content area of the page.
    5. Observe that the elements are not identified as tabs and state tabs are not announced as well.

    Screenshot

    Actual Results

    The "Attached to this page", "Image from this web" and "Search on the other web" buttons are not programmatically determined as tabs. Also, the number of tabs is not programmatically determined. On activating the elements, the related content gets dynamically updated below and visually an underline appears on the selected element to convey the state. Although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users.

    Expected Results

    Apply the following changes:

    • Set the role="tablist" for the <div> tag containing the elements that behave as a tab.
    • Specify 'id' attribute for the container of visible text that determines the name of the tablist. Reference the value of the 'id' attribute correctly via the 'aria-labelledby' attribute of tablist.
    • Set the role="tab" for the <button> tags used for displaying "Attached to this page", "Image from this web" and "Search on the other web". In addition, specify the ARIA attributes for tabs, such as “aria-controls” and “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> tags used to display the content of the respective tab. Reference the value of the 'id' attribute correctly via the 'aria-controls' attribute of each tab.
    • Specify an 'id' attribute for the <button> tags used to display each tab. Reference the value of the 'id' attribute correctly via 'aria-labelledby' attribute of each tab panel.
    • Set the role="tabpanel" for the <div> tags displaying the contents associated with the "Attached to this page", "Image from this web" and "Search on the other web" tabs.
    • As best practice, provide tabindex="0" attribute on the container of the tab panel.

     Refer to the below link for implementation: 
    https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html

    Workaround

    Not available 

    Environment 

    MacBook Pro (16-inch, 2019)
    macOS 13.4.1 (c) (22F770820d)
    Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
    Firefox- Version 114.0 (64-bit)
    Safari- Version 16.5.2 (18615.2.9.11.10)
    JAWS- Version 2023.2306.28
    NVDA- Version 2022.2.2
    Voiceover - Version Latest

    Attachments

      Issue Links

        Activity

          People

            zxu2@atlassian.com Zac Xu
            b4488184f7d2 Rahil Shaikh
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: