Accessibility: Adding Keyboard Shorcuts to navigate the editor regions

WordPress · Oct 20, 2017 · bb5048c · bb5048c
1 parent e187494
commit bb5048c
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 23 deletions.
diff --git a/editor/header/index.js b/editor/header/index.js
@@ -34,6 +34,7 @@ function Header( {
 			role="region"
 			aria-label={ __( 'Editor toolbar' ) }
 			className="editor-header"
+			tabIndex="-1"
 		>
 			<div className="editor-header__content-tools">
 				<Inserter position="bottom right" />

diff --git a/editor/layout/index.js b/editor/layout/index.js
@@ -7,7 +7,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { NoticeList, Popover } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { NoticeList, Popover, KeyboardShortcuts } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -28,29 +29,77 @@ import {
 	getNotices,
 } from '../selectors';
 
-function Layout( { mode, isSidebarOpened, notices, ...props } ) {
-	const className = classnames( 'editor-layout', {
-		'is-sidebar-opened': isSidebarOpened,
-	} );
-
-	return (
-		<div key="editor" className={ className }>
-			<DocumentTitle />
-			<NoticeList onRemove={ props.removeNotice } notices={ notices } />
-			<UnsavedChangesWarning />
-			<AutosaveMonitor />
-			<Header />
-			<div className="editor-layout__content">
-				<div className="editor-layout__editor">
-					{ mode === 'text' && <TextEditor /> }
-					{ mode === 'visual' && <VisualEditor /> }
+class Layout 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 { mode, isSidebarOpened, notices, ...props } = this.props;
+		const className = classnames( 'editor-layout', {
+			'is-sidebar-opened': isSidebarOpened,
+			'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 key="editor" className={ className } ref={ this.bindContainer } onClick={ this.onClick }>
+				<DocumentTitle />
+				<NoticeList onRemove={ props.removeNotice } notices={ notices } />
+				<UnsavedChangesWarning />
+				<AutosaveMonitor />
+				<Header />
+				<div className="editor-layout__content">
+					<div className="editor-layout__editor">
+						{ mode === 'text' && <TextEditor /> }
+						{ mode === 'visual' && <VisualEditor /> }
+					</div>
+					<MetaBoxes location="normal" />
 				</div>
-				<MetaBoxes location="normal" />
+				{ isSidebarOpened && <Sidebar /> }
+				<Popover.Slot />
+				<KeyboardShortcuts shortcuts={ {
+					'ctrl+r': this.focusNextRegion,
+					'ctrl+shift+r': this.focusPreviousRegion,
+				} } />
 			</div>
-			{ isSidebarOpened && <Sidebar /> }
-			<Popover.Slot />
-		</div>
-	);
+			/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+		);
+	}
 }
 
 export default connect(

diff --git a/editor/layout/style.scss b/editor/layout/style.scss
@@ -5,6 +5,17 @@
 
 .editor-layout {
 	position: relative;
+
+	&.is-focusing-regions [role="region"]:focus:after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		pointer-events: none;
+		border: 2px solid $blue-medium-400;
+	}
 }
 
 .editor-layout__content {

diff --git a/editor/modes/text-editor/index.js b/editor/modes/text-editor/index.js
@@ -54,6 +54,7 @@ class TextEditor extends Component {
 				role="region"
 				aria-label={ __( 'Editor content' ) }
 				className="editor-text-editor"
+				tabIndex="-1"
 			>
 				<div className="editor-text-editor__formatting">
 					<div className="editor-text-editor__formatting-group">

diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js
@@ -84,6 +84,7 @@ class VisualEditor extends Component {
 				onMouseDown={ this.onClick }
 				onTouchStart={ this.onClick }
 				ref={ this.bindContainer }
+				tabIndex="-1"
 			>
 				<KeyboardShortcuts shortcuts={ {
 					'mod+a': this.selectAll,

diff --git a/editor/sidebar/index.js b/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 /> }