From def5c946f517a7b2d99264fd81a48b4896a76a2e Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Wed, 27 Sep 2017 17:26:58 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41622 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css               | 19 ++++++++-----------
 src/wp-admin/css/install.css              | 16 +++++++++-------
 src/wp-admin/css/list-tables.css          |  1 +
 src/wp-admin/css/nav-menus.css            |  1 +
 src/wp-includes/css/admin-bar.css         | 12 ++++++++----
 src/wp-includes/css/wp-embed-template.css |  7 ++++++-
 6 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 034e745124..579bdaf0fa 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -121,14 +121,15 @@
 .screen-reader-text,
 .screen-reader-text span,
 .ui-helper-hidden-accessible {
-	position: absolute;
-	margin: -1px;
-	padding: 0;
-	height: 1px;
-	width: 1px;
-	overflow: hidden;
-	clip: rect(0 0 0 0);
 	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
 	word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
 }
 
@@ -1617,10 +1618,6 @@ form.upgrade .hint {
 	margin-left: 0 !important;
 }
 
-#screen-meta .screen-reader-text {
-	visibility: hidden;
-}
-
 #screen-meta-links {
 	margin: 0 20px 0 0;
 }
diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css
index 0b717730c4..4253b08061 100644
--- a/src/wp-admin/css/install.css
+++ b/src/wp-admin/css/install.css
@@ -402,14 +402,16 @@ body.language-chooser {
 
 .screen-reader-input,
 .screen-reader-text {
-	position: absolute;
-	margin: -1px;
-	padding: 0;
-	height: 1px;
-	width: 1px;
-	overflow: hidden;
-	clip: rect(0 0 0 0);
 	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
 }
 
 .spinner {
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index aad8b589c0..6e7269206c 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -1821,6 +1821,7 @@ div.action-links,
 	/* Show comment bubble as text instead */
 	.post-com-count .screen-reader-text {
 		position: static;
+		clip-path: none;
 		width: auto;
 		height: auto;
 		margin: 0;
diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css
index 7950053f7c..2edb269bc9 100644
--- a/src/wp-admin/css/nav-menus.css
+++ b/src/wp-admin/css/nav-menus.css
@@ -599,6 +599,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 
 .no-js.nav-menus-php .item-edit .screen-reader-text {
 	position: static;
+	clip-path: none;
 	width: auto;
 	height: auto;
 	margin: 0;
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 9de2e6a4a0..7d031f489e 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -691,12 +691,16 @@ html:lang(he-il) .rtl #wpadminbar *  {
 /* Skip link */
 #wpadminbar .screen-reader-text,
 #wpadminbar .screen-reader-text span {
-	position: absolute;
-	left: -1000em;
-	top: -1000em;
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	height: 1px;
-	width: 1px;
+	margin: -1px;
 	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
 }
 
 #wpadminbar .screen-reader-shortcut {
diff --git a/src/wp-includes/css/wp-embed-template.css b/src/wp-includes/css/wp-embed-template.css
index 306c835d55..bd3edb2021 100644
--- a/src/wp-includes/css/wp-embed-template.css
+++ b/src/wp-includes/css/wp-embed-template.css
@@ -9,11 +9,16 @@ body {
 
 /* 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;
 }
 
 /* Dashicons */