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

afercia · 2018-03-28T19:35:33Z

This PR adds a way for keyboard and assistive technologies users to jump back to the currently selected block.

Users can already use keyboard shortcuts to navigate the editor regions, see #3084 and screen reader users can use ARIA landmarks, see #2380. These tools can be used to jump from the block being edited to the Sidebar but there's no way to jump back from the sidebar to the block being edited.

This PR adds a reusable component that mimics the "skip links" already used in core. Actually, it's a button that gets revealed just when it receives keyboard focus and, when pressed, moves focus back to the currently selected block.

coordination with Accessibility: Try adding the keyboard navigation/edit mode #5709
investigation / resolution of navigateRegions doesn't work from the editable blocks #5847

For now, it's placed in the block inspector in the sidebar (in the bottom right corner of the screen) but it could be useful also in the "post settings". I could see it also reused in the header toolbar and in the publishing flow, so I guess the best option would be to consider it as a generic component. In this regard, I'm not sure where the new files should be placed. For now they're in the editor directory. Any feedback welcome.

Screenshot:

Design-wise, I've made it look like the current "skip links" in core, any feedback welcome.

When a better, customizable, shortcut for navigateRegions will be available, see:
Consider a mechanism to customize shortcuts, e.g. Ctrl + backtick #3218
there will be a way for all keyboard users to jump from the selected block to the sidebar and back from the sidebar to the selected block, thus fixing #1182

karmatosed · 2018-04-03T17:49:29Z

Design-wise, I've made it look like the current "skip links" in core, any feedback welcome.

Whilst I would like to change those, I think keeping it the same is sensible. Changing to me seems like we'd cause friction where none is needed.

Position wise it seems to make sense tabbing through. Is it usual to have such skips in different places on screens? It totally may be, which is why asking for insights.

karmatosed

Design wise this is just like core so giving it approval for now.

aduth · 2018-04-03T18:01:38Z

editor/components/skip-to-selected-block/style.scss

@@ -0,0 +1,27 @@
+.skip-to-selected-block {


This class name does not adhere to the Gutenberg naming conventions:

https://github.com/WordPress/gutenberg/blob/master/docs/coding-guidelines.md#naming

It should be corrected to .editor-skip-to-selected-block

Yep, I've used editor- initially then removed waiting for a feedback about the placement of the whole thing,

aduth · 2018-04-03T18:02:59Z

editor/components/skip-to-selected-block/style.scss

+	}
+}
+
+.edit-post-sidebar .skip-to-selected-block:focus {


edit-post is a superset of (extends) the underlying editor, so there should not be awareness of that context from here. These styles, if needed, should be applied within edit-post/components/sidebar/style.scss (also better reflecting that they're specific to the edit-post sidebar, for someone looking for those styles).

aduth · 2018-04-03T18:03:24Z

editor/utils/dom.js

@@ -16,6 +16,10 @@ export function getBlockDOMNode( uid ) {
 	return document.querySelector( '[data-block="' + uid + '"]' );
 }

+export function getBlockWrapperDOMNode( uid ) {


Can we add a JSDoc block here describing the intended behavior, arguments, and return value? That we describe this as expected to return an element with tabIndex might reveal that it could potentially benefit from a more appropriate name: getBlockTabbableWrapper ? I don't feel strongly; proposed name is fine too.

Ah yes, forgot to do that.

aduth · 2018-04-03T18:06:51Z

editor/components/skip-to-selected-block/index.js

@@ -0,0 +1,37 @@
+/**


Aside: If "Skip To" buttons are expected to be commonplace, could make for a good base components component.

Do you mean moving it to the /components directory?

Yes, maybe not SkipToSelectedBlock as-is, since it an implementation specific to block usage, but a SkipTo, which SkipToSelectedBlock can extend (or just inline SkipTo where we're using SkipToSelectedBlock).

Ah OK. Hm at the moment I don't see the need for other "Skip To"s, the ones in core and this one should suffice, for now. We can always iterate later, if need be?

aduth · 2018-04-03T18:09:15Z

editor/components/skip-to-selected-block/index.js

+
+export default withSelect( ( select ) => {
+	return {
+		selectedBlock: select( 'core/editor' ).getSelectedBlock(),


getSelectedBlock can be a computationally-intensive selector. I wish we had a simpler way to get access to the direct UID value of the singular selected block. We do have getBlockSelectionStart, but this also returns a value for a multi-selection. Which actually raises another point: do we care if it's a singular block selection? Seems like we'd want to return to the first UID of the set of selected blocks in either case.

aduth · 2018-04-03T18:11:58Z

edit-post/assets/stylesheets/_z-index.scss

@@ -55,6 +55,8 @@ $z-layers: (
 	'.components-popover.is-bottom': 99990,

 	'.components-autocomplete__results': 1000000,
+
+	'.skip-to-selected-block': 100000,


Why so high? In fact, even without z-index at all, it appears to layer as I'd expect.

FWIW, this isn't the same as putting the button on equal footing as .edit-post-sidebar, since it's already within the stacking context of the sidebar.

For re-use in other places e.g. header toolbar, publishing flow, etc. I guess it should have a high z-index.

aduth · 2018-04-03T18:12:44Z

editor/components/skip-to-selected-block/index.js

+	};
+
+	return (
+		selectedBlock && uid &&


selectedBlock will never be falsey here. You already have a condition above for ! selectedBlock.

selectedBlock is falsey initially and switching (even with mouse) the sidebar to the block inspector renders the skip link (the render method must return "something")

afercia · 2018-04-03T18:30:50Z

Is it usual to have such skips in different places on screens? It totally may be, which is why asking for insights.

I don't have an answer, I think this is the first time I see a "skip link" to actually jump back :) Will ask the a11y team opinion.

rianrietveld · 2018-04-04T13:27:44Z

What's in a word: skip link / jump back. It's all relative to how some sees/uses the page I guess.
Keeping the wording uniform may be the clearest for users.
So "Skip to selected block" seems ok to me. Nice work Andrea :-)

afercia · 2018-04-04T15:41:09Z

I think I've addressed most of the points, pending feedback on #5856 (comment)

For now, it's placed only in the block inspector. I've tested it also with multi-selection and thanks to getBlockSelectionStart() it would work fine. Worth noting the actual returned UID is the one of the block that gets selected first. For example, when multi-selecting starting from the last block and moving the mouse up, the UID is the one of the last block:

aduth

👍

afercia · 2018-04-11T09:06:10Z

Rebased to solve conflict.

mtias · 2018-04-18T08:59:54Z

Nice one!

afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Mar 28, 2018

mtias added the Needs Design Feedback Needs general design feedback. label Apr 2, 2018

afercia changed the title ~~[WIP] Keyboard accessibility: Add a "Skip link" to jump back from the inspector to the selected block~~ Keyboard accessibility: Add a "Skip link" to jump back from the inspector to the selected block Apr 3, 2018

afercia requested review from aduth and karmatosed April 3, 2018 16:38

karmatosed approved these changes Apr 3, 2018

View reviewed changes

aduth requested changes Apr 3, 2018

View reviewed changes

afercia removed the Needs Design Feedback Needs general design feedback. label Apr 4, 2018

aduth approved these changes Apr 10, 2018

View reviewed changes

afercia added 6 commits April 11, 2018 10:46

Skip to selected block first pass.

ac2857f

Use withSelect.

46bde92

Polish.

2ce7228

Proper CSS.

920f7f1

Rename and document getBlockWrapperDOMNode.

09811af

Use getBlockSelectionStart which also allows to simplify.

978b412

afercia force-pushed the add/skip-to-selected-block branch from eb20646 to 978b412 Compare April 11, 2018 09:05

afercia added this to the 2.7 milestone Apr 11, 2018

afercia merged commit b83d659 into master Apr 11, 2018

afercia deleted the add/skip-to-selected-block branch April 11, 2018 09:27

afercia mentioned this pull request Apr 12, 2018

Keyboard navigation from blocks to the sidebar and back to blocks #1182

Closed

afercia mentioned this pull request Apr 26, 2018

Allow users to customize keyboard shortcuts #3218

Open

afercia mentioned this pull request May 30, 2018

Skip link: "Skip to the selected block" not highly visible #6926

Closed

afercia mentioned this pull request Feb 21, 2019

Improve keyboard navigation between the block inspector and the block content #13663

Closed

mikachan mentioned this pull request Jun 24, 2021

Add readme for SkipToSelectedBlock component #32958

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

afercia commented Mar 28, 2018 •

edited

Loading

karmatosed commented Apr 3, 2018

karmatosed left a comment

aduth Apr 3, 2018

afercia Apr 3, 2018

aduth Apr 3, 2018

aduth Apr 3, 2018

afercia Apr 3, 2018

aduth Apr 3, 2018

afercia Apr 3, 2018

aduth Apr 4, 2018 •

edited

Loading

afercia Apr 4, 2018

aduth Apr 3, 2018

aduth Apr 3, 2018

afercia Apr 3, 2018

aduth Apr 3, 2018

afercia Apr 3, 2018

afercia commented Apr 3, 2018

rianrietveld commented Apr 4, 2018

afercia commented Apr 4, 2018

aduth left a comment

afercia commented Apr 11, 2018

mtias commented Apr 18, 2018

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

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

Conversation

afercia commented Mar 28, 2018 • edited Loading

karmatosed commented Apr 3, 2018

karmatosed left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth Apr 4, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afercia commented Apr 3, 2018

rianrietveld commented Apr 4, 2018

afercia commented Apr 4, 2018

aduth left a comment

Choose a reason for hiding this comment

afercia commented Apr 11, 2018

mtias commented Apr 18, 2018

afercia commented Mar 28, 2018 •

edited

Loading

aduth Apr 4, 2018 •

edited

Loading