Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Indent list keyboard shortcuts inconsistencies #7051
Follow up to #4181
For accessibility reasons, the Tab key in Gutenberg should keep its native behavior which is navigating through focusable elements. This is the reason why #1826 introduced new shortcuts to increase/decrease the list items indentation in the List block.
As mentioned in #4181 (comment) the Classic Editor and Gutenberg need a different behavior, for a simple reason: in the Classic Editor, there's just one editable area. Users can always press Enter or "exit" the list by other means and have the Tab key back to its default behavior.
Instead, in Gutenberg there are multiple editable areas (the blocks) and the Tab key needs to preserve its native behavior to allow navigation through the UI avoiding a "keyboard trap".
However, there are a few issues.
The new shortcuts work this way:
Where meta means control on windows/linux and command on mac. For keyboard layouts without squared brackets
The first issue is that on macOS (not sure on linux)
The second issue is that while the List block uses the new
The third issue is that none of these shortcuts are visually exposed in the UI. #6605 added some shortcuts to some tooltips in the toolbars:
However, the ones related to indentation are not displayed (see also #6195 ):
Ideally, also the tooltip text should be consistent.
Additionally, in the Custom HTML block the Tab key is used for indentation: that makes a bit more sense since this block is actually a code editor. To Tab away from the block, users need to press Escape first, not ideal but that's the same trick used in other code editors in core.
I'd like to discuss this issue during next accessibility team meeting. Also WCEU would be a nice opportunity for some live conversations.
referenced this issue
May 31, 2018
referenced this issue
Aug 1, 2018
referenced this issue
Sep 4, 2018
Some feedback from a user with 2 ubuntu computers (and 2 keyboards) both with:
One of them (Keyboard X) has a 104 Key QWERTY keyboard, has both square brackets and meta key, default layout for ubuntu.
The other (Keyboard Y) is a thinkpad T450; I don't think it has a meta key on it.
While not focused in a specific block but still on an page in editor mode, meta + m creates a bookmark.
IBM has some suggestions and background.
referenced this issue
Sep 19, 2018
Let me try to help make this issue more actionable and note that I am happy to help test and move actionable items into separate issues if needed.
The first issue is that on macOS (not sure on linux) `meta+[` and `meta+]` conflict with the native shortcuts browsers use to navigate to the previous / next page.
I did a quick test for this and found that on my Mac (macOS 10.13.6)
A keyboard shortcut for indentation would be handy, but I'd recommend to not use Tab.
Source: #4181 (comment)
The second issue is that while the List block uses the new meta+[ / meta+] shortcuts, the Classic block (TinyMCE) doesn't and still uses the Tab key. This is inconsistent and confusing for users.
It sounds like you are advocating to not use the Tab key for list indentation but then you say it is inconsistent and confusing if different keyboard shortcuts are used instead of the Tab key. I don't have a strong preference, and I also see that it seems like it might be a hot topic with opinionated past discussion (not in a bad way) and because of that I would like to observe that if Tab and Shift+Tab are used for indentation the same way they are in the Classic Editor that would be a point for consistency and users should be able to press Enter - Backspace or "exit" the list by other means and have the Tab key back to its default behavior the same way it has worked in the past. It will also solve any possible conflicts for
The third issue is that none of these shortcuts are visually exposed in the UI. #6605 added some shortcuts to some tooltips in the toolbars.
Tested with WordPress 4.9.8 and Gutenberg 4.0.0-rc.1 and confirmed that keyboard shortcut tips are not exposed in the UI for
@designsimply Thanks for testing and for your thoughts.
I wouldn't have objections to pair the behavior with what Classic Editor does. The problem is in Gutenberg pressing Enter creates a new block. That's not necessarily what users want to do. They just want to exit the list. If that can be changed then great, but I doubt it will as it's one of the main Gutenberg features.
Instead, Gutenberg introduces a new UI with plenty of controls that need to be easily navigable. Tab is the standard for keyboard navigation. To me, seems trying to explore a new solution seems more appropriate.
I appreciate the want for Tab to move through the controls/content of Gutenberg consistently, and I do agree that maintaining a good Tabing experience overall is a good plan.
In a few specific cases though, not using tab is inaccessible to many more users who expect it to behave like many other editors on the web, like the WordPress Classic Editor they may have been using for years, and like many native content-editing applications like Word behave. For autocomplete and list item indentation, using/restoring an override for Tab/Reverse-Tab seems worth it to me. In those rare scenarios we override Tab behaviour we should provide an obvious escape hatch (Esc key works for me) that would allow the user to move out of the "Tab-trap" and use Tab normally again.
That's the best compromise for the largest group of users to my mind.
Having spoken to other Gutenberg developers about this, it was understood that preserving Tab behaviour in general was a good idea and worth doing, but in a few specific cases it caused more confusion and usability issues than it solved. Software design is often a trade-off, and I think in this case we should accept this reduction in Tab consistency, but again design an escape-hatch.
In case it helps, I think of it like this: pressing Enter twice from a list in the Classic Editor moves you from editing a list into editing a paragraph and pressing Enter twice from a list in Gutenberg moves you from editing a list into editing a paragraph. In this context, the action of exiting the list seems the same to me (regardless of if you are in a block or not).