Status: Inappropriate focus order for the toolbar.

Issue Summary

The DOM order of toolbar popup doesn’t match with the visual focus order

Steps to Reproduce

1. Edit the page 
2. Navigate to "Insert more content" and activate the link, dropdown gets displayed and then activate the "Status" option in the dropdown.
3. Add the details and activate the "insert" button.
4. "Status" has been created on the editor and edit the inline macro and goto the toolbar

Actual Results

While navigating with the keyboard tab key, when user try to navigate to the triggering element for the status toolbar dialog, the focus does not move to the dialog first it directly shifts to the "Publish" button which is incorrect. But visually the dialog "status toolbar" should receive the keyboard focus after that the publish should receive the focus.

The code of quick "Publish" is placed before the code of Status toolbar incorrectly. This makes keyboard-only users difficult to understand the correct focus order on the page.

Expected Results

• When user navigates to the status macro and activates the status toolbar dialog, the focus order should be updated to follow a logical (reading) order. The Status toolbar element should receive the keyboard focus first and then "Publish" button should come in the focus order.
• The code of the Status toolbar should be placed before the code of "Publish" button in the DOM panel.

Screen Recording

Screen Recording 2022-06-23 at 10.59.00 AM.mov

Screenshot

Workaround

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