Move Dialog: Tree view not defined programmatically

XMLWordPrintable

    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The tree view structure is not defined programmatically.

      Steps to Reproduce

      1. Open the Confluence Cloud instance.
      2. Navigate to the Sidebar navigation section, expand the "Spaces" control, and open any space.
      3. In the main content area, open any page.
      4. In the main content area, expand the "More actions" control and select the "Move" option to open the Move dialog.
      5. Using a screen reader, navigate through the Select parent item options under the Content section.
      6. Observe that the tree view structure is missing.

      Screen Recording

      Tree View Bug.mp4

      Actual Results

      When screen reader users navigate through the options such as "Select Chirag's Intro", "Select Test", and others in the "Content" section—used to select the parent item for the page—the options are not presented in a tree view structure. Instead, they are announced as individual buttons, with no indication of hierarchy such as parent-child relationships or expandable/collapsible levels.

      As a result, screen reader users are unable to perceive the hierarchical structure accurately and cannot understand or interact with the tree-like organization of the content effectively.

      Expected Results

      Ensure that the tree view structure is conveyed programmatically to screen reader users.

      Apply the following changes:

      • Use role="tree" on the <ul> container element.
      • Use role="treeitem" for each tree node.
      • Use role="group" for containers of nested treeitems.
      • Set aria-expanded="true" or "false" on expandable treeitems to indicate their state.
      • Dynamically update the aria-expanded attribute when users expand or collapse nodes.
      • Use aria-selected="true" or "false" on treeitems.
      • Dynamically update the aria-selected attribute's value to "true"  when users select any option.
      • Support Up and Down arrow keys to move focus between visible nodes.
      • Support Right arrow key to expand a collapsed node or move focus to its first child.
      • Support Left arrow key to collapse an expanded node or move focus to its parent.
      • Support Home and End keys to move focus to the first and last treeitems.
      • Only one treeitem should be focusable using tabindex="0"; others should use tabindex="-1".
      • Move focus programmatically as users navigate with the keyboard.
      • Ensure all treeitems have meaningful labels using visible text or aria-label/aria-labelledby.
      • Structure DOM and ARIA roles to convey the parent-child hierarchy programmatically.

       

      For information on creating accessible tree view structure refer:

      Tree View Pattern

      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 Sequoia 15.5
      Operations - Windows11
      Chrome - Version 137.0.7151.120 (Official Build) (64-bit)
      Safari- Version 18.5
      Firefox- Version 139.0.4 (64-bit)
      JAWS- Version 2023
      NVDA- Version 2025.1.1
      VoiceOver - Version Latest

        1. Tree View Bug.mp4
          12.13 MB
          Chirag Goyal

            Assignee:
            Unassigned
            Reporter:
            Chirag Goyal
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated: