Issue Summary

The tabbing order does not follow the visual order of the elements where the "Invite people to edit with you" button receives keyboard focus before the first interactive element.

Steps to Reproduce

1. Navigate to the header and activate the "Create" link.
2. Navigate to the main content area.
3. Tab through the section to observe that the tabbing order is not following the visual order of the elements as mentioned.

Screen Recording

Screen Recording 2023-08-14 at 2.13.15 PM.mov

Actual Results

Illogical tabbing order is found on the page. The tabbing order does not follow the visual order of the elements. The interactive elements receive the keyboard focus in the following illogical order:

1. "Profile picture for admin" button
2. "Invite people to edit with you" button
3. Text format dropdown 

This illogical tabbing order will create confusion for keyboard-only users.

Expected Results

Place the content of the webpage in the correct sequence in the source code as it appears visually. Move the content in the page source in the mentioned order to ensure that the content is available in the correct order. CSS can be used to maintain the presentation of the page.
 

1. "Profile picture for admin" button
2. Text format dropdown
3. "Bold" link

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