Focus is not kept inside the multi-save save panel

[carolinan]

Description

This refers to the save panel where you can select and save changes to template parts, site blocks, and the page/template itself either in the site editor, block editor or template editor.

When the panel is open and focus is inside the panel, it is possible to leave the save panel without closing it by tabbing backwards, or tabbing forwards from the last item.
The focus is not kept inside the open panel. This is inconsistent with other save panels.

This means that you can navigate around the editor, and once you reach the buttons in the right part of the top bar, (for example, preview or save draft) the save panel is still open and covers the buttons.

---

-It is unclear to me why there are several different panels used for saving, to avoid this, there should be one, accessible and reusable panel.

---

Step-by-step reproduction instructions

Open an editor view that uses this panel.
Make a change and open the save panel. Make sure that the focus is in the panel. You may need to click inside of it, or enable
#30873
Use tab to navigate through the panel.
Confirm that when you move backwards all the way past the top, or forwards from the last item, focus moves outside the panel and the panel remains open.

Expected behaviour

Focus needs to be kept inside the panel until the user closes it.

Actual behaviour

Focus is not kept inside the panel.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: tested with trunk at 7c7f866, and Focus save button when entities save states panel is opened #30873
• Are all plugins except Gutenberg deactivated? yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 blocks

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome Version 89.0.4389.128

[vdwijngaert]

I fixed this by adding the withConstrainedTabbing HOC, as is the case with the pre-publish panel in the post editor.

PR: #31136