Remove :hover and :active states on screen-reader-text

We should consider removing all CSS rules that provide `:hover` and `:active` pseudo element behavior for `screen-reader-text` elements.

In IE 10/11, the `screen-reader-text` element, normally hidden, pops up when you hover your mouse over it, obscuring content — the Archives Widget drop-down menu is a good example.

According to the latest from the core a11y team: ​https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/ -- we only need the `:focus` pseudo element class.

Props to @lancewillett for figuring this out.
This commit is contained in:
Caroline Moore 2015-05-13 15:30:37 -04:00
parent ce796e39a5
commit 67b2428bbe
1 changed files with 0 additions and 2 deletions

View File

@ -642,8 +642,6 @@ a:active {
overflow: hidden; overflow: hidden;
} }
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus { .screen-reader-text:focus {
background-color: #f1f1f1; background-color: #f1f1f1;
border-radius: 3px; border-radius: 3px;