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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41622 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2017-09-27 17:26:58 +00:00
parent 3e27644b97
commit def5c946f5
6 changed files with 33 additions and 23 deletions
+9 -7
View File
@@ -402,14 +402,16 @@ body.language-chooser {
.screen-reader-input,
.screen-reader-text {
position: absolute;
margin: -1px;
padding: 0;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.spinner {