Fixes #13583: Move .sr-only and .sr-only-focusable to mixins, then use them to create classes in _utilities.scss

4 files changed, 41 insertions, 31 deletions

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 944ff669c..57450eeb2 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -32,6 +32,7 @@
 @import "mixins/reset-filter";
 @import "mixins/resize";
 @import "mixins/responsive-visibility";
+@import "mixins/screen-reader";
 @import "mixins/size";
 @import "mixins/tab-focus";
 @import "mixins/text-emphasis";
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index 9b93010ba..6f6650b77 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -128,37 +128,6 @@ hr {
 }
 
 
-// Only display content to screen readers
-//
-// See: http://a11yproject.com/posts/how-to-hide-content/
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  border: 0;
-}
-
-// Use in conjunction with .sr-only to only display content when it's focused.
-// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-// Credit: HTML5 Boilerplate
-
-.sr-only-focusable {
-  &:active,
-  &:focus {
-    position: static;
-    width: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    clip: auto;
-  }
-}
-
 // iOS "clickable elements" fix for role="button"
 //
 // Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 09f569834..232202424 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -18,6 +18,14 @@
   @include pull-left();
 }
 
+.sr-only {
+  @include sr-only();
+}
+
+.sr-only-focusable {
+  @include sr-only-focusable();
+}
+
 
 // Inverse
 .inverse {
diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss
new file mode 100644
index 000000000..e52b282a9
--- /dev/null
+++ b/scss/mixins/_screen-reader.scss
@@ -0,0 +1,32 @@
+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://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;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}