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

@@ -15,7 +15,7 @@
 		}
 	}
 
-	&:focus:before {
+	.has-accessible-focus &:focus:before {
 		content: '';
 		position: absolute;
 		top: 0;

components/toolbar/style.scss

@@ -21,7 +21,7 @@
 		margin-left: 3px;
 	}
 
-	&:focus:before {
+	.has-accessible-focus &:focus:before {
 		top: -4px;
 		right: -4px;
 		bottom: -4px;

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;

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;

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>