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
WordPress · Feb 17, 2025 · 8b68efd · 8b68efd
1 parent a1440ae
commit 8b68efd
Show file tree

Hide file tree

Showing 39 changed files with 47 additions and 95 deletions.
diff --git a/src/wp-admin/css/common.css b/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;

diff --git a/src/wp-admin/css/install.css b/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;

diff --git a/src/wp-admin/css/login.css b/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;

diff --git a/src/wp-content/themes/twentyeleven/functions.php b/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.

diff --git a/src/wp-content/themes/twentyeleven/inc/theme-customizer.js b/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 );
diff --git a/src/wp-content/themes/twentyeleven/style.css b/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;
 }
 

diff --git a/src/wp-content/themes/twentyfifteen/inc/custom-header.php b/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; ?>

diff --git a/src/wp-content/themes/twentyfifteen/style.css b/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;

diff --git a/src/wp-content/themes/twentyfourteen/inc/custom-header.php b/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

diff --git a/src/wp-content/themes/twentyfourteen/js/customizer.js b/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 );
diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css
@@ -720,7 +720,7 @@ div.wp-caption.alignright .wp-caption-text {
 /* Assistive text */
 
 .screen-reader-text {
-	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	overflow: hidden;
 	position: absolute !important;
 	height: 1px;
@@ -731,7 +731,7 @@ div.wp-caption.alignright .wp-caption-text {
 	background-color: #f1f1f1;
 	border-radius: 3px;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto;
+	clip-path: none;
 	color: #21759b;
 	display: block;
 	font-size: 14px;

diff --git a/src/wp-content/themes/twentynineteen/sass/modules/_accessibility.scss b/src/wp-content/themes/twentynineteen/sass/modules/_accessibility.scss
@@ -1,7 +1,6 @@
 /* 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;
@@ -15,7 +14,6 @@
 		background-color: $color__background-screen;
 		border-radius: 3px;
 		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-		clip: auto !important;
 		clip-path: none;
 		color: $color__text-screen;
 		display: block;

diff --git a/src/wp-content/themes/twentynineteen/style-rtl.css b/src/wp-content/themes/twentynineteen/style-rtl.css
@@ -3616,7 +3616,6 @@ body.page .main-navigation {
 /* 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;
@@ -3632,7 +3631,6 @@ body.page .main-navigation {
   background-color: #f1f1f1;
   border-radius: 3px;
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-  clip: auto !important;
   clip-path: none;
   color: #21759b;
   display: block;

diff --git a/src/wp-content/themes/twentynineteen/style.css b/src/wp-content/themes/twentynineteen/style.css
@@ -3616,7 +3616,6 @@ body.page .main-navigation {
 /* 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;
@@ -3632,7 +3631,6 @@ body.page .main-navigation {
   background-color: #f1f1f1;
   border-radius: 3px;
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-  clip: auto !important;
   clip-path: none;
   color: #21759b;
   display: block;

diff --git a/src/wp-content/themes/twentyseventeen/inc/custom-header.php b/src/wp-content/themes/twentyseventeen/inc/custom-header.php
@@ -85,7 +85,7 @@ function twentyseventeen_header_style() {
 		.site-title,
 		.site-description {
 			position: absolute;
-			clip: rect(1px, 1px, 1px, 1px);
+			clip-path: inset(50%);
 		}
 			<?php
 			// If the user has set a custom color for the text use that.

diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css
@@ -306,7 +306,7 @@ template {
 /* Text meant only for screen readers. */
 
 .screen-reader-text {
-	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	height: 1px;
 	overflow: hidden;
 	position: absolute !important;
@@ -320,7 +320,7 @@ template {
 	border-radius: 3px;
 	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto !important;
+	clip-path: none;
 	color: #21759b;
 	display: block;
 	font-size: 14px;
@@ -1988,7 +1988,7 @@ body.page:not(.twentyseventeen-front-page) .entry-title {
 }
 
 .page-numbers.current .screen-reader-text {
-	clip: auto;
+	clip-path: none;
 	height: auto;
 	overflow: auto;
 	position: relative !important;
@@ -3236,7 +3236,7 @@ p > object:only-child {
 .no-svg .prev.page-numbers .screen-reader-text,
 .no-svg .social-navigation li a .screen-reader-text,
 .no-svg .search-submit .screen-reader-text {
-	clip: auto;
+	clip-path: none;
 	font-size: 16px;
 	font-size: 1rem;
 	font-weight: 400;
@@ -4173,7 +4173,7 @@ p > object:only-child {
 	}
 
 	.page-numbers.current .screen-reader-text {
-		clip: rect(1px, 1px, 1px, 1px);
+		clip-path: inset(50%);
 		height: 1px;
 		overflow: hidden;
 		position: absolute !important;

diff --git a/src/wp-content/themes/twentysixteen/inc/customizer.php b/src/wp-content/themes/twentysixteen/inc/customizer.php
@@ -97,7 +97,7 @@ function twentysixteen_header_style() {
 
 		.site-branding .site-title,
 		.site-description {
-			clip: rect(1px, 1px, 1px, 1px);
+			clip-path: inset(50%);
 			position: absolute;
 		}
 		</style>

diff --git a/src/wp-content/themes/twentysixteen/style.css b/src/wp-content/themes/twentysixteen/style.css
@@ -1284,7 +1284,7 @@ a:active {
 /* 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;
@@ -1316,7 +1316,7 @@ a:active {
 }
 
 .site .skip-link:focus {
-	clip: auto;
+	clip-path: none;
 	height: auto;
 	left: 6px;
 	top: 7px;

diff --git a/src/wp-content/themes/twentyten/style.css b/src/wp-content/themes/twentyten/style.css
@@ -341,7 +341,7 @@ a:hover {
 
 /* Text meant only for screen readers */
 .screen-reader-text {
-	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	overflow: hidden;
 	position: absolute !important;
 	height: 1px;

diff --git a/src/wp-content/themes/twentythirteen/inc/custom-header.php b/src/wp-content/themes/twentythirteen/inc/custom-header.php
@@ -123,8 +123,7 @@ function twentythirteen_header_style() {
 	.site-title,
 	.site-description {
 		position: absolute;
-		clip: rect(1px 1px 1px 1px); /* IE7 */
-		clip: rect(1px, 1px, 1px, 1px);
+		clip-path: inset(50%);
 	}
 		<?php
 		if ( empty( $header_image ) ) :
@@ -185,8 +184,7 @@ function twentythirteen_admin_header_style() {
 	#headimg h1,
 	#headimg h2 {
 		position: absolute !important;
-		clip: rect(1px 1px 1px 1px); /* IE7 */
-		clip: rect(1px, 1px, 1px, 1px);
+		clip-path: inset(50%);
 	}
 	<?php endif; ?>
 	#headimg h1 {

diff --git a/src/wp-content/themes/twentythirteen/js/theme-customizer.js b/src/wp-content/themes/twentythirteen/js/theme-customizer.js
@@ -25,13 +25,13 @@
 					$( '.home-link' ).css( 'min-height', '0' );
 				}
 				$( '.site-title, .site-description' ).css( {
-					'clip': 'rect(1px, 1px, 1px, 1px)',
+					'clip-path': 'inset(50%)',
 					'position': 'absolute'
 				} );
 			} else {
 				$( '.home-link' ).css( 'min-height', '230px' );
 				$( '.site-title, .site-description' ).css( {
-					'clip': 'auto',
+					'clip-path': 'none',
 					'color': to,
 					'position': 'relative'
 				} );

diff --git a/src/wp-content/themes/twentythirteen/style.css b/src/wp-content/themes/twentythirteen/style.css
@@ -559,7 +559,7 @@ hr {
 
 /* Assistive text */
 .screen-reader-text {
-	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	overflow: hidden;
 	position: absolute !important;
 	height: 1px;
@@ -570,7 +570,7 @@ hr {
 	background-color: #f1f1f1;
 	border-radius: 3px;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto !important;
+	clip-path: none;
 	color: #21759b;
 	display: block;
 	font-size: 14px;
@@ -921,7 +921,7 @@ div.nav-menu > ul {
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
-	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 }
 
 .nav-menu .sub-menu ul,
@@ -949,7 +949,7 @@ ul.nav-menu li:hover > ul,
 .nav-menu ul li:hover > ul,
 ul.nav-menu .focus > ul,
 .nav-menu .focus > ul {
-	clip: inherit;
+	clip-path: none;
 	overflow: inherit;
 	height: inherit;
 	width: inherit;
@@ -3149,7 +3149,7 @@ footer.entry-meta {
 		font-weight: normal;
 	}
 	.site-description {
-	    clip: rect(1px, 1px, 1px, 1px);
+		clip-path: inset(50%);
 	    position: absolute;
 	}
 	.gallery {

diff --git a/src/wp-content/themes/twentytwelve/inc/custom-header.php b/src/wp-content/themes/twentytwelve/inc/custom-header.php
@@ -85,8 +85,7 @@ function twentytwelve_header_style() {
 	.site-title,
 	.site-description {
 		position: absolute;
-		clip: rect(1px 1px 1px 1px); /* 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.