Changeset 46425

Timestamp:

10/07/2019 07:55:58 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Improve and modernize user interface controls: Revert the new links focus style.

Thew new dotted outline for the links focus style introduced in [46241] doesn't appear to be ready to guarantee a good indication of focus.
It was agreed to restore the previous links focus style and postpone exploration for a new style to the next release cycle.
Partially reverts [46241] and [46293].

See #34904, #47153.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (7 diffs)
• wp-admin/css/login.css (modified) (1 diff)
• wp-admin/css/themes.css (modified) (1 diff)
• wp-includes/css/buttons.css (modified) (1 diff)

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

@@ -273 +273 @@
 .wp-person a:focus .gravatar {
     color: #124964;
-    outline: 1px dotted #555d66;
+    box-shadow:
+        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;
 }
 
@@ -281 +285 @@
 
 #adminmenu a:focus {
-    outline: 1px dotted #555d66;
+    box-shadow: none;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
     outline-offset: -1px;
 }
@@ -834 +840 @@
 
 .tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
-    outline: 1px dotted #555d66;
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 
@@ -1430 +1438 @@
 
 .notice-dismiss:focus {
-    outline: 1px dotted #555d66;
+    outline: none;
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 
@@ -3063 +3074 @@
 
 .js .postbox .handlediv:focus .toggle-indicator:before {
-    outline: 1px dotted #555d66;
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 
@@ -3158 +3171 @@
 [role="treeitem"] .folder-label.focus {
     color: #124964;
-    outline: 1px dotted #555d66;
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 [role="treeitem"].hover,
@@ -3385 +3400 @@
 
 .widget-top .widget-action:focus .toggle-indicator:before {
-    outline: 1px dotted #555d66;
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 

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

@@ -33 +33 @@
 a:focus {
     color: #124964;
-    outline: 1px dotted #555d66;
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 

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

@@ -177 +177 @@
 
 .theme-browser .theme:focus {
-    outline: 1px dotted #555d66;
+    border-color: #5b9dd9;
+    box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
 }
 

trunk/src/wp-includes/css/buttons.css

@@ -212 +212 @@
 .wp-core-ui .button-link:focus {
     color: #124964;
-    outline: 1px dotted #555d66;
+    box-shadow:
+        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;
 }