rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #1218 from samikeijonen/issue/1211 

Update screen-reader-text class to be in line with core
This commit is contained in:
David A. Kennedy 2017-10-24 09:46:20 -04:00 committed by GitHub
parent a0ee266dee 3f9c31b6a1
commit 82df565433
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sass/modules/_accessibility.scss
View File

@ -1,10 +1,14 @@
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
&:focus {
@ -12,6 +16,7 @@
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: $color__text-screen;
display: block;
@include font-size(0.875);

12
style.css
View File

@ -599,13 +599,16 @@ a:hover, a:active {
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
word-wrap: normal !important;
/* Many screen reader and browser combinations announce broken words as they would appear visually. */
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
@ -613,6 +616,7 @@ a:hover, a:active {
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;