From 4baa54c4a360c7d4846738a8ad34b0e83f3b0b85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Fri, 19 May 2017 16:47:21 +0200
Subject: [PATCH] Add accessibleFocus utility.

This gives us the ability to augment focused styles and make them
highly visible without affecting input devices that don't navigate
around the UI using the keyboard.
---
 components/icon-button/style.scss |  2 +-
 components/toolbar/style.scss     |  2 +-
 editor/accessible-focus/index.js  | 24 ++++++++++++++++++++++++
 editor/block-switcher/style.scss  |  2 +-
 editor/index.js                   |  3 +++
 5 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 editor/accessible-focus/index.js

diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss
index 8e893402d6292..1ef192bdff041 100644
--- a/components/icon-button/style.scss
+++ b/components/icon-button/style.scss
@@ -15,7 +15,7 @@
 		}
 	}
 
-	&:focus:before {
+	.has-accessible-focus &:focus:before {
 		content: '';
 		position: absolute;
 		top: 0;
diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss
index c54cb535b8cb6..e42db735beb35 100644
--- a/components/toolbar/style.scss
+++ b/components/toolbar/style.scss
@@ -21,7 +21,7 @@
 		margin-left: 3px;
 	}
 
-	&:focus:before {
+	.has-accessible-focus &:focus:before {
 		top: -4px;
 		right: -4px;
 		bottom: -4px;
diff --git a/editor/accessible-focus/index.js b/editor/accessible-focus/index.js
new file mode 100644
index 0000000000000..579b906bbd925
--- /dev/null
+++ b/editor/accessible-focus/index.js
@@ -0,0 +1,24 @@
+// keyCodes for tab, space, left, up, right, down respectively
+const keyboardNavigationKeycodes = [ 9, 32, 37, 38, 39, 40 ];
+let keyboardNavigation = false;
+
+function accessibleFocus() {
+	document.addEventListener( 'keydown', function( event ) {
+		if ( keyboardNavigation ) {
+			return;
+		}
+		if ( keyboardNavigationKeycodes.indexOf( event.keyCode ) !== -1 ) {
+			keyboardNavigation = true;
+			document.documentElement.classList.add( 'has-accessible-focus' );
+		}
+	} );
+	document.addEventListener( 'mouseup', function() {
+		if ( ! keyboardNavigation ) {
+			return;
+		}
+		keyboardNavigation = false;
+		document.documentElement.classList.remove( 'has-accessible-focus' );
+	} );
+}
+
+export default accessibleFocus;
diff --git a/editor/block-switcher/style.scss b/editor/block-switcher/style.scss
index 7a0757046e2f2..5e39b457aa9ce 100644
--- a/editor/block-switcher/style.scss
+++ b/editor/block-switcher/style.scss
@@ -13,7 +13,7 @@
 	margin: 3px;
 	padding: 6px;
 
-	&:focus:before {
+	.has-accessible-focus &:focus:before {
 		top: -3px;
 		right: -3px;
 		bottom: -3px;
diff --git a/editor/index.js b/editor/index.js
index 892323312d4ee..52797469db529 100644
--- a/editor/index.js
+++ b/editor/index.js
@@ -10,6 +10,7 @@ import { Provider as SlotFillProvider } from 'react-slot-fill';
 import './assets/stylesheets/main.scss';
 import Layout from './layout';
 import { createReduxStore } from './state';
+import accessibleFocus from './accessible-focus';
 
 /**
  * Initializes and returns an instance of Editor.
@@ -25,6 +26,8 @@ export function createEditorInstance( id, post ) {
 		blocks: wp.blocks.parse( post.content.raw ),
 	} );
 
+	accessibleFocus();
+
 	wp.element.render(
 		<ReduxProvider store={ store }>
 			<SlotFillProvider>