Accessibility: Adding Keyboard Shorcuts to navigate the editor regions #3084

youknowriad · 2017-10-20T11:44:18Z

closes #467

This PR adds keyboard shortcuts to navigate the aria regions ala slack.

For now, I came up with random shortcuts (ctrl+r and ctrl+shift+r), let me know which one you think I should use.

jasmussen · 2017-10-20T11:59:25Z

Totally love this! Very very nice work. Finding a good standardized shortcut for this is going to be important, especially given the backtick discussion in last weeks meeting.

I like the focus style for the region — is it kosher to do something like this? https://codepen.io/joen/pen/Nvjror — that is, a big flashing focus style that disappears?

I don't know if it's intentional — I assume it is, but the shortcut doesn't work if you have focus inside a text block.

Nice work!

codecov · 2017-10-20T12:00:16Z

Codecov Report

Merging #3084 into master will decrease coverage by 0.67%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #3084      +/-   ##
==========================================
- Coverage   31.54%   30.86%   -0.68%     
==========================================
  Files         221      222       +1     
  Lines        6311     6450     +139     
  Branches     1121     1158      +37     
==========================================
  Hits         1991     1991              
- Misses       3632     3734     +102     
- Partials      688      725      +37

Impacted Files	Coverage Δ
editor/sidebar/index.js	`0% <ø> (ø)`	⬆️
editor/modes/text-editor/index.js	`0% <ø> (ø)`	⬆️
editor/modes/visual-editor/index.js	`0% <ø> (ø)`	⬆️
editor/header/index.js	`0% <ø> (ø)`	⬆️
components/higher-order/navigate-regions/index.js	`0% <0%> (ø)`
editor/layout/index.js	`0% <0%> (ø)`	⬆️
editor/modes/visual-editor/block.js	`0% <0%> (ø)`	⬆️
editor/modes/visual-editor/block-list.js	`0% <0%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update efa08a0...e893cb0. Read the comment docs.

afercia · 2017-10-20T18:36:49Z

Love to see this in action 😄 Thanks!
(and started considering to propose this for the WordPress admin too)

Shortcut: yee we should find a good one. I'd love to use G as Gutenberg ;) But I guess we should use a combination with a non a-z 0-9 key. @joedolson help please.

@jasmussen no objections to experiment the flashing focus limited to this case. I'd like to see this merged soon and ready for testing. We can always review later if necessary.

I don't know if it's intentional — I assume it is, but the shortcut doesn't work if you have focus inside a text block.

Noticed that and I understand that's maybe a bit tricky to implement. However, if the idea of the blocks "Navigation mode" and "Edit mode" discussed during last SLack chat will be implemented, then makes sense to me having these shortcuts working just in "Navigation mode".

Instead, when editing and focus is inside a block, the process would be:
press Escape > exit the edited block and goes back to "Navigation mode" > shortcuts work again
Thoughts?

Aside: we should document all this in a future Gutenberg help guide.

mtias · 2017-10-20T20:38:39Z

Aside: we should document all this in a future Gutenberg help guide.

Good call, we should start writing these sooner rather than later. They could even be extracted to be part of the "new user experience" cc @karmatosed

mtias · 2017-10-20T20:39:50Z

editor/layout/index.js

-				<div className="editor-layout__editor">
-					{ mode === 'text' && <TextEditor /> }
-					{ mode === 'visual' && <VisualEditor /> }
+class Layout extends Component {


Looking at the previous simple component, wonder if we should convert the region-focus into a HoC that could be used in different editor layouts.

Do you think this should be a generic component in the components module? It looks like something that could be useful even outside an editor context.

done in daa9cf3

jasmussen · 2017-10-21T07:53:50Z

Shortcut: yee we should find a good one. I'd love to use G as Gutenberg ;) But I guess we should use a combination with a non a-z 0-9 key.

Question: can we use both the standardized backtick shortcut for keyboards that support this, and a better one for us europeans? (perhaps Ctrl+$, as $ is right above tab)? The idea being that if backtick is a standard for this, good to embrace it for the majority of the world, with enhancements for the rest of us?

no objections to experiment the flashing focus limited to this case. I'd like to see this merged soon and ready for testing. We can always review later if necessary.

Cool, Riad can we try the animated focus style from that codepen I linked? Let me know if you'd like me to implement it. It uses $blue-medium-500.

Good call, we should start writing these sooner rather than later. They could even be extracted to be part of the "new user experience" cc @karmatosed

Would a good start be to implement the keyboard shortcuts cheatsheet (invoked by for example Shift + ?) as ticketed in #2980 be a good start?

I don't know how far we can go with the componentization thing, but it would be really nice if, when a shortcut is used, the tooltip and cheat sheet inclusion create themselves.

afercia · 2017-10-21T16:01:33Z

editor/layout/index.js

+				<Popover.Slot />
+				<KeyboardShortcuts shortcuts={ {
+					'ctrl+r': this.focusNextRegion,
+					'ctrl+shift+r': this.focusPreviousRegion,


On Windows, Ctrl+r refreshes the page, see extended comment on the PR.

afercia · 2017-10-21T16:49:38Z

Testing on Windows, we've missed that Ctrl+r refreshes the page. The default action should be prevented but...

we should find a better shortcut anyways. Finding a good one that is safe to use across different browsers, platforms, and keyboard layouts is basically impossible.

perhaps Ctrl+$, as $ is right above tab

Not on my Italian keyboard, maybe that's the Danish Mac keyboard 😉. I guess $ is placed differently also in other keyboard layouts.

If we decide these shortcuts should be available only in "navigation mode" (i.e. not when editing a block or when inside any other form field) then I'd consider to use single key shortcuts.

To my understanding, modifiers like Control, Option, Shift, are necessary when inside a form field. Instead, outside of form fields, single keys should work because browsers will ignore single key presses. Thoughts?

Many big apps already use single keys shortcuts, for example Gmail uses j and k to navigate through previous/next messages, and those are pretty common shortcuts. Testing on Gmail:

open a message in your inbox
press j or k to navigate through messages
click the "Compose" button to open the new message modal
in the new message form fields, j or k do nothing of course
press Escape to close the modal
j and k work again

Maybe replicating this interaction would make sense also in Gutenberg? As in, when editing a block, press "Escape" exits edit mode and goes back to navigation mode, then the shortcuts work again. Note: it already works this way.

WordPress already uses single key shortcuts for the Comments screen: https://codex.wordpress.org/Keyboard_Shortcuts#Keyboard_Shortcuts_for_Comments

We don't have to worry about screen readers because they already have their mechanism to jump through landmark regions. Windows screen readers use "browse mode" and "forms mode". When in "browse mode" the Gutenberg shortcuts won't do anything because screen readers intercepts keypresses, so keypresses are not passed to the browser. This is not a problem because, for example, NVDA and JAWS already have their shortcuts:

NVDA list of single key shortcuts:
https://www.nvaccess.org/files/nvda/documentation/userGuide.html#toc41

d: landmark

JAWS list of single key shortcuts:
https://www.freedomscientific.com/Training/Surfs-Up/Quick_Keys.htm

Region R

I'd propose to try j as in "Jump" because it's easy to remember.

Note: the new meta boxes expanding panel is not included in an ARIA landmark region. Please consider, also for future developments, that all content in a web page should be inside a landmark region. Yes, it's inside the WordPress "main" landmark but the point is if this content section is important enough to be a navigable region. Should we make it a landmark adding role="region" aria-label="some label"? Should it be focusable and included in the shortcuts loop?
Want me to open a separate issue?

jasmussen · 2017-10-21T18:17:32Z

I love direct shortcuts like j/k, I'd wager they'd be really popular if we were able to add a bunch of those.

However I've seen the Ctrl+` shortcut used as a standard to navigate between views in an application in many places. MacOS has a ⌘+` shortcut for switching between windows in an application (i.e. if you have two Safari windows open, ⌘+` switches between those two, because for whatever dumb reason the Mac designers thought Alt + Tab should flip between only applications, not windows).

And so in my googling for european alternatives to the backtick, I realized that the backtick on US keyboards sits right above the tab button. That's where I have the $ key. And I figured ... hmmm... could they have? And sure enough, Ctrl+$ moves focus from region to region in Slack.

Andrea can you test whether Ctrl + the key right above your tab button, below Esc switches between regions in Slack? If yes, then that's how they did it — they chose the key by geography. And if it works for you — should we consider doing the same?

mtias · 2017-10-23T11:53:05Z

In my Spanish keyboard it works and is represented as:

youknowriad · 2017-10-23T11:59:23Z

Wondering how do we match a keyboard position regardless of the layout. Is this the same keycode even if it's a different key? In my french keyboard it's @ and it works in slack.

If I try in this website http://keycode.info/ it gives me a keycode of 192. Are you seeing the same keycode?

jasmussen · 2017-10-23T12:13:49Z

I would guess that we have to put together an array of keycodes for this character, based on whatever info we can glean.

afercia · 2017-10-23T14:52:02Z

Andrea can you test whether Ctrl + the key right above your tab button, below Esc switches between regions in Slack?

I'm afraid Slack implemented an alternate shortcuts only for the languages Slack is translated in. Spanish, French, and German. On an Italian keyboard layout, the key right above your tab button, below Esc is "Back slash" and does nothing. The Slack help keeps showing me Ctrl + backtick.

Switching to French does show me: Ctrl + @
Switching to German does show me: Ctrl + ^
Wasn't able to get the Spanish shortcut though.

I realized that the backtick on US keyboards sits right above the tab button

Not on all US keyboards, apparently. On my mac US keyboard is right above Ctrl:

Id recommend to keep it simple 😉

mtias · 2017-10-24T13:39:43Z

@youknowriad I do get 192 for º.

youknowriad · 2017-10-24T14:20:10Z

Should we go with keycode 192 whatever that is on each keyboard layout :)?

I think we won't be able to use the KeyboardShortcuts component and mousetrap to match this but not a big issue.

jasmussen · 2017-10-26T07:33:58Z

If we are able to go with multiple shortcuts for the same, it seems we might be able to make the most people happy by picking a shortcut that...

sits at a convenient location on the keyboard
is a standard

While 2 isn't universally true, until we find a single keyboard shortcut that's actually a standard, the closest is what we have here with ⌘+` that Slack uses. It seems worth trying this.

We could then supplement it, or replace it, with a simpler shortcut that doesn't change between keyboards, if we can find a good idea for what that should be.

youknowriad · 2017-10-26T07:42:00Z

Interestingly I've used ⌘+` as a shortcut using the mousetrap lib in it's working properly with ⌘+@ in my keyboard. Can y'all try now?

youknowriad · 2017-10-26T07:52:05Z

And it's a flashing focus now :)

jasmussen · 2017-10-26T08:22:27Z

Ctrl + $ (the key above my tab) isn't working for me, and Ctrl + @ doesn't work for me as @ requires an Alt for me.

youknowriad · 2017-10-26T08:26:59Z

🤔 Can you try this String.fromCharCode(192) on your console and tell me what it gives you?

jasmussen · 2017-10-26T08:34:01Z

So that's À

youknowriad · 2017-10-26T08:40:28Z

@jasmussen Oh you're on a mac right? did you try ⌘ + $ instead?

jasmussen · 2017-10-26T08:47:20Z

Oh interesting. I didn't try that, and I have that mapped to something else. But Macs also have Ctrl, and slack on Mac also uses Ctrl for this. I think CMD + backtick on a Mac is supposed to flip between windows of the same app

youknowriad · 2017-10-26T09:15:28Z

Replaced command by ctrl, does it work now?

youknowriad · 2017-10-26T11:22:59Z

@jasmussen I suspect the cropping to be fixed once we land this commit a0fdfc7 from #2998

jasmussen · 2017-10-26T11:31:03Z

Then 👍 👍 for the feature from me. I'll let others chime in on the shortcuts and implementation, but I dig this implementation.

mtias · 2017-10-26T11:34:02Z

editor/assets/stylesheets/_animations.scss

+
+
+@mixin focus_flash {
+  animation: focus_flash .4s;


Are spaces mixed in here?

Good catch 👍

mtias · 2017-10-26T11:35:22Z

editor/layout/index.js

@@ -60,4 +60,4 @@ export default connect(
 		notices: getNotices( state ),
 	} ),
 	{ removeNotice }
-)( Layout );
+)( navigateRegions( Layout ) );


Looks much better, thanks.

youknowriad · 2017-10-27T10:52:27Z

Rebased this, it should be ready to go

mtias · 2017-10-27T12:28:49Z

The cropping on the main area doesn't to be fixed after the rebase? Testing this, I feel that the fact it disappears so quickly doesn't communicate what this does very well—almost feels like a glitch.

youknowriad · 2017-10-27T12:56:25Z

Ok per @mtias suggestion, I dropped the focus animation for now

mtias · 2017-10-27T13:22:13Z

Feels much better to me like this, though now it exposes the crop issue more clearly when you scroll:

youknowriad · 2017-10-27T14:07:25Z

Good catch, it should be fixed now

mtias · 2017-10-27T14:15:04Z

Looks great to me.

…r Component

afercia · 2017-10-28T15:25:16Z

I've tested a bit on a Windows laptop with the Italian keyboard. There's no physical key for the backtick. On Italian keyboards with a numeric pad, the only way to produce a backtick is pressing Alt+96 on the numeric pad. Many laptops don't even have a numeric pad...

Pressing the key below Escape (in my case it's a back slash) does nothing.
Only when I switch the keyboard layout to English the key below Escape works as backtick and the regions navigation works.

Will open a new issue.

afercia · 2018-03-06T16:52:33Z

Just had confirmation from @rianrietveld the backtick doesn't work on the Dutch keyboard layout (and as said previously, probably on many other layouts). This makes #3218 really necessary.

youknowriad added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Oct 20, 2017

youknowriad self-assigned this Oct 20, 2017

youknowriad requested review from jasmussen, afercia and aduth October 20, 2017 11:44

youknowriad force-pushed the add/region-keyboard-shortcuts branch from 6601c81 to bb5048c Compare October 20, 2017 11:54

mtias reviewed Oct 20, 2017

View reviewed changes

afercia reviewed Oct 21, 2017

View reviewed changes

mtias reviewed Oct 26, 2017

View reviewed changes

youknowriad force-pushed the add/region-keyboard-shortcuts branch from f34a7b0 to 9ad3640 Compare October 27, 2017 10:52

youknowriad force-pushed the add/region-keyboard-shortcuts branch from b8ed7b3 to 89254c2 Compare October 27, 2017 13:01

youknowriad added 8 commits October 27, 2017 15:33

Accessibility: Adding Keyboard Shorcuts to navigate the editor regions

17a8573

Components: Extract the region navigation into a reusable Higher-Orde…

d3ca867

…r Component

Accessibility: Use command + ` shortcut for region navigations

ca0cb25

Accessibility: Using a flashing focus when navigating regions

90955c5

Accessibility: Ctrl instead of command to navigate regions

1372763

iCode Style: Fix mixed indentation style

b5fc689

Drop focus animation when navigating regions

21070a4

Fix the editor content region focus style when scrolling

e893cb0

youknowriad force-pushed the add/region-keyboard-shortcuts branch from e120020 to e893cb0 Compare October 27, 2017 14:40

youknowriad merged commit 5b05c5d into master Oct 27, 2017

youknowriad deleted the add/region-keyboard-shortcuts branch October 27, 2017 14:56

afercia mentioned this pull request Oct 28, 2017

Document landmark regions for (third-party) block developers #3217

Closed

afercia mentioned this pull request Oct 28, 2017

Allow users to customize keyboard shortcuts #3218

Open

afercia mentioned this pull request Mar 28, 2018

Keyboard accessibility: Add a "Skip link" to jump back from the inspector to the selected block #5856

Merged

afercia mentioned this pull request Oct 16, 2018

Adds the block hierarchy navigation menu to the header #10545

Merged

3 tasks

mapk mentioned this pull request Jun 26, 2019

Grouping blocks using keyboard shortcuts #15980

Closed

Accessibility: Adding Keyboard Shorcuts to navigate the editor regions #3084

Accessibility: Adding Keyboard Shorcuts to navigate the editor regions #3084

Conversation

youknowriad commented Oct 20, 2017

jasmussen commented Oct 20, 2017 • edited Loading

codecov bot commented Oct 20, 2017 • edited Loading

Codecov Report

afercia commented Oct 20, 2017

mtias commented Oct 20, 2017

mtias Oct 20, 2017

Choose a reason for hiding this comment

youknowriad Oct 23, 2017

Choose a reason for hiding this comment

youknowriad Oct 23, 2017

Choose a reason for hiding this comment

jasmussen commented Oct 21, 2017

afercia Oct 21, 2017

Choose a reason for hiding this comment

afercia commented Oct 21, 2017

jasmussen commented Oct 21, 2017 • edited Loading

mtias commented Oct 23, 2017

youknowriad commented Oct 23, 2017

jasmussen commented Oct 23, 2017

afercia commented Oct 23, 2017

mtias commented Oct 24, 2017

youknowriad commented Oct 24, 2017

jasmussen commented Oct 26, 2017

youknowriad commented Oct 26, 2017 • edited Loading

youknowriad commented Oct 26, 2017

jasmussen commented Oct 26, 2017

youknowriad commented Oct 26, 2017 • edited Loading

jasmussen commented Oct 26, 2017

youknowriad commented Oct 26, 2017 • edited Loading

jasmussen commented Oct 26, 2017

youknowriad commented Oct 26, 2017

youknowriad commented Oct 26, 2017

jasmussen commented Oct 26, 2017

mtias Oct 26, 2017

Choose a reason for hiding this comment

youknowriad Oct 26, 2017

Choose a reason for hiding this comment

mtias Oct 26, 2017

Choose a reason for hiding this comment

youknowriad commented Oct 27, 2017

mtias commented Oct 27, 2017

youknowriad commented Oct 27, 2017

mtias commented Oct 27, 2017

youknowriad commented Oct 27, 2017

mtias commented Oct 27, 2017

afercia commented Oct 28, 2017

afercia commented Mar 6, 2018

jasmussen commented Oct 20, 2017 •

edited

Loading

codecov bot commented Oct 20, 2017 •

edited

Loading

jasmussen commented Oct 21, 2017 •

edited

Loading

youknowriad commented Oct 26, 2017 •

edited

Loading

youknowriad commented Oct 26, 2017 •

edited

Loading

youknowriad commented Oct 26, 2017 •

edited

Loading