Fix the editor content region focus style when scrolling

WordPress · Oct 27, 2017 · e893cb0 · e893cb0
1 parent 21070a4
commit e893cb0
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 14 deletions.
diff --git a/editor/layout/index.js b/editor/layout/index.js
@@ -8,6 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { NoticeList, Popover, navigateRegions } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -40,7 +41,7 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 			<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 /> }

diff --git a/editor/layout/style.scss b/editor/layout/style.scss
@@ -8,6 +8,7 @@
 }
 
 .editor-layout__content {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 }

diff --git a/editor/modes/text-editor/index.js b/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,12 +49,7 @@ class TextEditor extends Component {
 		const { value } = this.props;
 
 		return (
-			<div
-				role="region"
-				aria-label={ __( 'Editor content' ) }
-				className="editor-text-editor"
-				tabIndex="-1"
-			>
+			<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>

diff --git a/editor/modes/visual-editor/index.js b/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,16 +78,13 @@ 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 }
 				ref={ this.bindContainer }
-				tabIndex="-1"
 			>
 				<KeyboardShortcuts shortcuts={ {
 					'mod+a': this.selectAll,
@@ -105,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 */
 	}
 }