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

Update screen-reader-text class.

This commit is contained in:
Sami Keijonen 2017-10-22 19:00:06 +03:00
parent a0ee266dee
commit 3f9c31b6a1
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. */ /* Text meant only for screen readers. */
.screen-reader-text { .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
position: absolute !important; clip-path: inset(50%);
height: 1px; height: 1px;
width: 1px; margin: -1px;
overflow: hidden; 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. */ word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
&:focus { &:focus {
@ -12,6 +16,7 @@
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important; clip: auto !important;
clip-path: none;
color: $color__text-screen; color: $color__text-screen;
display: block; display: block;
@include font-size(0.875); @include font-size(0.875);

12
style.css
View File

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