Keyboard accessibility: Add a "Skip link" to jump back from the inspe…

…ctor to the selected block

* Skip to selected block first pass.

* Use withSelect.

* Polish.

* Proper CSS.

* Rename and document getBlockWrapperDOMNode.

* Use getBlockSelectionStart which also allows to simplify.

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

@@ -68,6 +68,8 @@ $z-layers: (
 	'.components-popover.is-bottom': 99990,
 
 	'.components-autocomplete__results': 1000000,
+
+	'.skip-to-selected-block': 100000,
 );
 
 @function z-index( $key ) {

edit-post/components/sidebar/style.scss

@@ -81,6 +81,13 @@
 	p + div.components-toolbar {
 		margin-top: -1em;
 	}
+
+	.editor-skip-to-selected-block:focus {
+		top: auto;
+		right: 10px;
+		bottom: 10px;
+		left: auto;
+	}
 }
 
 /* Visual and Text editor both */

editor/components/block-inspector/index.js

@@ -20,6 +20,7 @@ import { PanelBody } from '@wordpress/components';
  * Internal Dependencies
  */
 import './style.scss';
+import SkipToSelectedBlock from '../skip-to-selected-block';
 import { getSelectedBlock, getSelectedBlockCount } from '../../store/selectors';
 
 const BlockInspector = ( { selectedBlock, count } ) => {
@@ -55,6 +56,7 @@ const BlockInspector = ( { selectedBlock, count } ) => {
 				</PanelBody>
 			) }
 		</InspectorAdvancedControls.Slot>,
+		<SkipToSelectedBlock key="back" />,
 	];
 };
 

editor/components/index.js

@@ -68,6 +68,7 @@ export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into
 export { default as NavigableToolbar } from './navigable-toolbar';
 export { default as ObserveTyping } from './observe-typing';
 export { default as PreserveScrollInReorder } from './preserve-scroll-in-reorder';
+export { default as SkipToSelectedBlock } from './skip-to-selected-block';
 export { default as Warning } from './warning';
 export { default as WritingFlow } from './writing-flow';
 

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

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import { getBlockFocusableWrapper } from '../../utils/dom';
+
+const SkipToSelectedBlock = ( { selectedBlockUID } ) => {
+	const onClick = () => {
+		const selectedBlockElement = getBlockFocusableWrapper( selectedBlockUID );
+		selectedBlockElement.focus();
+	};
+
+	return (
+		selectedBlockUID &&
+		<button type="button" className="button editor-skip-to-selected-block" onClick={ onClick }>
+			{ __( 'Skip to the selected block' ) }
+		</button>
+	);
+};
+
+export default withSelect( ( select ) => {
+	return {
+		selectedBlockUID: select( 'core/editor' ).getBlockSelectionStart(),
+	};
+} )( SkipToSelectedBlock );

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

@@ -0,0 +1,20 @@
+.editor-skip-to-selected-block {
+	position: absolute;
+	top: -9999em;
+
+	&:focus {
+		height: auto;
+		width: auto;
+		display: block;
+		font-size: 14px;
+		font-weight: 600;
+		padding: 15px 23px 14px;
+		background: #f1f1f1;
+		color: $blue-wordpress;
+		line-height: normal;
+		box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+		text-decoration: none;
+		outline: none;
+		z-index: z-index( '.skip-to-selected-block' );
+	}
+}

editor/utils/dom.js

@@ -16,6 +16,19 @@ export function getBlockDOMNode( uid ) {
 	return document.querySelector( '[data-block="' + uid + '"]' );
 }
 
+/**
+ * Given a block UID, returns the corresponding DOM node for the block focusable
+ * wrapper, if exists. As much as possible, this helper should be avoided, and
+ * used only in cases where isolated behaviors need remote access to a block node.
+ *
+ * @param {string} uid Block UID.
+ *
+ * @return {Element} Block DOM node.
+ */
+export function getBlockFocusableWrapper( uid ) {
+	return getBlockDOMNode( uid ).closest( '.editor-block-list__block' );
+}
+
 /**
  * Returns true if the given HTMLElement is a block focus stop. Blocks without
  * their own text fields rely on the focus stop to be keyboard navigable.