Widgets Editor: Edit buttons in Block areas inspector move focus unexpectedly

[enriquesanchez]

Describe the bug
When pressing one of the 'Edit' block area buttons in the inspector, users are not made aware of what will happen and this can result in disorientation and focus loss, particularly affecting users of assistive technology.

You'll also notice in the gif above, that while selecting 'Footer #2 Edit' takes me to that block area, it is kept in its collapsed state and I still have to Tab twice in order to now be able to edit it.

Expected behavior
I recommend we provide a clearer description to users of AT of what will happen if they select the button ('Click here to move navigate to the Footer #1 block area').

Once the user selects one of these 'Edit' buttons, the block are it navigates to should be expanded by default so users can start editing right away.

I also can't think of any other example where we have a similar navigational pattern in the block editor, so it may also be worth reconsidering why these exist in the first place. It's also very similar in functionality to the 'Outline' menu:

...so I wonder if we can instead merge these two and reduce complexity.

[afercia]

Yes the labelling is an issue as it doesn't describe the underlying action. Basically, these are "skip buttons" that move focus to the area allowing keyboard users to jump to one of the areas. However, they're labelled "Edit" which is not that correct. Worth also reminding that if we want to improve these buttons labelling / description, the visible label must match the accessible name to allow speech recognition software users to use these buttons. The best option would be to change the visible button text.

However, the labelling isn't the only problem. Seems to me there are cases where moving focus doesn't work as expected, leading to further confusion (also considering other keyboard accessibility concerns raised up in other issues).

For example:

• collapse all the area panels
• switch the widget editor to "Select mode" by pressing the Escape key
• at this point, the selected block will display the "breadcrumb button" and both the button and the associated area will have a focus style, screenshot:

• now click on the "jump button" in the sidebar that is associated with the selected area
• the breadcrumb button doesn't have a focus style any longer
• the focus style is set only to the area panel thus indicating that's the focused element, screenshot:

• at this point, since the UI is telling me the panel is focused, I'd expect pressing Enter or Spacebar to open the collapsed panel
• instead, pressing Enter or Spacebar does nothing
• in this situation, it's not very clear what action keyboard users should take to be able to open the collapsed panel

Overall, I'm also wondering if there's really the need of the buttons in the sidebar. While I understand the good intent to help keyboard users and to provide all users with a quick way to click-and-get the area they want to edit, I'm not sure this feature is really needed.

Keyboard users can just tab to the area the want to edit.
Mouse / touch users can quickly scroll the page and find the area they want to edit.

Overall, considering this feature doesn't seem ready and maybe doesn't add great value, I'd consider to remove it at least for this first version of the Widgets editor and maybe refine and revisit later.

[talldan]

#25943 removed the edit buttons (and block area panels from the sidebar completely), so I think this can be closed now.