[Accessibility Handbook] Update screen-reader-text CSS Class and Documentation for Modern Browser Standards

[dhruvang21]

Issue Description

The screen-reader-text CSS class and its documentation need to be updated in accordance with recent changes in the block editor repository, which simplify the class by removing outdated styles such as clip: rect(1px, 1px, 1px, 1px); and prefixed versions of clip-path, e.g., -webkit-clip-path: inset(50%).

URL of the Page with the Issue

https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/

Section of Page with the issue

https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/#the-css

Why is this a problem?

The current documentation and implementations contain outdated CSS that is no longer necessary. Modern browsers no longer require styles like clip: rect(1px, 1px, 1px, 1px); and prefixed versions of clip-path. Updating the documentation is important to ensure developers are using the most up-to-date and optimized code.

Originally posted on core trac:- https://core.trac.wordpress.org/ticket/62238

Suggested Fix

• Remove clip: rect(1px, 1px, 1px, 1px); from the CSS class.
• Remove any prefixed versions of clip-path, such as -webkit-clip-path: inset(50%);.
• Update the entire codebase, including bundled themes and documentation, to reflect these changes.

[github-actions]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[DrewAPicture]

Just noting that even if we drop the clip() line from the CSS, we may need to add a note below the .screen-reader-text example explaining why it should still be used if there is a need to support older browsers. See this note on the core PR.

[joedolson]

FYI, this is mostly being tracked in https://core.trac.wordpress.org/ticket/62238, so that everything can be synchronized.