Difficult Keyboard Navigation in Stylebook

[joedolson]

Description

It is very difficult to navigate between a block and the style settings for the block using the keyboard. There needs to be a mechanism to navigate from a given block in the stylebook and the settings for that block and vice versa.

Right now, selecting a block in the stylebook automatically moves focus to the "Back to previous view" button, which gives the impression that it can be used to go back to the block - but that's not what that button does.

I think that selecting a block should instead move focus to a 'return to {block name}' button, so that the user is immediately given orientation on how to get back to the block they were viewing.

Additionally, activating the stylebook leaves focus in the style editor on the Stylebook button. I think that this should behave a bit more like a modal and move the user's focus into the stylebook, focused on the close button.

Coupled with easier navigation to get from the block preview to its settings, this would make handling the stylebook from the keyboard fairly easy. As it is now, the process to activate the stylebook, find the stylebook, then return to the stylebook to find another block after making changes is very labor intensive.

@annezazu

Step-by-step reproduction instructions

1. Using the keyboard, open the stylebook. Note the unchanged focus position.
2. Using the keyboard, navigate from the Stylebook toggle to the Stylebook. (Easiest path is probably `Ctrl + `` keyboard shortcut, but that's not available to all users.)
3. In the Stylebook, navigate to a preview.
4. Hit Enter to select the Stylebook. Note new focus position.
5. Repeat process to return to the Stylebook.

Screenshots, screen recording, code snippet

No response

Environment info

• Gutenberg 15.1.0
• WordPress 6.2-beta1-55308

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

[annezazu]

Calling on a crew to dive in and adding to the 6.2 board @tellthemachines @apeatling @andrewserong.

[andrewserong]

Great description, thanks for opening this one!

I think that selecting a block should instead move focus to a 'return to {block name}' button, so that the user is immediately given orientation on how to get back to the block they were viewing.

I like the idea of seeing if we can have an extra button to return to the block in the style book if the style book is open, perhaps something like return to style book or show block in style book?. In terms of the existing button, I think it might be good to still preserve the navigation behaviour of that particular button as-is so that folks can navigate through the block hierarchy without the navigation button unexpectedly doing something different based on whether the style book is open. What do you think?

There might need to be a bit of design tweaking for how these buttons are displayed, so I'll add a design label to this issue, as it'd be good to get some designer feedback, too, I think.

For design feedback:

• In the above screenshot, where could we place a show block in style book or return to style book button in the right hand sidebar so that a user can quickly reveal the selected block in global styles within the style book, and shift focus to it? (If this seems like a reasonable approach to take)

I think that this should behave a bit more like a modal and move the user's focus into the stylebook, focused on the close button.

What if when you opened the style book it shifted focus to either the button of the first tab in the style book (Text), or alternately the first block in the list (Headings)? That might help it behave a bit more like the list view button. I was also wondering if the Escape key should close the style book as an easy way to back out?

[andrewserong]

I've opened a PR over in #48151 to address part of the issue described here, namely the following:

Additionally, activating the stylebook leaves focus in the style editor on the Stylebook button. I think that this should behave a bit more like a modal and move the user's focus into the stylebook, focused on the close button.

The PR doesn't look at returning from the global styles sidebar back to the style book, as I think that'll require a bit more exploration to come up with a solution.

[ndiego]

Given that WordPress 6.3 Beta 1 is tomorrow and there has been no action on this issue, I am going to remove it from the 6.3 Project Board.