Update the screen-reader-text CSS class and its local implementations

[afercia]

In a recent conversation on the block editor repository at ​https://github.com/WordPress/gutenberg/pull/65409 it was agreed to update and simplify the screen-reader-text CSS class by:

• Removing the now unnecessary clip: rect(1px, 1px, 1px, 1px);
• Removing any prefixed version of clip-path e.g. -webkit-clip-path: inset(50%);

This should be done through the entire codebase and ​the documentation , including bundled themes.

Trac ticket: https://core.trac.wordpress.org/ticket/62238

[hbhalodia]

Hi @afercia @joedolson, I have raised the PR by removing the required CSS for screen-reader-text. I have checked the entire codebase for the same.

Thank You,

Thanks @hbhalodia A couple first point for feedback:

• Some stylesheet meant to support old browsers like Internet Explorer 7 must keep the old clip.
• In other cases where clip is removed and there's no clip-path, then clip-path should be added.

Hi @afercia, thanks for the feedback. I would resolve this.

Hello @afercia, I have updated the PR with the requested changes.

Thank You,

Updated :focus states to not use clip if the related static state no longer uses clip.

[joedolson]

This patch will need testing in all shipped themes. The primary testing needed is to verify that skip links are hidden and become visible on focus. The change to remove clip in the screen reader text styles will have no visible consequences outside of IE, but failing to remove clip from an associated :focus style would result in a focused block of screen reader text not becoming visible.

To test:

• Activate each default theme. Tab from the address bar into the theme. Does the skip link become visible when focused?
• Test the core skip links for jumping to the toolbar and to the admin content.

Thanks @joedolson, to update the PR with required changes 🙇.

[joedolson]

Tested:

• Twenty Ten: Skip links do not become visible and are out of order, but that is not new. Re-opened #14795 to address.
• Twenty Eleven: Skip links work as expected, still use clip.
• Twenty Twelve: Works as expected. Skip link in wrong position, opened #62957 to address.
• Twenty Thirteen: Works as expected. Skip link in wrong position, opened #62958 to address.
• Twenty Fourteen: Works as expected. Skip link in wrong position, opened #62959 to address.
• Twenty Fifteen: Works as expected.
• Twenty Sixteen: Works as expected.
• Twenty Seventeen: Works as expected.
• Twenty Nineteen: Works as expected.
• Twenty Twenty: Works as expected.
• Twenty Twenty-One: Works as expected.
• Admin Bar skip links: Work as expected.
• Block theme skip links: Work as expected.

The issues documented above are unrelated to this patch, but I've opened and milestoned the related issues to try and address all of these at once. Otherwise, I think this is almost good to go.

One outstanding question is with the IE6/IE7 styles that have been retained. While it makes some sense to retain styles because they're specifically intended for compatibility with older browsers, support for IE should have been removed in #56699, and anything remaining should probably also be removed. There's also an open ticket (#58836) addressing that.

@sabernhardt Would you prefer I strip the relevant styles out here, or leave them to be addressed in 58836?

[sabernhardt]

Let's remove both syntaxes of clip on this ticket (when they are in the same stylesheet/ruleset).

Would you also want to replace clip with clip-path in the themes' header style functions?

• twentyeleven\functions.php
• twentytwelve\inc\custom-header.php
• twentythirteen\inc\custom-header.php (both twentythirteen_header_style() and twentythirteen_admin_header_style())
• twentyfourteen\inc\custom-header.php
• twentyfifteen\inc\custom-header.php
• twentysixteen\inc\customizer.php
• twentyseventeen\inc\custom-header.php

---

Before committing the theme changes, remember to run build for Twenty Twenty-One and include its .css.map files (GitHub actions complained of a mismatch because the map files are not in the PR).

[joedolson]

I think it probably makes sense to remove all of those at the same time; they all serve the same purpose, effectively. Will update the PR to reflect all this, as well.

[joedolson]

Update those instances, and also in customizer JS files where appropriate. Tested the additional changes.

There are still some instances in IE specific stylesheets, but since those entire stylesheets should be removed and the *only* purpose they serve is compatibility with IE, those should remain until we remove the entire file.

[joedolson]

In 59832:

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.

In r59832

[joedolson]

Dev note is already drafted; but adding the needs-dev-note keyword for tracking.

[JeffPaul]

Note that the dev note has been published as ​Changes to the .screen-reader-text class in WordPress 6.8.