Issue Summary

The floating toolbar with buttons such as "Go to link", "Edit" and "unlink" does not have an appropriate reading order.

Steps to Reproduce

1. Navigate to the header and activate the "Create" link.
2. Navigate to the main content and mention the user 
3. When using the arrow keys focus moves to the mention, floating toolbar appears 
4. Try to navigate to the mentioned toolbar.
5. Observe that the floating toolbar available at the main content area

Screenshot

Actual Results

The floating toolbar with buttons such as "Go to link", "Edit" and "unlink" 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. Make sure that the content that gets available on interactive with mentions is just coded after the mention in the DOM. This will create an appropriate reading order for the users of assistive technologies.

Workaround

Not Available 

Environment 

MacBook Pro (16-inch, 2019)
macOS 13.4.1 (c) (22F770820d)
Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
Firefox- Version 114.0 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2023.2306.28
NVDA- Version 2022.2.2
Voiceover - Version Latest