Ticket #41286: 41286.diff

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

@@ -330 +330 @@
 #adminmenu .wp-submenu li {
         padding: 0;
         margin: 0;
-        overflow: hidden;
 }
 
 #adminmenu .wp-menu-image img {
@@ -547 +546 @@
         padding: 0;
         position: relative;
         overflow: visible;
-        line-height: 34px;
         background: none;
         color: #aaa;
         cursor: pointer;
-        outline: 0;
 }
 
-#collapse-button:hover,
+#collapse-button:hover {
+        color: #00b9eb;
+}
+
 #collapse-button:focus {
         color: #00b9eb;
+        /* Only visible in Windows High Contrast mode */
+        outline: 1px solid transparent;
+        outline-offset: -1px;
 }
 
 #collapse-button .collapse-button-icon,
@@ -566 +569 @@
         position: absolute;
         top: 0;
         left: 0;
-        line-height: 34px;
 }
 
+#collapse-button .collapse-button-label {
+        top: 8px;
+}
+
 #collapse-button .collapse-button-icon {
         width: 36px;
         height: 34px;

src/wp-admin/css/common.css

@@ -154 +154 @@
         line-height: normal;
         box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
         text-decoration: none;
-        outline: none;
+        /* Only visible in Windows High Contrast mode */
+        outline: 2px solid transparent;
+        outline-offset: -2px;
 }
 
 .hidden,
@@ -269 +271 @@
         box-shadow:
                 0 0 0 1px #5b9dd9,
                 0 0 2px 1px rgba(30, 140, 190, .8);
+        /* Only visible in Windows High Contrast mode */
+        outline: 1px solid transparent;
 }
 
 .ie8 a:focus {
@@ -275 +279 @@
         outline: #5b9dd9 solid 1px;
 }
 
-#adminmenu a:focus,
+#adminmenu a:focus {
+        box-shadow: none;
+        /* Only visible in Windows High Contrast mode */
+        outline: 1px solid transparent;
+        outline-offset: -1px;
+}
+
 .screen-reader-text:focus {
         box-shadow: none;
         outline: none;
@@ -609 +619 @@
         line-height: normal; /* IE8-IE11 need this for buttons */
         color: #0073aa; /* some of these controls are button elements and don't inherit from links */
         cursor: pointer;
-        outline: 0;
 }
 
 .wrap .wp-heading-inline + .page-title-action {
@@ -631 +640 @@
 .wrap .page-title-action:focus {
         border-color: #5b9dd9;
         box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+        /* Only visible in Windows High Contrast mode */
+        outline: 2px solid transparent;
 }
 
 .wrap h1.long-header {

src/wp-admin/css/forms.css

@@ -52 +52 @@
 textarea:focus {
         border-color: #5b9dd9;
         box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+        /* Only visible in Windows High Contrast mode */
+        outline: 2px solid transparent;
 }
 
 /* rtl:ignore */
@@ -236 +238 @@
         color: #72777c;
 }
 
-.form-invalid input, .form-invalid input:focus,
-.form-invalid select, .form-invalid select:focus {
+.form-invalid input,
+.form-invalid input:focus,
+.form-invalid select,
+.form-invalid select:focus {
         border-color: #dc3232 !important;
- box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
+        box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
 }
 
 .form-table .form-required.form-invalid td:after {

src/wp-includes/css/admin-bar.css

@@ -52 +52 @@
 #wpadminbar a,
 #wpadminbar a:hover,
 #wpadminbar a img,
-#wpadminbar a img:hover {
-        outline: none;
+#wpadminbar a img:hover {x
         border: none;
         text-decoration: none;
         background: none;
@@ -71 +70 @@
 #wpadminbar textarea,
 #wpadminbar div {
         box-shadow: none;
-        outline: none;
 }
 
+#wpadminbar a:focus {
+        /* Inherits transparent outline only visible in Windows High Contrast mode */
+        outline-offset: -1px;
+}
+
 #wpadminbar {
         direction: ltr;
         color: #ccc;

src/wp-includes/css/buttons.css

@@ -92 +92 @@
         padding: 0 36px;
 }
 
+/* Only visible in Windows High Contrast mode */
 .wp-core-ui .button:active,
 .wp-core-ui .button:focus {
-        outline: none;
+        outline: 2px solid transparent;
+        /* Reset inherited offset from Gutenberg */
+        outline-offset: 0;
 }
 
 .wp-core-ui .button.hidden {
@@ -192 +195 @@
         border: 0;
         border-radius: 0;
         background: none;
-        outline: none;
         cursor: pointer;
         text-align: left;
         /* Mimics the default link style in common.css */
@@ -213 +215 @@
         box-shadow:
                 0 0 0 1px #5b9dd9,
                 0 0 2px 1px rgba(30, 140, 190, .8);
+        /* Only visible in Windows High Contrast mode */
+        outline: 1px solid transparent;
 }
 
 .wp-core-ui .button-link-delete {
@@ -282 +286 @@
 }
 
 .wp-core-ui .button.button-primary.button-hero {
- box-shadow: 0 2px 0 #006799;
+        box-shadow: 0 2px 0 #006799;
 }
 
 .wp-core-ui .button.button-primary.button-hero.active,
@@ -289 +293 @@
 .wp-core-ui .button.button-primary.button-hero.active:hover,
 .wp-core-ui .button.button-primary.button-hero.active:focus,
 .wp-core-ui .button.button-primary.button-hero:active {
- box-shadow: inset 0 3px 0 #006799;
+        box-shadow: inset 0 3px 0 #006799;
 }
 
 /* ----------------------------------------------------------------------------