From 8c575d207c258f6710d8f5aa93293d6c61b0fd2a Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 4 Sep 2018 10:56:00 +0200
Subject: [PATCH] Try: Remove hover style and make un-tabbable

This needs a sanity check and is a separate commit for that reason, so easier to revert if it isn't kosher.

This commit removes the hover and focus styles for the drag handle.

It also zeroes out the aria label, makes aria hidden, and unfocusable using the keyboard. The idea being that you cannot at all interact with the drag handle using just the keyboard, we have the movers for that, and thus this item shouldn't be announced to either screen readers or be part of the tab index as that's simply useless.

Thoughts?
---
 .../editor/src/components/block-mover/drag-handle.js  |  7 +++++--
 packages/editor/src/components/block-mover/style.scss | 11 +++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/block-mover/drag-handle.js b/packages/editor/src/components/block-mover/drag-handle.js
index 5f7584c29744b..aa7e1efaf33f7 100644
--- a/packages/editor/src/components/block-mover/drag-handle.js
+++ b/packages/editor/src/components/block-mover/drag-handle.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { IconButton, Draggable } from '@wordpress/components';
 
-export const IconDragHandle = ( { isVisible, className, icon, label, onFocus, onBlur, onDragStart, onDragEnd, blockElementId, order, rootClientId, clientId, layout } ) => {
+export const IconDragHandle = ( { isVisible, className, icon, onFocus, onBlur, onDragStart, onDragEnd, blockElementId, order, rootClientId, clientId, layout } ) => {
 	if ( ! isVisible ) {
 		return null;
 	}
@@ -33,7 +33,10 @@ export const IconDragHandle = ( { isVisible, className, icon, label, onFocus, on
 					<IconButton
 						className={ dragHandleClassNames }
 						icon={ icon }
-						label={ label }
+						aria-hidden="true"
+						focusable="false"
+						aria-label=""
+						tabIndex="-1"
 						onFocus={ onFocus }
 						onBlur={ onBlur }
 						onDragStart={ onDraggableStart }
diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss
index 9d569b8a6a310..ad75de84aedfa 100644
--- a/packages/editor/src/components/block-mover/style.scss
+++ b/packages/editor/src/components/block-mover/style.scss
@@ -93,6 +93,17 @@
 .editor-block-mover__control-drag-handle {
 	cursor: move; // Fallback for IE/Edge < 14
 	cursor: grab;
+
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active,
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):focus {
+		box-shadow: none;
+		background: none;
+	}
+
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active {
+		cursor: grabbing;
+	}
 }
 
 .editor-block-mover__description {