Polish menus and focus styles (#6812)

* Polish menus and focus styles This fixes a regression in menu focus styles that was introduced as part of some focus fixes to the movers way back. It also fixes #6734, as it changes how the shortcuts are spelled out. * Fix tooltips in menus. * Simplify keycodes. * Fix tests.
WordPress · May 23, 2018 · 5f3c7f8 · 5f3c7f8
1 parent 75d3c35
commit 5f3c7f8
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 15 deletions.
diff --git a/components/menu-item/style.scss b/components/menu-item/style.scss
@@ -20,16 +20,17 @@
 		padding-left: 0;
 	}
 
-	&:hover {
+	&:hover:not(:disabled):not([aria-disabled="true"]) {
 		@include menu-style__neutral;
 	}
 
-	&:focus {
+	&:focus:not(:disabled):not([aria-disabled="true"]) {
 		@include menu-style__focus;
 	}
 }
 
 .components-menu-item__shortcut {
-	float: right;
 	opacity: .5;
+	margin-right: 0;
+	margin-left: auto;
 }
diff --git a/components/panel/style.scss b/components/panel/style.scss
@@ -76,7 +76,7 @@
 	color: $dark-gray-900;
 	@include menu-style__neutral;
 
-	&:focus {
+	&:focus:not(:disabled):not([aria-disabled="true"]) {
 		@include menu-style__focus;
 	}
 

diff --git a/components/popover/style.scss b/components/popover/style.scss
@@ -80,7 +80,7 @@
 
 	.components-popover:not(.is-mobile) & {
 		position: absolute;
-		min-width: 240px;
+		min-width: 260px;
 		height: auto;
 	}
 

diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss
@@ -80,9 +80,8 @@
 		cursor: pointer;
 		@include menu-style__neutral;
 
-		&:hover,
-		&:focus,
-		&:not(:disabled):hover {
+		&:hover:not(:disabled):not([aria-disabled="true"]),
+		&:focus:not(:disabled):not([aria-disabled="true"]) {
 			@include menu-style__focus;
 		}
 

diff --git a/editor/components/block-switcher/style.scss b/editor/components/block-switcher/style.scss
@@ -49,4 +49,13 @@
 		margin-right: 8px;
 		height: 20px;
 	}
+
+	&:hover:not(:disabled):not([aria-disabled="true"]) {
+		@include menu-style__neutral;
+	}
+
+	&:focus:not(:disabled):not([aria-disabled="true"]) {
+		@include menu-style__focus;
+	}
+
 }
diff --git a/editor/components/post-last-revision/style.scss b/editor/components/post-last-revision/style.scss
@@ -8,7 +8,7 @@
 }
 
 // Needs specificity
-.components-icon-button:not(:disabled).editor-post-last-revision__title {
+.components-icon-button:not(:disabled):not([aria-disabled="true"]).editor-post-last-revision__title {
 
 	&:hover,
 	&:active {

diff --git a/utils/keycodes.js b/utils/keycodes.js
@@ -74,10 +74,10 @@ export const displayShortcut = mapValues( modifiers, ( modifier ) => {
 	return ( character, _isMac = isMacOS ) => {
 		const isMac = _isMac();
 		const replacementKeyMap = {
-			[ ALT ]: isMac ? '⌥option' : 'Alt',
-			[ CTRL ]: isMac ? '⌃control' : 'Ctrl',
+			[ ALT ]: isMac ? 'Option' : 'Alt',
+			[ CTRL ]: 'Ctrl',
 			[ COMMAND ]: '⌘',
-			[ SHIFT ]: isMac ? '⇧shift' : 'Shift',
+			[ SHIFT ]: 'Shift',
 		};
 		const shortcut = [
 			...modifier( _isMac ).map( ( key ) => get( replacementKeyMap, key, key ) ),

diff --git a/utils/test/keycodes.js b/utils/test/keycodes.js
@@ -31,7 +31,7 @@ describe( 'displayShortcut', () => {
 
 		it( 'should output shift+command symbols on MacOS', () => {
 			const shortcut = displayShortcut.primaryShift( 'm', isMacOSTrue );
-			expect( shortcut ).toEqual( '⇧shift+⌘M' );
+			expect( shortcut ).toEqual( 'Shift+⌘M' );
 		} );
 	} );
 
@@ -43,7 +43,7 @@ describe( 'displayShortcut', () => {
 
 		it( 'should output shift+option+command symbols on MacOS', () => {
 			const shortcut = displayShortcut.secondary( 'm', isMacOSTrue );
-			expect( shortcut ).toEqual( '⇧shift+⌥option+⌘M' );
+			expect( shortcut ).toEqual( 'Shift+Option+⌘M' );
 		} );
 	} );
 
@@ -55,7 +55,7 @@ describe( 'displayShortcut', () => {
 
 		it( 'should output control+option symbols on MacOS', () => {
 			const shortcut = displayShortcut.access( 'm', isMacOSTrue );
-			expect( shortcut ).toEqual( '⌃control+⌥option+M' );
+			expect( shortcut ).toEqual( 'Ctrl+Option+M' );
 		} );
 	} );
 } );