diff options
| author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-05-20 11:03:51 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-05-20 11:03:51 +0300 |
| commit | a4a04cd9ec741050390746f8056cc79a9c04c8df (patch) | |
| tree | 7013b5407237066b483a87e54f0bc0169656ded7 /scss | |
| parent | 1a41b0ffa615948e3197b389cb0fb0be9227a8d9 (diff) | |
`.sr-only` & `.sr-only-focusable` tweaks (#28720)
* Prevent .sr-only-focusable overriding properties when being focused
* Typo
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/mixins/_screen-reader.scss | 34 | ||||
| -rw-r--r-- | scss/utilities/_screenreaders.scss | 7 |
2 files changed, 16 insertions, 25 deletions
diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss index e2de4cba4d..b25fe73046 100644 --- a/scss/mixins/_screen-reader.scss +++ b/scss/mixins/_screen-reader.scss @@ -1,34 +1,28 @@ +// stylelint-disable declaration-no-important + // Only display content to screen readers // // See: https://a11yproject.com/posts/how-to-hide-content/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ @mixin sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686 - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686 + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; } -// Use in conjunction with .sr-only to only display content when it's focused. +// Use to only display content when it's focused. // // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 -// -// Credit: HTML5 Boilerplate @mixin sr-only-focusable { - &:active, - &:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; + &:not(:focus) { + @include sr-only(); } } diff --git a/scss/utilities/_screenreaders.scss b/scss/utilities/_screenreaders.scss index 9f26fde035..c8034d10ee 100644 --- a/scss/utilities/_screenreaders.scss +++ b/scss/utilities/_screenreaders.scss @@ -2,10 +2,7 @@ // Screenreaders // -.sr-only { +.sr-only, +.sr-only-focusable:not(:focus) { @include sr-only(); } - -.sr-only-focusable { - @include sr-only-focusable(); -} |