Changeset 41622

Timestamp:

09/27/2017 05:26:58 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Update and standardize the admin screen-reader-text CSS class.

Given the new WordPress browsers support policy, the screen-reader-text css
class used in the admin can be updated to use modern CSS and correct syntax. See
​https://github.com/wpaccessibility/a11ythemepatterns/blob/master/read-more-links/style.css

Worth noting the clip property is deprecated and kept for IE11 and Edge.

• uses clip-path for modern browsers
• keeps clip for old browsers and update its value to a correct syntax
• resets clip-path to none where the class is used to dynamically reveal elements
• removes an old rule that made screen-reader-text completely invisible in the help tabs #screen-meta
• standardizes the rule across CSS files

Fixes #40970.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (2 diffs)
• wp-admin/css/install.css (modified) (1 diff)
• wp-admin/css/list-tables.css (modified) (1 diff)
• wp-admin/css/nav-menus.css (modified) (1 diff)
• wp-includes/css/admin-bar.css (modified) (1 diff)
• wp-includes/css/wp-embed-template.css (modified) (1 diff)

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

@@ -122 +122 @@
 .screen-reader-text span,
 .ui-helper-hidden-accessible {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
     position: absolute;
-    margin: -1px;
-    padding: 0;
-    height: 1px;
     width: 1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    border: 0;
     word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
 }
@@ -1618 +1619 @@
 }
 
-#screen-meta .screen-reader-text {
-    visibility: hidden;
-}
-
 #screen-meta-links {
     margin: 0 20px 0 0;

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

@@ -403 +403 @@
 .screen-reader-input,
 .screen-reader-text {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
     position: absolute;
-    margin: -1px;
-    padding: 0;
-    height: 1px;
     width: 1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    border: 0;
+    word-wrap: normal !important;
 }
 

trunk/src/wp-admin/css/list-tables.css

@@ -1822 +1822 @@
     .post-com-count .screen-reader-text {
         position: static;
+        clip-path: none;
         width: auto;
         height: auto;

trunk/src/wp-admin/css/nav-menus.css

@@ -600 +600 @@
 .no-js.nav-menus-php .item-edit .screen-reader-text {
     position: static;
+    clip-path: none;
     width: auto;
     height: auto;

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

@@ -692 +692 @@
 #wpadminbar .screen-reader-text,
 #wpadminbar .screen-reader-text span {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
     position: absolute;
-    left: -1000em;
-    top: -1000em;
-    height: 1px;
     width: 1px;
-    overflow: hidden;
+    word-wrap: normal !important;
 }
 

trunk/src/wp-includes/css/wp-embed-template.css

@@ -10 +10 @@
 /* Text meant only for screen readers */
 .screen-reader-text {
+    border: 0;
     clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
     height: 1px;
+    margin: -1px;
     overflow: hidden;
-    position: absolute !important;
+    padding: 0;
+    position: absolute;
     width: 1px;
+    word-wrap: normal !important;
 }