Persistent List View: Add a way to focus back to the sidebar via keyboard

[Copons]

This issue is about the Persistent List View experiment (#28637), currently only available in the Site Editor.

The List View can be toggled with a Ctrl+Alt+O shortcut (Shift+Alt+O on Win).
The list is navigable with the arrow keys, and selecting an item will move the focus to the corresponding block.

There is no way to move the focus back to the List View, though (unless tabbing all the way back to it).
The workaround is to toggle the sidebar off and on again, but it's obviously not ideal.

[stokesman]

The regions navigation shortcut Ctrl+~ would help with this but it seems a little broken in the Site Editor. There are times it doesn't seem to work at all (until "reset" by clicking in one of the regions) and it never cycles through all the regions as it does in the Post Editor. I suppose that merits an issue if there's not one already.

Here's an idea that more directly addresses the issue. I noticed the List View can be closed with esc when the focus is within it. Perhaps the keyboard shortcut that toggles the List View should never close it, but instead only open it or focus it when already open. It could then still be closed with esc or of course tabbing to its close button.

[gwwar]

Should focus should be taken away from the Persistent List View for the primary action?

It's more natural to me if space selects the block and scrolls it into view, but retains focus in the persistent list view. Another space should then unselect the block group. This would keep it as a nice toggle action.

We'd probably need to add an explicit command to jump to the selected block in the editor pane, but this may make more sense as we try to add additional actions like delete, insert etc.

[talldan]

A 'Reveal In List View' option in the block settings menu could be an idea:

Though this menu is getting kinda long 😄

If that option had a shortcut (something similar to Ctrl + Alt + O, like Ctrl + Shift + Alt + O) that would be a way to solve this.

[talldan]

Just stumbled upon this issue (again). Thinking on it some more we could also do the following:

• Ctrl + Alt + O always opens List View and focuses the selected block. If List View is already open it just focuses the selected block in List View and List View stays open.
• Introduce a different shortcut for closing list view (if this is even needed).

It would be interesting to head @alexstine and @MarcoZehe's thoughts.

[alexstine]

@talldan I think this very much applies here.

#38311 (comment)

We need to figure out how to not over complicate the shortcuts we have and implement a strategy that always works to navigate around any editor globally. As @MarcoZehe stated, the F6/Shift+F6 is nice because tons of sites/apps already use it.

• Microsoft Office
• Slack (web/app)
• Microsoft Teams (I think)

Basically, the Ctrl+` shortcut already does this but I think adding a more commonly use shortcut could help a lot.

I really like the way you can jump around Slack using F6/Shift+F6 shortcuts. It isn't perfect but it has improved a lot over the years. Navigating around Slack is challenging due to how it visually flows so having this one global shortcut that will jump you from section to section is super helpful.

Let's look at this practically.

1. Open the Block Editor.
2. Open List View.
3. Select a Block.
4. Focus is placed in the Block.
5. Since the List View is a sidebar, press Shift+F6 or Shift+` to place focus in the sidebar. If it could be the Block you just selected, that would be even better.

Honestly, I think the bigger problem here might actually be closing the List View. With this type of global navigation, users may always expect the List View to be accessible via Shift+F6. If this is the case, maybe List View toggle should be a visual change only.

Something to think about...

[stokesman]

If focus is within the List View, it can be closed with Esc. To me, that would be good enough if there is a shortcut that always focuses the List View, as there would be given @talldan’s latest suggestion #29466 (comment) (which is also what I suggested in the latter part of #29466 (comment)).

[alexstine]

I would not like to use Escape at this point due to how screen readers work. Escape has already caused us a lot of trouble in JAWS specifically with the different Gutenberg Modes. For me, it would be good to use anything but Escape.

[talldan]

Improving region navigation sounds like a good idea. It's a bit unloved.

At the moment there are two shortcuts for region navigation. I don't think it'd great to introduce a third, so we'd probably want to look at dropping one or both of those other shortcuts to introduce F6. Apparently the backtick isn't a great shortcut and that's why the other shortcut was introduced - #9227. This might be a good topic to discuss in the a11y team meeting as I don't know all of the past history of region navigation and the shortcuts.

[talldan]

which is also what I suggested in the latter part of #29466 (comment)

@stokesman Oops, sorry I missed that! I still feel like this is a good suggestion and it could always live alongside any changes to region navigation. Unless there are any objections that I missed? The only thing I can see is the point about not using the escape key that Alex mentioned, though that's already how it works in trunk. it could be worth experimenting with a few different options for that.

Btw, the region navigation issue you mentioned in the site editor should be fixed now.

[alexstine]

I'm still not sure we're solving the right problem. I think it is kind of an anti-patern to have disappearing/appearing landmarks. How hard would it be to refactor the List View to only change visually for close/open state? The problem is, you can't have it both ways. Me personally, I think the List View should close after selecting a Block, but I know for a fact this isn't the way this was designed and getting others onboard would be a tricky challenge. Instead, my proposal would be to not modify the DOM and just visually hide the List View on close. With the List View always staying open, it should be no problem for screen reader users to navigate around the page.

My only concern is going to come for low vision users, this may not work well. I just have such a hard time understanding how the editor layout works as it is very visual to begin with. My impression of it is this.

Edit Post > global toolbar > some random buttons such as Publish, Preview, etc.
Block Inserter/List View > list of editable Blocks > Block/Post options sidebar depending.

E.g. the List View/Inserter sidebar is on the left, Blocks in the middle, and Block/Post sidebar on the right.

BTW, nothing I said here was meant to be offensive. I honestly don't know how the editor looks and it would help to know for this as it may help me figure out a better solution. To me, leaving the sidebars always in play would be a good idea but not sure what others think.

[stokesman]

…leaving the sidebars always in play would be a good idea…

I think that may be a more important concern though it seems separate and compatible with the concern of convenience in this issue.

…I think the List View should close after selecting a Block, but I know for a fact this isn't the way this was designed and getting others onboard would be a tricky challenge…

To me that seems worthy of evaluation. For one thing, it would seemingly make the current keyboard shortcut work well enough to obviate this issue.