Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard shortcuts for list items are missing #9611

Closed
skorasaurus opened this issue Sep 4, 2018 · 24 comments · Fixed by #14343
Closed

Keyboard shortcuts for list items are missing #9611

skorasaurus opened this issue Sep 4, 2018 · 24 comments · Fixed by #14343
Assignees
Labels
[Block] List Affects the List Block [Feature] Blocks Overall functionality of blocks [Package] Keycodes /packages/keycodes [Priority] High Used to indicate top priority items that need quick attention [Type] Task Issues or PRs that have been broken down into an individual action to take
Milestone

Comments

@skorasaurus
Copy link
Member

skorasaurus commented Sep 4, 2018

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 #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)
@0aveRyan 0aveRyan added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks [Package] Keycodes /packages/keycodes labels Sep 4, 2018
@mtias
Copy link
Member

mtias commented Oct 8, 2018

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
Copy link
Member Author

@mtias - See #7051 and #4181

@mtias mtias added [Type] Task Issues or PRs that have been broken down into an individual action to take and removed [Type] Enhancement A suggestion for improvement. labels Oct 8, 2018
@mtias mtias added this to the WordPress 5.0 milestone Oct 8, 2018
@designsimply designsimply added the [Block] List Affects the List Block label Oct 16, 2018
@ellatrix
Copy link
Member

As noted in #10744 (comment), the current list shortcuts aren't the best. I think we should update them before making them more visible.

@ellatrix
Copy link
Member

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

@afercia
Copy link
Contributor

afercia commented Nov 21, 2018

@iseulde I'm afraid there's no Escape 😆 from potential clashes. As mentioned in #4181 (comment) Google Docs uses Cmd+square brackets and yes, they clash with browsers history navigation on macOS. Also Gmail uses the same combination:

screenshot 2018-11-21 at 13 14 07

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 #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?

@youknowriad youknowriad added the [Priority] High Used to indicate top priority items that need quick attention label Jan 3, 2019
@ellatrix
Copy link
Member

ellatrix commented Jan 3, 2019

What are the action items here?

@gziolo
Copy link
Member

gziolo commented Jan 3, 2019

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
Copy link
Contributor

afercia commented Jan 3, 2019

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
Copy link
Member

aduth commented Jan 3, 2019

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
Copy link
Member Author

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

selection_201

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 #7051 (comment); I prefer to see how our keyboard shortcuts perform in the accessibility audit and additional user testing.

@afercia
Copy link
Contributor

afercia commented Jan 4, 2019

@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 + [:

screenshot 2019-01-04 at 08 58 45

@mcsf
Copy link
Contributor

mcsf commented Jan 7, 2019

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
Copy link
Contributor

afercia commented Jan 7, 2019

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 #3218

@oandregal
Copy link
Member

@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

text-formatting

Paragraph formatting

paragraph-formatting

Editing

editing

@oandregal
Copy link
Member

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:

indent

@mcsf
Copy link
Contributor

mcsf commented Jan 7, 2019

Thanks for the insight, @nosolosw!

@oandregal
Copy link
Member

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

@mcsf
Copy link
Contributor

mcsf commented Jan 14, 2019

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

@ellatrix
Copy link
Member

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

@mcsf
Copy link
Contributor

mcsf commented Jan 15, 2019 via email

@swissspidy
Copy link
Member

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

@ellatrix
Copy link
Member

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
Copy link
Member

ellatrix commented Jan 15, 2019

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

* base
  * indented

@mcsf
Copy link
Contributor

mcsf commented Jan 15, 2019

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] List Affects the List Block [Feature] Blocks Overall functionality of blocks [Package] Keycodes /packages/keycodes [Priority] High Used to indicate top priority items that need quick attention [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Development

Successfully merging a pull request may close this issue.