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:
parent
3e27644b97
commit
def5c946f5
|
@ -121,14 +121,15 @@
|
|||
.screen-reader-text,
|
||||
.screen-reader-text span,
|
||||
.ui-helper-hidden-accessible {
|
||||
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; /* many screen reader and browser combinations announce broken words as they would appear visually */
|
||||
}
|
||||
|
||||
|
@ -1617,10 +1618,6 @@ form.upgrade .hint {
|
|||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
#screen-meta .screen-reader-text {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#screen-meta-links {
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -1821,6 +1821,7 @@ div.action-links,
|
|||
/* Show comment bubble as text instead */
|
||||
.post-com-count .screen-reader-text {
|
||||
position: static;
|
||||
clip-path: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
|
|
|
@ -599,6 +599,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
|
|||
|
||||
.no-js.nav-menus-php .item-edit .screen-reader-text {
|
||||
position: static;
|
||||
clip-path: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
|
|
|
@ -691,12 +691,16 @@ html:lang(he-il) .rtl #wpadminbar * {
|
|||
/* Skip link */
|
||||
#wpadminbar .screen-reader-text,
|
||||
#wpadminbar .screen-reader-text span {
|
||||
position: absolute;
|
||||
left: -1000em;
|
||||
top: -1000em;
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
#wpadminbar .screen-reader-shortcut {
|
||||
|
|
|
@ -9,11 +9,16 @@ body {
|
|||
|
||||
/* Text meant only for screen readers */
|
||||
.screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute !important;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
/* Dashicons */
|
||||
|
|
Loading…
Reference in New Issue