Page tree: List elements not announced correctly in safari with VoiceOver.

Issue Summary

In Confluence sidebar, the list items used inside page tree section are nested incorrectly in the source code.

Steps to Reproduce

1. Turn on VoiceOver screen reader.
2. Navigate to Confluence homepage.
3. Navigate to "Spaces" menu in header section.
4. Activate any space link from the menu.
5. Navigate to the Page tree section in left sidebar.

Actual Results

While navigating with VoiceOver in safari, when user navigate inside the page tree section & expand the sub-pages, the screen reader doesn’t announce the list of items & the level of the list.

Following are the possible reasons of the current behaviour

1. The unordered list is nested incorrectly in source code.
2. The nested <ul> elements are not direct children of the
   <li> elements.
3. The CSS attribute "list-style-type:none" is causing problems in safari for list items.

This makes screen reader users difficult to understand the page tree structure effectively.

Expected Results

The screen reader should announce the list items & the level of nesting to the screen reader users.

Apply following fixes in the source code

1. The unordered list elements should be nested correctly in the source code.
2. The nested <ul> elements should be direct children of <li> elements.
3. Remove the CSS attribute "list-style-type:none" from the code.

Screenshot

Screen recording

Screen Recording 2022-04-12 at 5.06.18 PM.mov

Workaround

Provide role="list" to all the <ul> elements present inside page tree section.