Create a New Page - Modal : Reading order of static content changes meaning

Issue Summary

The screen reader's reading order of the content changes the intended meaning of the content.
Elements:
1) Search results from the dropdown.

Location:
Search results from the "Select space" dropdown.

Additional details:
The displayed search results are available for screen reader users at the end of the modal content.
whereas, they should be available just after the respective dropdowns.

Steps to Reproduce

1. Turn on the screen reader software.
2. Navigate to the Confluence homepage.
3. Navigate to the "Create" button inside header section & activate it.

Actual Results

While navigating with the screen reader, when the user tries to navigate to the input field "Select Spaces" that triggers the dropdown element, the focus does not move to the dropdown first it directly shifts to the next interactive element i.e list items which are incorrect. But visually the dropdown elements should receive the keyboard focus after that the list items should receive the focus.

The code of quick List items is placed before the code of dropdown elements incorrectly. This makes it keyboard-only users and screen reader users difficult to understand the correct focus order on the page.

Expected Results

When screen reader users navigate page content, they hear the content in the order of the code in the DOM.

• When the user navigates to the input field "Select Spaces" that triggers the dropdown element, the focus order should be updated to follow a logical (reading) order. The dropdown element should receive the keyboard focus first and then the next element i.e List items should come in the focus order.
• The code of the Dropdown elements should be placed before the code of the input field "Description" in the DOM panel.

Screenshot

Screen Recording

Screen Recording 2022-08-03 at 4.14.45 PM.mov

Workaround

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

Bug Ref: 725346