Tab unexpectedly highlights "Add block" instead of indenting unordered list

[danielbachhuber]

As a Gutenberg user, I'd expect that using the tab button within an existing unordered list would increase the indent level.

Here's the behavior in the existing editor:

In Gutenberg, the same keystroke pattern triggers the "Add block" UI instead of indenting the list:

This is Firefox Quantum 57.0.1 on Mac.

[youknowriad]

I'm missing some context here but I recall this being discussed and we decided to avoid it for accessibility reasons (Avoid tab trap). Maybe @jasmussen and @afercia could tell us more.

[afercia]

See for example #1621

The difference with the classic editor is that a list is always within TinyMCE, so users can always press Enter - Backspace or "exit" the list by other means and have the Tab key back to its default behavior.
Instead, implementing indentation via Tab in a Gutenberg List block would actually trigger a "keyboard trap", resulting in the inability to tab away from the List block. A keyboard shortcut for indentation would be handy, but I'd recommend to not use Tab.

[youknowriad]

Closing as "won't fix" for now

[danielbachhuber]

using the tab button within an existing unordered list would increase the indent level.

Worth noting that this is the behavior for both Dropbox Paper and Google Docs too.

[danielbachhuber]

Also:

Instead, implementing indentation via Tab in a Gutenberg List block would actually trigger a "keyboard trap", resulting in the inability to tab away from the List block.

This seems like an implementation detail, not a refutation of the expected user experience.

[youknowriad]

Also, one could argue that there's a tap trap in the current editor as well. Since you could have meta boxes and stuff like that after TinyMCE.

[danielbachhuber]

Certainly. I don't expect there to be an immediate decision on this; rather, I think it's best we surface all of these little details for deliberate consideration before they're imposed upon tens of thousands of users who have existing usage patterns.

[youknowriad]

I'm fine reopening if this is something we want to rediscuss/reconsider? cc @afercia

[jasmussen]

Question, can enter/backspace not exit the list here? If not then that might be the issue to fix perhaps?

[afercia]

and Google Docs too

Actually, on Google Docs, the recommended shortcut is Cmd/Ctrl + [ or ]. Yes, it works with Tab too but in a Google Doc it is easily possible to "exit" a list with arrows or Enter and avoid to be trapped.

This seems like an implementation detail, not a refutation of the expected user experience.

The "expected user experience" when pressing Tab is the default behavior 🙂 moving focus to the next focusable element. Gutenberg lives withing a Web application, it is not a "full editor" like Google Docs. In this case, the default behavior of Tab should not be altered.

[danielbachhuber]

The "expected user experience" when pressing Tab is the default behavior 🙂 moving focus to the next focusable element. Gutenberg lives withing a Web application, it is not a "full editor" like Google Docs.

We can agree to disagree then. In this case, I think the current user experience is the expected user experience.

[getsource]

Ran into this again today. It's pretty frustrating to not be able to indent lists with tab.

[jasmussen]

Agree, it feels totally wrong to not be able to indent lists with tab.

Are there any other ways to ensure accessibility that allows us to keep the default list creation behavior?

[afercia]

I'd just like to remind everyone this is not Word or a similar desktop application. Gutenberg (and WordPress itself) is a Web application. On the web, Tab just navigates through focusable fields. That's a native behavior that shouldn't be broken. I can only recommend (as previously said) an alternate shortcut. Worth also reminding a great part of the users will just click the indent / outdent buttons.

[afercia]

I've created #7051 as follow-up to this issue. /Cc @getsource