Changeset 48293

Timestamp:

07/04/2020 10:42:41 AM (4 years ago)

Author:

afercia

Message:

Accessibility: Improve the focus style for Windows High Contrast mode in various parts of the admin interface.

Continues the introduction in core of new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline.
This change covers some parts of the interface for the meta boxes, Widgets, and the Customizer.

Props joedolson, kjellr, antpb, mikeschroder, Hareesh Pillai.
See #41286, #45910.
Fixes #47117.

Location:

trunk/src/wp-admin/css

Files:

• common.css (modified) (5 diffs)
• customize-controls.css (modified) (4 diffs)
• customize-nav-menus.css (modified) (1 diff)
• widgets.css (modified) (2 diffs)

trunk/src/wp-admin/css/common.css

@@ -3058 +3058 @@
 .js .postbox .handlediv:focus {
     box-shadow: none;
-    outline: none;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 
@@ -3065 +3066 @@
         0 0 0 1px #5b9dd9,
         0 0 2px 1px rgba(30, 140, 190, 0.8);
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 
@@ -3385 +3388 @@
 .accordion-section-title:hover:after {
     color: #23282d;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 
@@ -3467 +3472 @@
 
 .accordion-section-title:focus {
-    outline: none;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 
@@ -3473 +3479 @@
 .accordion-section-title:focus:after {
     border-color: #a0a5aa transparent;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 

trunk/src/wp-admin/css/customize-controls.css

@@ -843 +843 @@
     color: #0073aa;
     border-top-color: #0073aa;
-    outline: none;
     box-shadow: none;
-}
-
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
+}
+
+#customize-theme-controls .accordion-section-title:focus .customize-action {
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
+    outline-offset: 1px;
+}
 
 .customize-panel-back:hover,
@@ -855 +861 @@
     background: #f3f3f5;
     border-left-color: #0073aa;
-    outline: none;
     box-shadow: none;
+    /* Only visible in Windows High Contrast mode */
+    outline: 2px solid transparent;
+    outline-offset: -2px;
 }
 
@@ -1396 +1404 @@
     border-style: solid;
     box-shadow: 0 0 0 1px #007cba;
+    /* Only visible in Windows High Contrast mode */
     outline: 2px solid transparent;
 }
@@ -2213 +2222 @@
         background: #f3f3f5;
         border-left-color: #0073aa;
-        outline: none;
         box-shadow: none;
+        /* Only visible in Windows High Contrast mode */
+        outline: 2px solid transparent;
+        outline-offset: -2px;
     }
 

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -270 +270 @@
 .customize-screen-options-toggle:focus,
 #customize-controls .customize-info .customize-help-toggle:focus {
-    outline: none;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 

trunk/src/wp-admin/css/widgets.css

@@ -26 +26 @@
     background: none;
     cursor: pointer;
-    outline: none;
 }
 
@@ -325 +324 @@
 .sidebar-name .handlediv:focus {
     box-shadow: none;
-    outline: none;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }