Accessibility: Adding Keyboard Shorcuts to navigate the editor regions

components/higher-order/navigate-regions/README.md

@@ -0,0 +1,19 @@
+# navigateRegions
+
+`navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) adding keyboard navigation to switch between the different DOM elements marked as "regions" (role="region"). These regions should be focusable (By adding a tabIndex attribute for example)
+
+## Example:
+
+```jsx
+function MyLayout() {
+	return (
+		<div>
+			<div role="region" tabIndex="-1">Header</div>
+			<div role="region" tabIndex="-1">Content</div>
+			<div role="region" tabIndex="-1">Sidebar</div>
+		</div>
+	);
+}
+
+export default navigateRegions( MyLayout );
+```

components/higher-order/navigate-regions/index.js

@@ -0,0 +1,77 @@
+/**
+ * External Dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress Dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import KeyboardShortcuts from '../../keyboard-shortcuts';
+
+function navigateRegions( WrappedComponent ) {
+	return class extends Component {
+		constructor() {
+			super( ...arguments );
+			this.bindContainer = this.bindContainer.bind( this );
+			this.focusNextRegion = this.focusRegion.bind( this, 1 );
+			this.focusPreviousRegion = this.focusRegion.bind( this, -1 );
+			this.onClick = this.onClick.bind( this );
+			this.state = {
+				isFocusingRegions: false,
+			};
+		}
+
+		bindContainer( ref ) {
+			this.container = ref;
+		}
+
+		focusRegion( offset ) {
+			const regions = [ ...this.container.querySelectorAll( '[role="region"]' ) ];
+			if ( ! regions.length ) {
+				return;
+			}
+			let nextRegion = regions[ 0 ];
+			const selectedIndex = regions.indexOf( document.activeElement );
+			if ( selectedIndex !== -1 ) {
+				let nextIndex = selectedIndex + offset;
+				nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
+				nextIndex = nextIndex === regions.length ? 0 : nextIndex;
+				nextRegion = regions[ nextIndex ];
+			}
+
+			nextRegion.focus();
+			this.setState( { isFocusingRegions: true } );
+		}
+
+		onClick() {
+			this.setState( { isFocusingRegions: false } );
+		}
+
+		render() {
+			const className = classnames( 'components-navigate-regions', {
+				'is-focusing-regions': this.state.isFocusingRegions,
+			} );
+
+			// Disable reason: Clicking the editor should dismiss the regions focus style
+			/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+			return (
+				<div ref={ this.bindContainer } className={ className } onClick={ this.onClick }>
+					<KeyboardShortcuts shortcuts={ {
+						'ctrl+`': this.focusNextRegion,
+						'ctrl+shift+`': this.focusPreviousRegion,
+					} } />
+					<WrappedComponent { ...this.props } />
+				</div>
+			);
+			/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+		}
+	};
+}
+
+export default navigateRegions;

components/higher-order/navigate-regions/style.scss

@@ -0,0 +1,12 @@
+.components-navigate-regions.is-focusing-regions [role="region"] {
+	&:focus:after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		pointer-events: none;
+		border: 4px solid $blue-medium-400;
+	}
+}

components/index.js

@@ -31,6 +31,7 @@ export { default as Tooltip } from './tooltip';
 export { Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 
 // Higher-Order Components
+export { default as navigateRegions } from './higher-order/navigate-regions';
 export { default as withAPIData } from './higher-order/with-api-data';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withInstanceId } from './higher-order/with-instance-id';

editor/assets/stylesheets/main.scss

@@ -74,6 +74,10 @@ body.gutenberg-editor-page {
 	iframe {
 		width: 100%;
 	}
+
+	.components-navigate-regions {
+		height: 100%;
+	}
 }
 
 .editor-post-title,

editor/header/index.js

@@ -35,6 +35,7 @@ function Header( {
 			role="region"
 			aria-label={ __( 'Editor toolbar' ) }
 			className="editor-header"
+			tabIndex="-1"
 		>
 			<div className="editor-header__content-tools">
 				<Inserter position="bottom right" />

editor/layout/index.js

@@ -7,7 +7,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { NoticeList, Popover } from '@wordpress/components';
+import { NoticeList, Popover, navigateRegions } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -34,13 +35,13 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 	} );
 
 	return (
-		<div key="editor" className={ className }>
+		<div className={ className }>
 			<DocumentTitle />
 			<NoticeList onRemove={ props.removeNotice } notices={ notices } />
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />
 			<Header />
-			<div className="editor-layout__content">
+			<div className="editor-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
 				<div className="editor-layout__editor">
 					{ mode === 'text' && <TextEditor /> }
 					{ mode === 'visual' && <VisualEditor /> }
@@ -60,4 +61,4 @@ export default connect(
 		notices: getNotices( state ),
 	} ),
 	{ removeNotice }
-)( Layout );
+)( navigateRegions( Layout ) );

editor/layout/style.scss

@@ -8,6 +8,7 @@
 }
 
 .editor-layout__content {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 }

editor/modes/text-editor/index.js

@@ -7,7 +7,6 @@ import Textarea from 'react-autosize-textarea';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { parse } from '@wordpress/blocks';
 
@@ -50,11 +49,7 @@ class TextEditor extends Component {
 		const { value } = this.props;
 
 		return (
-			<div
-				role="region"
-				aria-label={ __( 'Editor content' ) }
-				className="editor-text-editor"
-			>
+			<div className="editor-text-editor">
 				<div className="editor-text-editor__formatting">
 					<div className="editor-text-editor__formatting-group">
 						<button className="editor-text-editor__bold">b</button>

editor/modes/visual-editor/index.js

@@ -7,7 +7,6 @@ import { first, last } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Component, findDOMNode } from '@wordpress/element';
 import { KeyboardShortcuts } from '@wordpress/components';
 
@@ -79,11 +78,9 @@ class VisualEditor extends Component {
 
 	render() {
 		// Disable reason: Clicking the canvas should clear the selection
-		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		return (
 			<div
-				role="region"
-				aria-label={ __( 'Editor content' ) }
 				className="editor-visual-editor"
 				onMouseDown={ this.onClick }
 				onTouchStart={ this.onClick }
@@ -104,7 +101,7 @@ class VisualEditor extends Component {
 				<TableOfContents />
 			</div>
 		);
-		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	}
 }
 

editor/sidebar/index.js

@@ -21,7 +21,12 @@ import { getActivePanel } from '../selectors';
 
 const Sidebar = ( { panel } ) => {
 	return (
-		<div className="editor-sidebar" role="region" aria-label={ __( 'Editor settings' ) }>
+		<div
+			className="editor-sidebar"
+			role="region"
+			aria-label={ __( 'Editor settings' ) }
+			tabIndex="-1"
+		>
 			<Header />
 			{ panel === 'document' && <PostSettings key="settings" /> }
 			{ panel === 'block' && <BlockInspector /> }