Create a Space - Create Team Space 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 "Team members" 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.

Note: This issue is also applicable when the focus is set on this search field & the screen reader announces this as Blank.

Steps to Reproduce

1. Navigate to the "Spaces" button present in the header region and activate it.
2. Navigate to the "Create a space" link and activate it. Observe that create a space modal dialog appears on the page.
3. Navigate to the "Team Space" element and activate it.
4. Navigate to the " Team member" element and observe the screen reader announcement.

Actual Results

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

The code of quick "Description" 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 "Team members" 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 input field "Description" 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 3.50.53 PM.mov

Workaround

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

Bug Ref: 725085