Surface keyboard shortcuts when modifier keys are held

[jasmussen]

This is related to #13663, and attempts to tackle the same issue. It is unobvious for users how to navigate the various aspects of the interface using primarily keyboard shortcuts, and the "Keyboard Shortcuts" sheet in the More menu is insufficient to surface this. Let's discuss ways we can make keyboard shortcuts more obvious to users.

Surface keyboard shortcuts when modifier keys are held

The first idea comes courtesy of Enrique Sanchez (@enriquesanchez) who submitted an idea for improving this:

The idea is that the keyboard shortcut is surfaced when the accesskey is pressed. This requires some additional work around customizing and improving the accesskey interface in the editor.

But it seems like a first step to explore could be to show the keyboard shortcut as a little bubble tip on top of any button that has a shortcut, when you press and hold the modifier keys. For example the Block Navigation button has the keyboard shortcut ^⌥O — this button would show O when you press and hold ^⌥.

Is this feasible as a first step, or do we need to look further into accesskeys? Please share your thoughts.

[karmatosed]

I wouldn't be against seeing it explored visually, but I do worry about it being an incredibly complex visual to navigate. That said, I think this in some respects is a chosen 'mode' so cognitive load negated. I would like to see some different explorations to yellow notes, they feel a little to me like someone has gone a little overboard with post-its. I love post-its but maybe not as indicators of keys.

[afercia]

Quickly discussed during today's accessibility meeting, agreed it would a nice to have, but not crucial. We do think it would be helpful, however. Also, the general idea could be explored further e.g. pressing a key could reveal other things in the interface (block type breadcrumbs? other?)

[enriquesanchez]

To add a bit more context, this idea borrows from the concepts of the accesskey attribute. While it was never standardized, it provides a lot of functionality with a very simple implementation. The goal here is to try to replicate some of that functionality.

Let's say, hypothetically, that ctrl + alt is our modifier key. Pressing it would reveal little tooltips on top of the different items on the page that have a shortcut assigned to them. This tooltip will show the additional key needed to perform a particular shortcut. The outcome is that the user only needs to memorize the modifer key.

My assumption is that a feature like this will benefit new/casual users and particularly those with cognitive disabilities, since they will no longer have to memorize multiple shortcuts in order to navigate and use Gutenberg. I believe power users that want to become more efficient will also appreciate this feature.

That being said, the idea of having a single modifier key for all of our shortcuts is simply wild, as there would be countless conflicts between OS, platforms, browsers, AT, etc.

Ideally, we could simplify and standarize our modifier keys in a way that we only end with a couple that are easy to memorize and perform. While not a perfect solution, I feel it's one that gets us closer.

Also, the general idea could be explored further e.g. pressing a key could reveal other things in the interface (block type breadcrumbs? other?)

This is such an interesting concept! I love it.

[melchoyce]

Let's get this into a PR.

[afercia]

For inspiration: just noticed the new Slack version (4.0.0) is exploring something similar.

On a mac, press and hold Cmd for more than 1 second and you will see the additional keys to press to switch workspace. In this case, the keys are the numbers 1, 2, and 3. Screenshot: