Side Navigation | Content Tree: The label defined for the multi-select button is excessively long

XMLWordPrintable

    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The multi-select button label used to select multiple items is excessively long.

      Steps to Reproduce

      1. Open the Confluence Cloud homepage.
      2. Open any space and navigate to the Content tree in the sidebar navigation.
      3. Using the Tab key, navigate to the multi-select button next to the "Content" section header.
      4. Observe that the accessible name announced by the screen reader is excessively long.

      Screenshot

      Screen Recording

      Screen Recording 2026-09-10 at 11.20.17 AM.mov

      Actual Results

      The label for the multi-select button in the sidebar content tree announced by assistive technologies is overly verbose. This occurs because the entire instructional sentence, such as “Select multiple items to edit. Only items you have permission to modify will be affected.”, is rendered directly inside a <span> element within the <button> tag, causing the browser to compute the full text as the button’s primary accessible name.

      As a result screen reader users are forced to listen to a lengthy, multi-sentence instruction and permission disclaimer every time focus lands on this button.

      Expected Results

      Ensure the button has a concise, descriptive accessible name. The instructional and permission text should be provided as secondary helper text via an accessible tooltip and "aria-describedby" attributes.

      Apply the following changes ->

      • Add a clear, brief label such as "Select multiple items" using the "aria-label" attribute on the <button> element.
      • Place the instructional text outside the primary button label and mark the container with role="tooltip".
      • Provide a unique "id" to the tooltip container and reference this "id" from the button using the "aria-describedby" attribute.

      Code Snippet:

      <button type="button" aria-label="Select multiple items" aria-describedby="bulk-select-items" ... >
      <span aria-hidden="true" ...></span>
      </button>
      
      <div role="tooltip" id="bulk-select-items"...>Select multiple items to edit. Only items you have permission to modify will be affected.</div>

      Note: This code example is intended only as a general illustration of how to address the violation and should not be considered a complete or production-ready solution. If you have any questions, please attach this ticket to a #help-accessibility request.

      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 - Tahoe 26.6.2
      Windows - 11
      Chrome - Version 152.0.7977.77 (Official Build) (arm64)
      Edge - Version 152.0.4191.66 (Official Build) (64-bit)
      Safari - Version 26.2 (21623.1.14.11.9)
      JAWS - Version 2026
      NVDA - Version 2026.1.1
      VoiceOver - Latest version

              Assignee:
              Nick Bourlier
              Reporter:
              Anusooya . (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: