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.
Built from https://develop.svn.wordpress.org/trunk@59832


git-svn-id: http://core.svn.wordpress.org/trunk@59174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2025-02-17 17:49:20 +00:00
parent 732c732e5f
commit 9d1b85ac74
54 changed files with 59 additions and 111 deletions

View File

@ -123,7 +123,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;

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -350,7 +350,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;

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -407,7 +407,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;

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -343,8 +343,7 @@ if ( ! function_exists( '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.

View File

@ -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 );

View File

@ -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;
}

View File

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

View File

@ -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;

View File

@ -76,8 +76,7 @@ if ( ! function_exists( '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

View File

@ -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 );

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -85,7 +85,7 @@ if ( ! function_exists( '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.

View File

@ -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;

View File

@ -97,7 +97,7 @@ if ( ! function_exists( 'twentysixteen_header_style' ) ) :
.site-branding .site-title,
.site-description {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
position: absolute;
}
</style>

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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'
} );

View File

@ -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 {

View File

@ -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.

View File

@ -23,12 +23,12 @@
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'
} );

View File

@ -508,7 +508,7 @@ a:hover {
.assistive-text,
.site .screen-reader-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
@ -520,7 +520,7 @@ a:hover {
background: #fff;
border: 2px solid #333;
border-radius: 3px;
clip: auto !important;
clip-path: none;
color: #000;
display: block;
font-size: 12px;
@ -1611,7 +1611,7 @@ img#wpstats {
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
}
.main-navigation li ul ul {
top: 0;
@ -1621,7 +1621,7 @@ img#wpstats {
.main-navigation ul li:focus > ul,
.main-navigation .focus > ul {
border-left: 0;
clip: inherit;
clip-path: none;
overflow: inherit;
height: inherit;
width: inherit;

View File

@ -178,8 +178,6 @@ path {
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@ -195,8 +193,6 @@ path {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;

View File

@ -178,8 +178,6 @@ path {
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@ -195,8 +193,6 @@ path {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;

View File

@ -6022,8 +6022,6 @@ h1.page-title {
/* Category 07 is for any utility classes that are not assigned to a specific component. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@ -6039,8 +6037,6 @@ h1.page-title {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;

View File

@ -1,7 +1,5 @@
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@ -17,8 +15,6 @@
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;

View File

@ -5485,8 +5485,6 @@ h1.page-title {
/* Category 07 is for any utility classes that are not assigned to a specific component. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@ -5502,8 +5500,6 @@ h1.page-title {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;

View File

@ -5521,8 +5521,6 @@ h1.page-title {
/* Category 07 is for any utility classes that are not assigned to a specific component. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@ -5538,8 +5536,6 @@ h1.page-title {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;

View File

@ -705,7 +705,6 @@ html:lang(he-il) .rtl #wpadminbar * {
#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;
@ -798,7 +797,6 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar .ab-label {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;

File diff suppressed because one or more lines are too long

View File

@ -704,7 +704,6 @@ html:lang(he-il) .rtl #wpadminbar * {
#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;
@ -797,7 +796,6 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar .ab-label {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;

File diff suppressed because one or more lines are too long

View File

@ -2489,12 +2489,13 @@
/* Visually hide the menu heading keeping it available to assistive technologies. */
.media-frame-menu-heading {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
padding: 0;
width: 1px;
border: 0;
margin: -1px;
word-wrap: normal !important;
}

File diff suppressed because one or more lines are too long

View File

@ -2488,12 +2488,13 @@
/* Visually hide the menu heading keeping it available to assistive technologies. */
.media-frame-menu-heading {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
padding: 0;
width: 1px;
border: 0;
margin: -1px;
word-wrap: normal !important;
}

File diff suppressed because one or more lines are too long

View File

@ -10,7 +10,6 @@ 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;

File diff suppressed because one or more lines are too long

View File

@ -6169,7 +6169,6 @@ function the_block_template_skip_link() {
<style id="skip-link-styles">
.skip-link.screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@ -6182,7 +6181,6 @@ function the_block_template_skip_link() {
.skip-link.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;

View File

@ -128,7 +128,6 @@ function wp_enqueue_block_template_skip_link() {
$skip_link_styles = '
.skip-link.screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
@ -141,7 +140,6 @@ function wp_enqueue_block_template_skip_link() {
.skip-link.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;

View File

@ -3001,7 +3001,7 @@ function _custom_logo_header_styles() {
<style id="custom-logo-css"<?php echo $type_attr; ?>>
<?php echo $classes; ?> {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
}
</style>
<?php

View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.8-alpha-59831';
$wp_version = '6.8-alpha-59832';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.