Accessibility: Globally update .screen-reader-text class.

Remove references to the obsolete style property `clip: rect(1px, 1px, 1px, 1px);` and replace or adapt to use `clip-path: inset(50%);`. Update associated `:focus` styles as appropriate. Remove prefixed instances of `-webkit-clip-path`.

Props afercia, hbhalodia, audrasjb, joedolson, sabernhardt. 
Fixes #62238.

git-svn-id: https://develop.svn.wordpress.org/trunk@59832 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

src/wp-admin/css/common.css

@@ -122,7 +122,6 @@
 .screen-reader-text span,
 .ui-helper-hidden-accessible {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;

src/wp-admin/css/install.css

@@ -349,7 +349,6 @@ body.language-chooser {
 .screen-reader-input,
 .screen-reader-text {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;

src/wp-admin/css/login.css

@@ -406,7 +406,6 @@ body.interim-login {
 .screen-reader-text,
 .screen-reader-text span {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;

src/wp-content/themes/twentyeleven/functions.php

@@ -343,8 +343,7 @@ function twentyeleven_header_style() {
 		#site-title,
 		#site-description {
 			position: absolute;
-			clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-			clip: rect(1px, 1px, 1px, 1px);
+			clip-path: inset(50%);
 		}
 			<?php
 			// If the user has set a custom color for the text, use that.

src/wp-content/themes/twentyeleven/inc/theme-customizer.js

@@ -15,16 +15,16 @@
 		value.bind( function( to ) {
 			if ( 'blank' === to ) {
 				$( '#site-title, #site-title a, #site-description' ).css( {
-					'clip': 'rect(1px, 1px, 1px, 1px)',
+					'clip-path': 'inset(50%)',
 					'position': 'absolute'
 				} );
 			} else {
 				$( '#site-title, #site-title a, #site-description' ).css( {
-					'clip': 'auto',
+					'clip-path': 'none',
 					'color': to,
 					'position': 'relative'
 				} );
 			}
 		} );
 	} );
-} )( jQuery );
+} )( jQuery );

src/wp-content/themes/twentyeleven/style.css

@@ -502,8 +502,7 @@ a:hover {
 .assistive-text,
 .screen-reader-text {
 	position: absolute !important;
-	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	overflow: hidden;
 	height: 1px;
 	width: 1px;
@@ -515,7 +514,6 @@ a.assistive-text:focus,
 .screen-reader-text:focus {
 	background-color: #f1f1f1;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto !important;
 	clip-path: none;
 	color: #21759b;
 	display: block;
@@ -747,8 +745,7 @@ a.assistive-text:focus,
 	border-bottom: none;
 }
 .blog .sticky .entry-header .entry-meta {
-	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	position: absolute !important;
 }
 .entry-title,
@@ -1445,8 +1442,7 @@ section.featured-post .hentry {
 	margin: 0;
 }
 section.featured-post .entry-meta {
-	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	position: absolute !important;
 }
 

src/wp-content/themes/twentyfifteen/inc/custom-header.php

@@ -186,7 +186,7 @@ function twentyfifteen_header_style() {
 			?>
 		.site-title,
 		.site-description {
-			clip: rect(1px, 1px, 1px, 1px);
+			clip-path: inset(50%);
 			position: absolute;
 		}
 	<?php endif; ?>

src/wp-content/themes/twentyfifteen/style.css

@@ -1171,7 +1171,7 @@ a:focus {
 /* Text meant only for screen readers */
 .says,
 .screen-reader-text {
-	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	height: 1px;
 	overflow: hidden;
 	position: absolute !important;
@@ -1199,7 +1199,7 @@ a:focus {
 }
 
 .site .skip-link:focus {
-	clip: auto;
+	clip-path: none;
 	height: auto;
 	left: 6px;
 	top: 7px;

src/wp-content/themes/twentyfourteen/inc/custom-header.php

@@ -76,8 +76,7 @@ function twentyfourteen_header_style() {
 			?>
 		.site-title,
 		.site-description {
-			clip: rect(1px 1px 1px 1px); /* IE7 */
-			clip: rect(1px, 1px, 1px, 1px);
+			clip-path: inset(50%);
 			position: absolute;
 		}
 			<?php

src/wp-content/themes/twentyfourteen/js/customizer.js

@@ -20,12 +20,12 @@
 		value.bind( function( to ) {
 			if ( 'blank' === to ) {
 				$( '.site-title, .site-description' ).css( {
-					'clip': 'rect(1px, 1px, 1px, 1px)',
+					'clip-path': 'inset(50%)',
 					'position': 'absolute'
 				} );
 			} else {
 				$( '.site-title,  .site-description' ).css( {
-					'clip': 'auto',
+					'clip-path': 'none',
 					'position': 'static'
 				} );
 
@@ -35,4 +35,4 @@
 			}
 		} );
 	} );
-} )( jQuery );
+} )( jQuery );