From a4a04cd9ec741050390746f8056cc79a9c04c8df Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 20 May 2019 10:03:51 +0200
Subject: `.sr-only` & `.sr-only-focusable` tweaks (#28720)

* Prevent .sr-only-focusable overriding properties when being focused

* Typo
---
 scss/mixins/_screen-reader.scss    | 34 ++++++++++++++--------------------
 scss/utilities/_screenreaders.scss |  7 ++-----
 2 files changed, 16 insertions(+), 25 deletions(-)

(limited to 'scss')

diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss
index e2de4cba4..b25fe7304 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 9f26fde03..c8034d10e 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();
-}
-- 
cgit v1.2.3