Merge pull request #1414 from WordPress/update/ui-controls-focus-style

Update UI controls focus style.
WordPress · Jul 24, 2017 · d8b2134 · d8b2134
2 parents 1d66b18 + 468f9bc
commit d8b2134
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 28 deletions.
diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
@@ -3,7 +3,6 @@
 // value is designed to work with).
 
 $z-layers: (
-	'.editor-mode-switcher .dashicon': -1,
 	'.editor-block-switcher__arrow': 1,
 	'.editor-visual-editor__block:before': -1,
 	'.editor-visual-editor__block {core/image aligned left or right}': 10,

diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js
@@ -40,10 +40,12 @@ function ModeSwitcher( { mode, onSwitch } ) {
 	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<div className="editor-mode-switcher">
+			<label htmlFor="editor-mode-switcher__input" className="screen-reader-text">{ __( 'Change editor mode' ) }</label>
 			<select
 				value={ mode }
 				onChange={ ( event ) => onSwitch( event.target.value ) }
 				className="editor-mode-switcher__input"
+				id="editor-mode-switcher__input"
 			>
 				{ MODES.map( ( { value, label } ) =>
 					<option key={ value } value={ value }>

diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
@@ -14,35 +14,39 @@
 		background: transparent;
 		line-height: 1;
 		border: 0;
-		border-radius: 0;
-		-webkit-appearance: none;
-		outline: none;
+		border-radius: 4px;
+		appearance: none;
 		cursor: pointer;
 		box-shadow: none;
-		padding-right: 0;
+		padding: 10px 8px;
 		font-size: $default-font-size;
+		line-height: 16px;
 		height: auto;
 
+		/* IE10+ */
+		&::-ms-expand {
+			display: none;
+		}
+
 		@include break-small {
-			padding-right: 24px;
+			padding-right: 26px;
+		}
+
+		&:focus {
+			outline: none;
+			box-shadow: 0 0 0 1px $blue-medium-400, 0 0 2px 1px $blue-medium-400;
 		}
 	}
 
 	.dashicon {
 		position: relative;
-		z-index: z-index( '.editor-mode-switcher .dashicon' );
-		margin-left: -24px;
-		margin-top: -1px;
-
+		left: -26px;
+		margin-right: -20px;
+		pointer-events: none;
 		display: none;
 
 		@include break-small {
 			display: block;
 		}
 	}
-
-	&:hover,
-	select:hover {
-		color: $dark-gray-900;
-	}
 }
diff --git a/editor/header/saved-state/style.scss b/editor/header/saved-state/style.scss
@@ -13,7 +13,6 @@
 		color: $blue-wordpress;
 
 		&:focus {
-			box-shadow: none;
 			outline: none;
 		}
 

diff --git a/editor/header/tools/style.scss b/editor/header/tools/style.scss
@@ -19,6 +19,13 @@
 	@include break-medium() {
 		margin-right: 4px;
 	}
+
+	@include break-mobile {
+		&.dashicons-undo,
+		&.dashicons-redo {
+			margin-right: 0;
+		}
+	}
 }
 
 .editor-tools__tabs {

diff --git a/editor/sidebar/post-trash/index.js b/editor/sidebar/post-trash/index.js
@@ -24,7 +24,7 @@ function PostTrash( { postId, postType, ...props } ) {
 	const onClick = () => props.trashPost( postId, postType );
 
 	return (
-		<Button className="editor-post-trash" onClick={ onClick }>
+		<Button className="editor-post-trash button-link button-link-delete" onClick={ onClick }>
 			{ __( 'Move to trash' ) }
 			<Dashicon icon="trash" />
 		</Button>

diff --git a/editor/sidebar/post-trash/style.scss b/editor/sidebar/post-trash/style.scss
@@ -1,14 +1,10 @@
 .editor-post-trash {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	cursor: pointer;
-	color: inherit;
-	flex-grow: 1;
-	color: $alert-red;
-
+	margin-left: auto !important;
+	text-decoration: underline;
+
 	.dashicon {
-		margin-right: -10px;
-		margin-left: 10px;
+		display: inline-block;
+		vertical-align: middle;
+		margin: -3px -4px 0 10px;
 	}
-}
+}