Ticket #28599: focus admin menu.patch

src/wp-admin/css/admin-menu.css

@@ -47 +47 @@
         display: inline-block;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        -webkit-transition: all .1s ease-in-out;
-        transition: all .1s ease-in-out;
 }
 
 .icon16.icon-dashboard:before {
@@ -162 +160 @@
         display: block;
         line-height: 18px;
         padding: 2px 5px;
-        color: #eee;
+        color: #ddd;
 }
 
+#adminmenu a,
+#adminmenu .dashicons, .dashicons-before:before {
+        -webkit-transition-property: none;
+        transition-property: none;
+}
+
 #adminmenu .wp-submenu a {
         color: #bbb;
 }
@@ -175 +179 @@
 }
 
 #adminmenu a:hover,
-#adminmenu li.menu-top > a:focus,
+#adminmenu a:focus,
 #adminmenu .wp-submenu a:hover,
-#adminmenu .wp-submenu a:focus {
-        color: #2ea2cc;
+#adminmenu .wp-submenu a:focus,
+#collapse-menu:hover,
+#collapse-menu:hover #collapse-button div:after {
+        color: #fff;
+        background-color: #111;
 }
 
+#adminmenu a:focus {
+        color: #fff !important;
+        -webkit-box-shadow: inset 0 0 0 1px #fff;
+        box-shadow: inset 0 0 0 1px #fff;
+}
+
+/* no outline while being clicked */
+#adminmenu a:focus:active {
+        -webkit-box-shadow: none;
+        box-shadow: none;
+}
+
 #adminmenu li.menu-top {
         border: none;
         min-height: 34px;
@@ -245 +264 @@
         z-index: 10000;
 }
 
+/* current */
 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
 #adminmenu li.current a.menu-top,
 .folded #adminmenu li.wp-has-current-submenu,
@@ -256 +276 @@
         color: #fff;
 }
 
+/* current counters */
+#adminmenu li.current a .awaiting-mod,
+#adminmenu      li a.wp-has-current-submenu .update-plugins {
+        background-color: #2ea2cc;
+        color: #fff;
+}
+
+
 .folded #adminmenu .wp-submenu.sub-open,
 .folded #adminmenu .opensub .wp-submenu,
 .folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
@@ -299 +327 @@
 .folded #adminmenu .wp-has-current-submenu li > a {
         padding-right: 16px;
         padding-left: 14px;
-        -webkit-transition: all .1s ease-in-out;
-        transition: all .1s ease-in-out;
 }
 
 #adminmenu .wp-has-current-submenu ul > li > a,
@@ -357 +383 @@
 }
 
 div.wp-menu-image:before {
-        color: #999;
+        color: #aaa;
         padding: 7px 0;
-        -webkit-transition: all .1s ease-in-out;
-        transition: all .1s ease-in-out;
 }
 
-#adminmenu div.wp-menu-image:before {
-        color: #999;
+#adminmenu li:hover .wp-menu-image:before,
+#adminmenu .wp-has-current-submenu .wp-menu-image:before,
+#adminmenu a:focus .wp-menu-image:before,
+#adminmenu .opensub .wp-menu-image:before {
+        color: #eee;
 }
 
-#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
-#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
-#adminmenu .current div.wp-menu-image:before,
-#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
-#adminmenu a.current:hover div.wp-menu-image:before {
-        color: #fff;
-}
-
-#adminmenu li:hover div.wp-menu-image:before {
-        color: #2ea2cc;
-}
-
 .folded #adminmenu div.wp-menu-image {
         width: 35px;
         height: 30px;
@@ -444 +459 @@
 }
 
 /* flyout menu arrow */
-#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
+#adminmenu li.wp-has-submenu.wp-not-current-submenu:after {
         right: 0;
         border: solid transparent;
         content: " ";
@@ -457 +472 @@
         z-index: 10000;
 }
 
-.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
+.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:after {
         border-width: 4px;
         margin-top: -4px;
         top: 18px;
 }
 
-#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
+#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:after {
         border-right-color: #333;
 }
 
@@ -515 +530 @@
         z-index: 26;
 }
 
+#adminmenu .wp-submenu .awaiting-mod,
+#adminmenu .wp-submenu .update-plugins {
+        margin: 0 0 -2px 2px;
+}
+
 #adminmenu li .awaiting-mod span,
 #adminmenu li span.update-plugins span,
 #sidemenu li a span.update-plugins span {
@@ -522 +542 @@
         padding: 0 6px;
 }
 
-#adminmenu li.current a .awaiting-mod,
-#adminmenu      li a.wp-has-current-submenu .update-plugins {
-        background-color: #2ea2cc;
-        color: #fff;
-}
-
 #adminmenu li span.count-0,
 #sidemenu li a .count-0 {
         display: none;
@@ -538 +552 @@
         line-height: 34px;
         margin-top: 10px;
         color: #aaa;
-        -webkit-transition: all .1s ease-in-out;
-        transition: all .1s ease-in-out;
 }
 
-#collapse-menu:hover,
-#collapse-menu:hover #collapse-button div:after {
-        color: #2ea2cc;
-}
-
 .folded #collapse-menu span {
         display: none;
 }
@@ -584 +591 @@
         position: relative;
         text-align: center;
         width: 20px;
-        -webkit-transition: all .1s ease-in-out;
-        transition: all .1s ease-in-out;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
 }
@@ -626 +631 @@
         }
 
         .auto-fold #adminmenu .wp-submenu.sub-open,
-        .auto-fold #adminmenu .opensub .wp-submenu,
+        .auto-fold #adminmenu li.opensub .wp-submenu,
         .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
-        .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+        .auto-fold #adminmenu li.wp-has-current-submenu.opensub .wp-submenu,
         .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
         .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu  {
                 top: 0px;
@@ -639 +644 @@
         .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
                 position: absolute;
                 top: -1000em;
-                margin-right: -1px;
                 padding: 7px 0 8px;
                 z-index: 9999;
         }
@@ -804 +808 @@
                 position: relative;
                 display: block;
                 top: 0;
-                left: -1px;
+                left: 0;
                 -webkit-box-shadow: none;
                 box-shadow: none;
         }
@@ -814 +818 @@
                 display: none;
         }
 
-        .auto-fold #adminmenu .opensub .wp-submenu {
+        .auto-fold #adminmenu li.opensub .wp-submenu {
                 display: none;
         }
 
@@ -829 +833 @@
         .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
         .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
                 position: relative;
-                left: -1px;
+                left: 0;
                 right: 0;
                 top: 0;
         }
@@ -861 +865 @@
                 border: 1px solid transparent;
                 background: none;
                 height: 44px;
-                margin-left: -1px;
         }
 
         .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {

src/wp-admin/js/common.js

@@ -342 +342 @@
                         interval: 90
                 });
 
-                $adminmenu.on( 'focus.adminmenu', '.wp-submenu a', function( event ) {
+                $adminmenu.on( 'focus.adminmenu', '.wp-has-submenu, .wp-submenu a', function( event ) {
                         if ( $adminmenu.data( 'wp-responsive' ) ) {
                                 // The menu is in responsive mode, bail
                                 return;
@@ -349 +349 @@
                         }
 
                         $( event.target ).closest( 'li.menu-top' ).addClass( 'opensub' );
-                }).on( 'blur.adminmenu', '.wp-submenu a', function( event ) {
+                }).on( 'blur.adminmenu', '.wp-has-submenu, .wp-submenu a', function( event ) {
                         if ( $adminmenu.data( 'wp-responsive' ) ) {
                                 return;
                         }