Editor Navigation panel: Focus loss when the Actions ellipsis button is removed from the DOM

[afercia]

Description

Prior accessibility feedback outlined several times that focusable elements that are meant to have / receive focus should never, ever, be removed from the DOM, or get hidden, or get fully disabled dynamically. When doing so, a keyboard focus loss is very likely triggered.

Recent changes to the Site editor navigation panel missed, once again, this important point.

For example:

• When a template has been customized, it shows an 'Actions' ellipsis button in the editor navigation panel.
• The ellipsis button toggles a dropdown menu with the 'clear customization' action.
• When clearing, a modal dialog opens for confirmation.
• When confirming, the modal dialog closes.
• At this point, the expected behavior for all modal dialogs is to move focus back to the control that opened it: the Actions ellipsis button.
• However, when clearing is successful, the Actions ellipsis button is removed from the DOM thus triggering a focus loss.

This problem may occur as well in other places in the navigation panel, it's not limited to editing Templates.

Instead of removing the ellipsis button, it should be stay in the DOM and still be focusable. For this purpose, the editor uses a specific pattern: noop the button and add an aria-disabled="true" attribute.

Step-by-step reproduction instructions

• Go to Site Editor > Design > Templates, and select a template, for example 'Blog Home'.
• Observe the editor navigation panel closes automatically and the editor switches to edit mode.
• Open again the editor Navigation panel.
• Observe at the top of the panel there is no ellipsis button. There is only the 'Edit' pencil button.
• Switch again to edit mode, make any edit to the template and save.
• Open again the editor Navigation panel.
• Observe there is now an ellipsis button at the top. Click on it and click 'Clear customizations'.
• A confirm modal dialog oopens.
• Use the keyboard, move focus to the 'Clear' button and press Enter.
• The modal dialog closes.
• Wait for the clearing action to complete successfully (a snackbar notice will appear).
• Observe that the Actions ellipsis button disappears.
• Press the Tab key.
• Observe the tab sequence starts from scratch from the document root (the 'Go to the dashboard WP logo link).
• Expected: focus to be moved back to the control that opened the modal dialog: given the Actions menu cloases, this control should be the Actions ellipsis button.

Screenshots, screen recording, code snippet

Screenshot of the Clear customizations modal dialog open: notice the Navigation panel does show the ellipsis button:

After successful clearing, the ellipsis button is removed froom the DOM:

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

I added the Design label to the issue to bring designers attention to the fact the design of this flow is far from ideal in the first place. Controls that have focus or, like in this case, that are meant to receive focus after some action, must not be removed dynamically from the DOM (or hidden or fuly disabled).