Block library: Remove focus style on screen-reader-text

[walbo]

Description

Remove focus style on screen-reader-text. The focus styles are intended mainly for skip links, not just anything with the class.

Fixes #33724

How has this been tested?

Tested the core ticket https://core.trac.wordpress.org/ticket/53803
Tested that skip-link works as expected
Tested blocks that uses screen-reader-text works as expected (ex categories with dropdown)

Screenshots

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[jasmussen]

Thanks for the PR!

Those screen reader focus styles were added in #30141, it appears very intentionally so, to address an issue with the Archives block.

@carolinan you had some good thoughts in that thread, can you help me sanity check this PR? From what I can tell, we need the focus style to remain on the archives screen reader text, but what's the best path forward? Should the class be scoped further? Or should something be changed in the customizer? Thank you for looking.

[walbo]

I think a11y requirements is still met by removing the focus style. As @carolinan says in #30141

Screen-reader-text can be, but is not always visible on focus, the skip link is always visible on focus.

Current implementation always add visible focus style. Block that need the focus style should add it. Maybe scoped helper classname for it?

The screen-reader-text in the archive block was removed in #30527. core/categories, core/post-comments-link and core/search still uses screen-reader-text but I belive none of those needs visible focus.

[gziolo]

Those styles follows the accessibility guidelines for WordPress:

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

[joedolson]

The fact that skiplinks use :focus directly on .screen-reader-text rather than using a helper class like is-focusable or skiplink is something I'd consider a questionable decision in the history of how WordPress handles skiplinks. Hiding text that's only intended for screen readers should not automatically come with the assumption that it should become visible when focused.

I think it's very feasible to have an option for screen-reader-text to become visible via a helper class, but it's not beneficial for that to always be the case. We should be able to be selective about whether or not screen reader text will become visible on focus.

@gziolo I wouldn't call that document 'style guidelines' - it's informational, informing users what the recommended CSS for hiding screen reader text is, if you're going to do that. A CSS class for hiding screen reader text should use that CSS, and a class for making screen reader text focusable should be similar to the :focus styles indicated, but that's the extent there.