Skip to content

Improve keyboard navigation between the block inspector and the block content #13663

@jasmussen

Description

@jasmussen

A key point of accessibility feedback centers around difficulty of navigating from the block to the inspector sidebar and back again.

Let's discuss how we can improve that.

Bring the cog to the toolbar

A small first step could be to bring the "settings cog" to the block toolbar. Right now you have to click the ellipsis button and show "Hide Block Settings", which doesn't really do anything other than untoggle the sidebar if visible.

x4ru3mtbqt

If we brought the cog to the block toolbar, this would surface it more visibly as a block option. This button would move focus to the block sidebar, with a visible focus outline, like when you switch regions.

Make it modal, but pinnable

With a cog button in the block toolbar to set focus in the sidebar, the next step to explore might be to make the sidebar behave like a modal. It could work like this:

  • The sidebar is off by default.
  • When you press the cog button, the sidebar opens in a modal behavior. The means it has a drop shadow, and when you click outside or press Escape, it closes and sets focus back on the block you invoked it from.
  • You'd still be able to see the main content in context, despite the behavior being modal.

This would be the default behavior. Google Calendar does something like this:

fyqkas1ffc

We could then add the little "Pin sidebar" button to the main Settings sidebar as well — plugins have these. This would effectively change the behavior back to what we have today. Microsoft Edge does this:

mcdcfat7gj

In this default configuration, you would not have to know keyboard shortcuts other than tab and space to navigate from the block to the inspector sidebar and back again.

Please share your thoughts.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions