Changeset 46241 for trunk/src/wp-admin/css/common.css

Timestamp:

09/23/2019 02:42:36 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.

• Introduces new styles for the buttons, with better contrast for borders and better focus style.
• Introduces a new focus style for links.
• The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).

Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.

File:

• trunk/src/wp-admin/css/common.css (modified) (10 diffs)

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

@@ -273 +273 @@
 .wp-person a:focus .gravatar {
     color: #124964;
-    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;
+    outline: 1px dotted #555d66;
 }
 
@@ -285 +281 @@
 
 #adminmenu a:focus {
-    box-shadow: none;
-    /* Only visible in Windows High Contrast mode */
-    outline: 1px solid transparent;
+    outline: 1px dotted #555d66;
     outline-offset: -1px;
 }
@@ -624 +618 @@
     top: -3px;
     text-decoration: none;
-    border: none;
-    border: 1px solid #ccc;
+    border: 1px solid #7e8993;
     border-radius: 2px;
-    background: #f7f7f7;
     text-shadow: none;
     font-weight: 600;
     font-size: 13px;
     line-height: normal; /* IE8-IE11 need this for buttons */
-    color: #0073aa; /* some of these controls are button elements and don't inherit from links */
+    color: #555; /* use the standard color used for buttons */
     cursor: pointer;
 }
@@ -642 +634 @@
 .wrap .add-new-h2:hover, /* deprecated */
 .wrap .page-title-action:hover {
-    border-color: #008EC2;
-    background: #00a0d2;
-    color: #fff;
+    background: #f3f5f6;
+    border-color: #7e8993;
+    color: #007cba;
 }
 
 /* lower specificity: color needs to be overridden by :hover and :active */
 .page-title-action:focus {
-    color: #124964;
+    color: #016087;
 }
 
@@ -659 +651 @@
 
 .wrap .page-title-action:focus {
-    border-color: #5b9dd9;
-    box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+    border-color: #007cba;
+    box-shadow: 0 0 0 1px #007cba;
     /* Only visible in Windows High Contrast mode */
     outline: 2px solid transparent;
@@ -842 +834 @@
 
 .tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
-    box-shadow:
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, 0.8);
+    outline: 1px dotted #555d66;
 }
 
@@ -1442 +1432 @@
 
 .notice-dismiss:focus {
-    outline: none;
-    box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
+    outline: 1px dotted #555d66;
 }
 
@@ -3071 +3060 @@
 
 .js .postbox .handlediv:focus .toggle-indicator:before {
-    box-shadow:
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, 0.8);
+    outline: 1px dotted #555d66;
 }
 
@@ -3167 +3154 @@
 [role="treeitem"] .folder-label.focus {
     color: #124964;
-    box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
+    outline: 1px dotted #555d66;
 }
 [role="treeitem"].hover,
@@ -3394 +3381 @@
 
 .widget-top .widget-action:focus .toggle-indicator:before {
-    box-shadow:
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, 0.8);
+    outline: 1px dotted #555d66;
 }