[Site Editor] The save panel does not receive keyboard focus

[annezazu]

Description

Using NVDA (a screen reader), the secondary Save button in the "Update Design" does not have an aria label making it very difficult to save changes in the FSE experience. A user relying on screen readers would need to both know to search for save and actually search for it in order to properly save changes.

Step-by-step reproduction instructions

1. Setup a site with FSE using a block theme. Use NVDA.
2. Make a few changes to the FSE experience.
3. Select "Update Design" and notice that the "Save" button isn't announced.

Expected behaviour

I expect an aria label for the additional save button.

Actual behaviour

There is no aria label for the save button:

Screenshots or screen recording (optional)

Here's a screen recording shared with consent from the person who I worked with to go over this experience:

save.nvda.mov

WordPress information

• WordPress version: 5.7
• Gutenberg version: 10.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 Blocks

[carolinan]

Hi
When I tested with NVDA and Chrome on Windows 10, I found that the save panel does not receive focus when it is opened.

Steps:
I pressed enter when the Update design button was selected.
I could see that the save panel was opened. But there was no announcement, NVDA did not read out that the panel had opened.
While I could see that the panel had a save button at the top, the button did not have a visible focus style.

I pressed the arrow down key, but instead of reading out the save button, the screen reader read:
"toggle button not pressed, settings"'
-This is the button that is next to the "Update design", now covered by the open save panel.
I tested using tab instead of arrows, with the same result.

For comparison, in the post editor, the screen reader announces the panel (region) and focus is on the first button:
"Editor publish region Publish button"

[annezazu]

Thank you for testing and for the very thorough comment <3

[carolinan]

I tried looking into it but it is not clear to me why there was a decision to use a different markup and different CSS classes in the site editor compared to the post editor.