Gutenberg: Keyboard shortcuts for list items are missing

[skorasaurus]

Similar issues filed: #4181, #5087, #7051, #12142.

While editing a post in Gutenberg, I couldn't figure out how to indent list items by the keyboard which is a habit of mine (and I'd argue many others editors as well).

Describe the bug
No keyboard shortcuts display for the list block.

Mentioned in https://github.com/WordPress/gutenberg/issues/7051 but that issue is not dedicated to this, I decided to make a new issue for this; close if this is too explicit.

To Reproduce
without looking on a separate page of documentation, right now:

1. add a new page or edit a page in Gutenberg
2. add a list block,
3. try to indent a list item using only the keyboard; did ya have to look at the docs :D.

Expected behavior
Personally, the expected action to indent an item in a list block would be done by issuing 'TAB' but that has been decided against for accessibility reasons
That the default behavior isn't used stresses the utility of having the keyboard shortcuts for list actions (outdenting, indenting) available.

Screenshots
see https://user-images.githubusercontent.com/1682452/40778281-f1054ca2-64d0-11e8-953f-704ef1e5ba1d.png

Additional context

• (Update: still present in WordPress 5.0.2)
  (Issue made on CPL time)

[mtias]

While editing a post in Gutenberg, I couldn't figure out how to iNdent list items by the keyboard which is a habit of mine (and I'd argue many others editors as well).

This is quite annoying for me too. It's a bit blocked in that the expected behaviour is to use tabs, but that can interfere with keyboard navigation.

@mcsf do we have other issues for this? Can we consolidate? I'd like to move forwards with using tabs and showing that shortcut in the tooltip.

[skorasaurus]

@mtias - See https://github.com/WordPress/gutenberg/issues/7051 and #4181

[ellatrix]

As noted in https://github.com/WordPress/gutenberg/pull/10744#issuecomment-438634036, the current list shortcuts aren't the best. I think we should update them before making them more visible.

[ellatrix]

@afercia Any ideas for good list indentation shortcuts that don't cash with the browser/OS?

[afercia]

@iseulde I'm afraid there's no _Escape_ 😆 from potential clashes. As mentioned in https://github.com/WordPress/gutenberg/issues/4181#issuecomment-354314096 Google Docs uses Cmd+square brackets and yes, they clash with browsers history navigation on macOS. Also Gmail uses the same combination:

Any keys combination will always have a chance to conflict with browsers, OSes, and assistive technologies shortcuts. Also, users have different needs. The only real solution to this problem is a mechanism to allow users to remap shortcuts based on their own needs. See https://github.com/WordPress/gutenberg/issues/3218. I understand at this point of the release cycle that's not feasible, but #3218 is open since more than _one year_ and it hasn't been prioritized by the team.

At this point I can only suggest to try with two modifier keys. Maybe primaryAlt + square brackets? Not sure about the alternative m shortcuts, they never made too much sense to me. Maybe primaryAlt and some more meaningful letters?

[ellatrix]

What are the action items here?

[gziolo]

You can use tab and tab+shift with Google Docs to indent list items. In my opinion, we should also find a way to support it in a way that doesn't conflict with accessibility. If you check closed duplicates this is the common expectation from people who are familiar with this shortcut from all other applications.

[afercia]

Google Docs is not a comparable example, as it's a full page editor in an ARIA application mode. Gutenberg is a Web application, where the Tab key is expected to keep its native behavior: navigate through focusable elements.

The accessibility team has already given feedback in the previous issues, recommending to not change the default behavior and use alternative shortcuts for indentation. Thank you 🙂

[aduth]

a full page editor in an ARIA application mode

If this (role="application") is the key in enabling Google Docs to use Tab for lists, is it not conceivable that we pursue the same? Particularly since the purpose this serves is already one we indirectly implement to a large extent through WritingFlow key interactions. This was attempted previously in #5807, and as best I can tell from the limitations there, I assume Google would have encountered (and resolved) similar for Docs, including visibility of landmark regions.

[skorasaurus]

What are the action items here?

Add the keyboard shortcuts for indent less and indent more on the list block when a user hover or focus over the particular item (not sure the correct term for 'item' is here) in the block's toolbar
see the example with the current behavior for bold, strikethrough, link, and italics for the paragraph block

I don't know if all keyboard shortcuts should be added to all 'core' blocks in when a user focuses/hovers on the toolbar or if that decision has been made yet (that's another issue perhaps and out of this scope; but consistency's sake, I'd argue yes).

=============================
Regarding the pushback about the keyboard shortcuts, I personally defer to those with more usability and accessibility experience; and as mentioned in https://github.com/WordPress/gutenberg/issues/7051#issuecomment-430515147; I prefer to see how our keyboard shortcuts perform in the accessibility audit and additional user testing.

[afercia]

@aduth #5807 was an experiment and we've decided to not implement it. role=application destroys any native semantics, i.e. any document information, as the page is not treated as a document any longer. That means no lists of heading announced, no list of links, no screen reader shortcuts to navigate through elements, no landmarks, etc. etc.
role=application should be used only for apps that needs to be treated differently from a web document, where every interaction is replicated with JavaScript and any lost semantics is rebuilt with ARIA.

Also, as already noted in previous issues and although Google Docs is not comparable to Gutenberg, it is true that the tab key works for indentation but the keyboard shortcut exposed to users is (on a mac) Cmd + ] / Cmd + [:

[mcsf]

As much as I'd like the convenience of using tab for list indentation, I gather from @afercia that we still have a ways to go to make that happen. I think we could at least start with something like cmd + ]. Two questions that stand:

• Can we compile idiomatic shortcuts from platforms other than macOS? Mostly Windows and whatever Google Docs does on Linux desktops (@nosolosw: AFAIR your daily driver is Linux; could you have a quick look?)
• cmd + ] will require more than two keys to compose on many non-US keyboards (as a personal example: cmd + alt + 9). That's not necessarily a dealbreaker, just something to be aware of, and let's make sure that the shortcut doesn't break for those keyboard layouts.

[afercia]

True that square brackets are not directly available in some keyboard layouts. As mentioned in many other issues, the only real solution to this and to potential shortcuts conflict is a mechanism to allow users to re-map the shortcuts. See https://github.com/WordPress/gutenberg/issues/3218

[nosolosw]

@mcsf In Linux, the control keys are either CTRL, CTRL+ALT. ALT and ALT+SHIFT are reserved to open menu items.

This is how Google Docs Keyboard Shortcuts looks like for me (Ubuntu Linux w Firefox browser):

Text formatting

Paragraph formatting

Editing

[nosolosw]

Actually, I've realized indentation was not part of the shortcuts I captured and I can only know the shortcut if I search for "indent"! Crazy GDocs. It looks like there are two shortcuts for Indentate paragraphs/lists on Google Docs:

• Increase indent: CTRL+] or TAB
• Decrease indent: CTRL+[ or SHIFT+TAB

Only the first one gets announced through the shortcuts help menu:

[mcsf]

Thanks for the insight, @nosolosw!

[nosolosw]

Tested some editor desktop apps (LibreOffice, GEdit) and doesn’t seem to be an idiomatic way in Linux beyond Tab.

[mcsf]

Wild idea: what if space and backspace could be used at the start of a list item to indent in/out?

[ellatrix]

@mcsf I like your idea! Would it be strange to require two spaces? Backspace definitely makes a lot of sense.

[mcsf]

Hm, at least on first consideration, two spaces would seem awkward to me. Single space seems more discoverable and natural. What do you think?

[swissspidy]

space / backspace as keyboard shortcuts for that sounds very odd to me. I guess we could try if there are no a11y drawbacks.

[ellatrix]

Hm, at least on first consideration, two spaces would seem awkward to me. Single space seems more discoverable and natural. What do you think?

Sounds good, if we work towards it being undoable.

space / backspace as keyboard shortcuts for that sounds very odd to me.

Could you elaborate? Or does it merely sound odd?

[ellatrix]

I like it because it's a bit inspired by Markdown/typewriting, where you would create the following:

* base
  * indented

[mcsf]

we could try if there are no a11y drawbacks

Definitely. This was, in my mind, a way to keep tab intact, as well as keyboard arrows. Indentation events (increase/decrease) would be announced (wp.a11y.speak).