Profile Settings: Incorrect reading order

Issue Summary

The reading order of the "Settings" image button is incorrect.

Steps to Reproduce

1. Navigate to the "Projects" dropdown present in the header section.
2. Navigate to the "View all projects" option and select it.
3. Observe that "View all projects' page has been appeared on the page.
4. Navigate to the "Settings" button and activate it.
5. Using screen reader, try to access the content
6. Observe that content is available at the end of the page.

Screen Recording

Screen Recording 2023-04-28 at 3.04.12 PM.mov

Actual Results

When the “Settings” button is expanded, the expanded content of this button is available at the end of the page for screen reader users. This is because this content is not coded directly after the button in the DOM. It is instead coded at the end of the page. This inappropriate reading order might disorient the users of screen readers. That the content is available at the end might confuse or mislead them.

Expected Results

Content must have an appropriate reading order. Assistive technologies navigate content using the order in which elements appear in the DOM. Hence, make sure that the content is programmatically ordered in such a way that it provides an appropriate reading order to the users of assistive technologies.

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 112.0.5615.49 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest