Changeset 47208

Timestamp:

02/07/2020 09:09:39 PM (5 years ago)

Author:

SergeyBiryukov

Message:

Accessibility: Customize: Improve focus styles for color picker and media upload button in Customizer.

Props audrasjb, timhavinga, afercia, karmatosed.
Fixes #48694.

Location:

trunk/src/wp-admin/css

Files:

• color-picker.css (modified) (1 diff)
• customize-controls.css (modified) (1 diff)

trunk/src/wp-admin/css/color-picker.css

@@ -121 +121 @@
 .iris-picker .ui-square-handle:focus,
 .iris-picker .iris-strip .ui-slider-handle:focus {
-    box-shadow:
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, 0.8);
+    border-color: #007cba;
+    border-style: solid;
+    box-shadow: 0 0 0 1px #007cba;
+    outline: 2px solid transparent;
 }
 
 .iris-picker .iris-palette:focus {
-    box-shadow:
-        inset 0 0 5px rgba(0, 0, 0, 0.4),
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, 0.8);
+    box-shadow: 0 0 0 2px #007cba;
 }
 

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

@@ -1393 +1393 @@
 .customize-control .attachment-media-view .button-add-media:focus {
     background-color: #fbfbfc;
+    border-color: #007cba;
     border-style: solid;
-    border-color: #5b9dd9;
-    box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
-    /* Only visible in Windows High Contrast mode */
+    box-shadow: 0 0 0 1px #007cba;
     outline: 2px solid transparent;
-    outline-offset: -2px;
 }