Update and audit the screen-reader-text CSS class used in core

[afercia]

WordPress 4.8 has officially ​ended support for Internet Explorer versions 8, 9, and 10. I'd propose to review the screen-reader-text CSS class to update it with some more modern properties.

At the very least, clip should be updated to a more modern syntax. clip: rect(0 0 0 0) is there to support old IE versions, I think IE6, IE7? Today, it should be clip: rect(1px, 1px, 1px, 1px).

The clip property itself ​is now deprecated. Its modern alternative is clip-path but at the time of writing it's not supported by IE11 (will never support it), Edge, and some mobile browsers, see: ​http://caniuse.com/#search=clip-path

One option could be introducing clip-path: inset(50%) and keeping clip for old browsers. This should be carefully evaluated for some edge cases where screen-reader-text gets reset for some very special uses, for example:

	.post-com-count .screen-reader-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
	}

Worth noting there are also some places in core where the screen-reader-text CSS class is slightly different, for example the admin bar, the embed template, and Press This.

[joedolson]

From discussion in the July 17th, 2017 A11y team meeting, we're going to audit this with the intent to use only one screen reader text pattern throughout WordPress, and using clip-path to future-proof the deprecation of clip.

[afercia]

40970.diff​ updates the core screen-reader-text CSS class to follow the recommended version on ​https://github.com/wpaccessibility/a11ythemepatterns/blob/master/read-more-links/style.css

• uses clip-path for modern browsers
• keeps clip for old browsers
• resets clip-path to none where the class is used to dynamically reveal elements
• removes an old rule that made screen-reader-text completely invisible in the help tabs #screen-meta, this rule is in core since [9545] and changed over time but there's no apparent reason to keep it

To check: search for all occurrences of .screen-reader-text in the core CSS files and check everything works fine.

[sami.keijonen]

Tested patch 40970.diff and it works as it should. I have only one question. Does Core have any links that comes visible on focus? I don't see screen-reader-text:focus so assume there is not.

[afercia]

@sami.keijonen not that I'm aware of. There are a couple places where the screen-reader-text class gets reset to make the element visible under different conditions (e.g. no-js or responsive view), see:
https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/list-tables.css?rev=41362#L1821
https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/nav-menus.css?rev=41362#L600

[afercia]

In 41622:

Accessibility: Update and standardize the admin screen-reader-text CSS class.

Given the new WordPress browsers support policy, the screen-reader-text css
class used in the admin can be updated to use modern CSS and correct syntax. See
​https://github.com/wpaccessibility/a11ythemepatterns/blob/master/read-more-links/style.css

Worth noting the clip property is deprecated and kept for IE11 and Edge.

• uses clip-path for modern browsers
• keeps clip for old browsers and update its value to a correct syntax
• resets clip-path to none where the class is used to dynamically reveal elements
• removes an old rule that made screen-reader-text completely invisible in the help tabs #screen-meta
• standardizes the rule across CSS files

Fixes #40970.