From adbdbb713897769a18439c2e5543c49fb500bfab Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 16 Jan 2018 11:35:57 +0100
Subject: [PATCH] Try a different approach for styling movers

---
 components/dashicon/index.js             |  1 +
 editor/assets/stylesheets/_mixins.scss   |  8 +------
 editor/components/block-mover/style.scss | 27 ++++++++++++++++++++++--
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/components/dashicon/index.js b/components/dashicon/index.js
index 15c64ac6609dad..2ce27ddaa08abe 100644
--- a/components/dashicon/index.js
+++ b/components/dashicon/index.js
@@ -857,6 +857,7 @@ export default class Dashicon extends wp.element.Component {
 
 		return (
 			<svg
+				tabindex="-1"
 				aria-hidden
 				role="img"
 				focusable="false"
diff --git a/editor/assets/stylesheets/_mixins.scss b/editor/assets/stylesheets/_mixins.scss
index 7f64400544f4b1..9f3f8a64eb7bd8 100644
--- a/editor/assets/stylesheets/_mixins.scss
+++ b/editor/assets/stylesheets/_mixins.scss
@@ -121,31 +121,25 @@ $float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } );
 }
 
 @mixin button-style__hover {
-	color: $dark-gray-900;	// previously $blue-medium-500
+	color: $dark-gray-900;
 	box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white;
 }
 
 @mixin button-style__focus-active() {
 	outline: none;
 	color: $dark-gray-900;
-	//box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
-	//background: $light-gray-300;
 	box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
 }
 
 @mixin button-style__active() {
 	outline: none;
 	color: $dark-gray-900;
-	//box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
-	//background: $light-gray-300;
 	box-shadow: inset 0 0 0 1px $dark-gray-400, inset 0 0 0 2px $white, 0 1px 1px rgba( $dark-gray-900, .2 );
 }
 
 @mixin tab-style__focus-active() {
 	outline: none;
 	color: $dark-gray-900;
-	//box-shadow: 0 0 0 1px $dark-gray-500;
-	//background: $light-gray-300;
 	box-shadow: inset 0 0 0 1px $dark-gray-300;
 }
 
diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
index 95856486b2897c..2e267f60b6899c 100644
--- a/editor/components/block-mover/style.scss
+++ b/editor/components/block-mover/style.scss
@@ -16,11 +16,34 @@
 		pointer-events: none;
 	}
 
+	&:first-child {
+		margin-bottom: 4px;
+	}
+
+	// unstyle inherited icon button styles
+	&:not(:disabled):hover,
+  	&:not(:disabled):active,
+	&:not(:disabled):focus {
+		box-shadow: none;
+		color: inherit;
+	}
+
+	// apply styles to SVG directly
 	.dashicon {
 		display: block;
+		position: relative; // Fixing the Safari bug for `<button>`s overflow
+		border-radius: 50%;
 	}
 
-	&:first-child {
-		margin-bottom: 4px;
+	&:not(:disabled):hover .dashicon {
+		@include button-style__hover;
+	}
+
+	&:not(:disabled):active .dashicon {
+		@include button-style__active;
+	}
+
+	&:not(:disabled):focus .dashicon {
+		@include button-style__focus-active;
 	}
 }