Support Navigation and Edit Mode #16500

youknowriad · 2019-07-10T10:54:19Z

closes #11581
This is #5709 take 2

The idea is:

using "tabs" navigate between blocks
hitting "enter" you enter the "edit" mode (the way it works today)
hitting "escape" to get back to navigation mode.

The original PR was abandoned because the keyboard event to enter navigation mode was not caught properly in all screen readers. This is fixed in this PR by using a focused button (the block name/breadcrumb) when in navigation mode.

The breadcrumb still needs to be designed properly (because it's now a button) but the idea is here.
I also removed the breadcrumb "animation" when you hover a block because the button was not showing right after you hit "escape".

jasmussen · 2019-07-10T11:59:30Z

Hoooly guacamole, it's happening! Here's a quick GIF:

Initial keyboard usage impressions feel great. Fast, fluid, and it feels kind of intuitive too.

Would it be possible to allow the Delete button to delete the focused block? I would love to be able to, in any block, press Escape and then Delete to delete that block.

The focus style should probably also be rather different from both the hover and selected states. It seems like such a focus has more in common with either a multiselected block, or a focused textfield:

kjellr · 2019-07-10T13:47:09Z

This is very cool! In my tests, it only appears to work if you start navigating only with the keyboard. Is that right? Or is there another way to activate it? Once I hit enter to edit a block, I can't figure out how to get back into navigation mode. 🤔

Would it be possible to allow the Delete button to delete the focused block? I would love to be able to, in any block, press Escape and then Delete to delete that block.

+1 to this. That would be awesome.

The focus style should probably also be rather different from both the hover and selected states. It seems like such a focus has more in common with either a multiselected block, or a focused textfield:

I wonder if something like this is more appropriate?

It's the same left border we use, but with a blue "active" state. I've also adjusted treatment of the breadcrumb so that it appears like a standard toolbar button.

youknowriad · 2019-07-10T13:58:43Z

@kjellr

This is very cool! In my tests, it only appears to work if you start navigating only with the keyboard. Is that right?

you can hit "Escape" when you're in edit mode to enable "navigation" mode.

youknowriad · 2019-07-10T14:08:03Z

Would it be possible to allow the Delete button to delete the focused block? I would love to be able to, in any block, press Escape and then Delete to delete that block.

This is done.

I also added the is-navigation className to be able to target that state by using .is-selected.is-navigation. I'd appreciate if you have some time to tweak the design accordingly. Designers eyes are the best :P

kjellr · 2019-07-10T14:09:09Z

I also added the is-navigation className to be able to target that state by using .is-selected.is-navigation. I'd appreciate if you have some time to tweak the design accordingly. Designers eyes are the best :P

Great! I'll jump in and take a look later today.

ellatrix · 2019-07-10T15:07:50Z

How will it be clear what mode you're in? Modes are generally pretty confusing.

hitting "enter" you enter the "edit" mode (the way it works today)

Enter ("return" on a lot of keyboards) traditionally creates a new line. Changing that seems a bit strange.

kjellr · 2019-07-10T15:16:29Z

I added some quick styles to match the comp above:

ellatrix · 2019-07-10T15:32:12Z

What if you can also use Tab to escape the mode? As soon as you cross the block boundary, you're back in block navigation mode.

Regarding Enter, one solution could be to also include the insertion points when tabbing through blocks. That way it's easy to navigate around blocks and insert between blocks. Sure it's twice as much to tab through, but way better than it is now.

youknowriad · 2019-07-10T15:53:05Z

In a lot of situations Enter does something different. When you click a button for instance and I feel this is a very similar situation so I don't think in "navigation" mode "Enter" is expected to create a new line. In "edit" mode that's the case though.

youknowriad · 2019-07-10T16:16:32Z

Noting that the "Escape" key now conflicts with the previous expected behavior (show the toolbar). I think the new behavior is better but I thought I'd mention cc @aduth (It's breaking some e2e tests now)

jasmussen · 2019-07-11T07:23:14Z

It's the same left border we use, but with a blue "active" state. I've also adjusted treatment of the breadcrumb so that it appears like a standard toolbar button.

I wonder if we should just show the same blue all around? This is a focus state, so I feel like it should ambiguate more from the selected state than otherwise.

Here are some other applications that use what can best be described as a navigation mode. MacOS Finder:

It even has the same enter/escape behavior.

Slack:

Worth noting that in slack, you just use the arrowkeys to navigate, and tab to enter buttons of each message, so it isn't a 1:1 comparison. But the visual style distinctly feels "focusy".

youknowriad · 2019-08-01T09:45:17Z

Can I have thoughts or a ✅ here?

ellatrix · 2019-08-01T09:51:04Z

I'll review it again in just a bit.

afercia · 2019-08-01T10:08:19Z

Thanks everyone for working on this, definitely better than version 1 🙂 I'd like this to be extensively tested by the accessibility team. Given the importance of this new interaction flow, I'd like to not be the only person giving accessibility feedback.

Will propose during tomorrow's weekly accessibility meeting. Of course, everyone is welcome to attend the meeting (Note: meetings happen on the WordPress Slack, registration is required).

ellatrix

Left some minor comments that could be nice to address, but other than that this looks great.
I can't give much accessibility feedback though.

ellatrix · 2019-08-01T11:42:10Z

packages/block-editor/src/components/block-list/block.js

- // not already handled by descendant.
- onInsertDefaultBlockAfter();
- event.preventDefault();
+ if ( canUseShortcuts && isEditMode ) {


Minor: these nested switch/if statements look a bit odd to me. Could they maybe be combined?

No easy way to do it. We could just use if elses?

packages/block-editor/src/components/block-list/block.js

ellatrix · 2019-08-01T11:47:07Z

packages/block-editor/src/components/writing-flow/index.js

+ }
+
+ componentDidMount() {
+ window.addEventListener( 'mousedown', this.switchToEditMode );


Why does it apply to the whole window? If you click inside a block it makes sense to switch to edit mode. If you click outside a block it makes more sense to stay in navigation mode?

packages/block-editor/src/components/writing-flow/index.js

packages/block-editor/src/store/reducer.js

enriquesanchez · 2019-08-01T20:50:11Z

Just tested this (Mac/Firefox 68.0.1) and works like a charm. This is a big improvement IMHO.

🤔 Thought: when in navigation mode, what if we added the ability to move to the sidebar with the right arrow? and then maybe back to the block with the left arrow?

youknowriad · 2019-08-02T09:54:55Z

when in navigation mode, what if we added the ability to move to the sidebar with the right arrow? and then maybe back to the block with the left arrow?

Interesting idea. It would be good to find ways to improve the navigation to that panel. Right arrow to go there seems ok but left arrow to go back might cause issues depending what "control" is focused on the right sidebar. Imagine it's an input for instance.

afercia · 2019-08-02T10:29:43Z

Worth noting right and left arrow keys wouldn't work with screen readers. Also, when the block is in edit mode and the caret is within an editable field, arrow keys should keep their default behavior (moving through text).

youknowriad · 2019-08-02T13:06:38Z

Ok let's try this, happy to address extra feedback.

youknowriad added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. Needs Accessibility Feedback Need input from accessibility labels Jul 10, 2019

youknowriad requested review from ellatrix, gziolo and talldan as code owners July 10, 2019 10:54

youknowriad self-assigned this Jul 10, 2019

youknowriad requested review from aduth, jasmussen, afercia and mtias July 10, 2019 10:54

kjellr mentioned this pull request Jul 10, 2019

Try removing block breadcrumbs #16506

Closed

youknowriad requested review from ajitbohra, chrisvanpatten, mkaz, nerrad and ntwb as code owners July 10, 2019 17:16

youknowriad force-pushed the add/navigation-mode-take-2 branch 2 times, most recently from 736415f to 465a2a9 Compare July 11, 2019 09:24

ellatrix approved these changes Aug 1, 2019

View reviewed changes

youknowriad added 3 commits August 2, 2019 11:34

More consistency in the naming of the navigation mode actions/functions

5400dcf

Limit the edit mode trigger to the writing flow component

aae87af

Consistently disable navigation mode in e2e tests

fbfbe6c

youknowriad merged commit 2f757fa into master Aug 2, 2019

youknowriad deleted the add/navigation-mode-take-2 branch August 2, 2019 13:07

afercia mentioned this pull request Aug 2, 2019

Steps to make keyboard navigation usable #11581

Closed

kjellr added this to the Gutenberg 6.3 milestone Aug 2, 2019

youknowriad mentioned this pull request Aug 19, 2019

Phase 2 Scope & Features #13113

Closed

22 tasks

talldan mentioned this pull request Aug 26, 2019

Visual queues for Edit and Navigation Mode #17184

Closed

gziolo pushed a commit that referenced this pull request Aug 29, 2019

Add A11y Navigation Mode (#16500)

cb8f1f0

gziolo pushed a commit that referenced this pull request Aug 29, 2019

Add A11y Navigation Mode (#16500)

d91ed50

aduth mentioned this pull request Oct 4, 2019

Writing Flow: Cannot type after clicking below writing prompt in new post #17776

Closed

brentswisher mentioned this pull request Oct 14, 2019

Accessibility: tab navigation changed since WordPress 5.2 #17847

Closed

mtias mentioned this pull request Nov 17, 2019

Accessibility feedback: cluttered interface #3691

Closed

MarcoZehe mentioned this pull request Nov 18, 2019

Accessibility regression: Focus does not land in the paragraph for a new block when pressing Enter #18583

Closed

enriquesanchez mentioned this pull request Mar 18, 2020

Keyboard operation is confusing and inconsistent #15314

Closed

MaxMood96 mentioned this pull request Mar 14, 2023

[Snyk] Security upgrade webpack from 5.65.0 to 5.76.0 MaxMood96/gutenberg#91

Open

snyk-io bot mentioned this pull request Aug 13, 2024

[Snyk] Upgrade @wordpress/element from 5.28.0 to 6.3.0 Playgirlkaybraz11/wp-xeet#8

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support Navigation and Edit Mode #16500

Support Navigation and Edit Mode #16500

youknowriad commented Jul 10, 2019

jasmussen commented Jul 10, 2019

kjellr commented Jul 10, 2019

youknowriad commented Jul 10, 2019

youknowriad commented Jul 10, 2019

kjellr commented Jul 10, 2019

ellatrix commented Jul 10, 2019

kjellr commented Jul 10, 2019

ellatrix commented Jul 10, 2019

youknowriad commented Jul 10, 2019

youknowriad commented Jul 10, 2019

jasmussen commented Jul 11, 2019

youknowriad commented Aug 1, 2019

ellatrix commented Aug 1, 2019

afercia commented Aug 1, 2019

ellatrix left a comment

ellatrix Aug 1, 2019

youknowriad Aug 2, 2019

ellatrix Aug 1, 2019

enriquesanchez commented Aug 1, 2019

youknowriad commented Aug 2, 2019

afercia commented Aug 2, 2019

youknowriad commented Aug 2, 2019

Support Navigation and Edit Mode #16500

Support Navigation and Edit Mode #16500

Conversation

youknowriad commented Jul 10, 2019

jasmussen commented Jul 10, 2019

kjellr commented Jul 10, 2019

youknowriad commented Jul 10, 2019

youknowriad commented Jul 10, 2019

kjellr commented Jul 10, 2019

ellatrix commented Jul 10, 2019

kjellr commented Jul 10, 2019

ellatrix commented Jul 10, 2019

youknowriad commented Jul 10, 2019

youknowriad commented Jul 10, 2019

jasmussen commented Jul 11, 2019

youknowriad commented Aug 1, 2019

ellatrix commented Aug 1, 2019

afercia commented Aug 1, 2019

ellatrix left a comment

Choose a reason for hiding this comment

ellatrix Aug 1, 2019

Choose a reason for hiding this comment

youknowriad Aug 2, 2019

Choose a reason for hiding this comment

ellatrix Aug 1, 2019

Choose a reason for hiding this comment

enriquesanchez commented Aug 1, 2019

youknowriad commented Aug 2, 2019

afercia commented Aug 2, 2019

youknowriad commented Aug 2, 2019