Changeset 55307

Timestamp:

02/11/2023 05:37:30 PM (2 years ago)

Author:

joedolson

Message:

Toolbar: Prevent false positive on automated contrast testing.

The non-focused state of the .screen-reader-shortcut element in the admin bar fails contrast tests. This has no real-world consequences, but raises false positives in some automated testing tools. This fix is largely so people using automated testing will not raise false positives.

Props sabernhardt, afercia, robinwpdeveloper, re_enter_rupok.
Fixes #56789.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (2 diffs)
• wp-includes/css/admin-bar.css (modified) (2 diffs)

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

@@ -142 +142 @@
     position: absolute;
     top: -1000em;
-}
-
-.screen-reader-shortcut:focus {
     left: 6px;
-    top: -25px;
     height: auto;
     width: auto;
@@ -153 +149 @@
     font-weight: 600;
     padding: 15px 23px 14px;
+    /* Background and color set to prevent false positives in automated accessibility tests. */
     background: #f0f0f1;
     color: #2271b1;
     z-index: 100000;
     line-height: normal;
+}
+
+.screen-reader-shortcut:focus {
+    top: -25px;
+    /* Overrides a:focus in the admin. See ticket #56789. */
+    color: #2271b1;
     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
     text-decoration: none;

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

@@ -720 +720 @@
     position: absolute;
     top: -1000em;
-}
-
-#wpadminbar .screen-reader-shortcut:focus {
     left: 6px;
-    top: 7px;
     height: auto;
     width: auto;
@@ -736 +732 @@
     line-height: normal;
     text-decoration: none;
+}
+
+#wpadminbar .screen-reader-shortcut:focus {
+    top: 7px;
+    background: #f0f0f1;
     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 }