Changeset 44544 for trunk/src/wp-includes/css

Timestamp:

01/10/2019 04:46:44 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Add focus styles for Windows High Contrast mode.

Introduces in core new focus styles dedicated to Windows High Contrast mode. The
new styles use a transparent CSS outline as already explored in the Block Editor.
This first part covers some of the main user interface controls like buttons, links,
and media views elements. Other parts will be addressed in the next future.

Fixes #41286.

Location:

trunk/src/wp-includes/css

Files:

• admin-bar.css (modified) (2 diffs)
• buttons.css (modified) (5 diffs)
• media-views.css (modified) (6 diffs)

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

@@ -54 +54 @@
 #wpadminbar a img,
 #wpadminbar a img:hover {
-    outline: none;
     border: none;
     text-decoration: none;
@@ -72 +71 @@
 #wpadminbar div {
     box-shadow: none;
-    outline: none;
+}
+
+#wpadminbar a:focus {
+    /* Inherits transparent outline only visible in Windows High Contrast mode */
+    outline-offset: -1px;
 }
 

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

@@ -93 +93 @@
 }
 
+/* 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;
 }
 
@@ -191 +194 @@
     border-radius: 0;
     background: none;
-    outline: none;
     cursor: pointer;
     text-align: left;
@@ -212 +214 @@
         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;
 }
 
@@ -281 +285 @@
 
 .wp-core-ui .button.button-primary.button-hero {
- box-shadow: 0 2px 0 #006799;
+    box-shadow: 0 2px 0 #006799;
 }
 
@@ -288 +292 @@
 .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;
 }
 

trunk/src/wp-includes/css/media-views.css

@@ -49 +49 @@
         0 0 0 1px #5b9dd9,
         0 0 2px 1px rgba(30, 140, 190, .8);
-    outline: none;
     color: #124964;
+    /* Only visible in Windows High Contrast mode */
+    outline: 1px solid transparent;
 }
 
@@ -196 +197 @@
     border-color: #5b9dd9;
     box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+    /* Only visible in Windows High Contrast mode */
+    outline: 2px solid transparent;
+    outline-offset: -2px;
 }
 
@@ -836 +840 @@
         inset 0 0 2px 3px #fff,
         inset 0 0 0 7px #5b9dd9;
-    outline: none;
+    /* Only visible in Windows High Contrast mode */
+    outline: 2px solid transparent;
+    outline-offset: -6px;
 }
 
@@ -1010 +1016 @@
         0 0 0 1px #fff,
         0 0 0 2px #0073aa;
+}
+
+.wp-core-ui .attachment.selected .check:focus {
+    /* Only visible in Windows High Contrast mode */
+    outline: 2px solid transparent;
 }
 
@@ -1486 +1497 @@
         0 0 0 1px #fff,
         0 0 2px 3px #5b9dd9;
+    /* Only visible in Windows High Contrast mode */
+    outline: 2px solid transparent;
 }
 
@@ -1778 +1791 @@
     color: #0074a2;
     border-color: #5b9dd9;
-    outline: none;
     box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+    /* Only visible in Windows High Contrast mode */
+    outline: 2px solid transparent;
 }