Add visually-hidden mixin

2 files changed, 30 insertions, 10 deletions

diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss
index 82cfcf4..06de02a 100644
--- a/assets/sass/_customize.scss
+++ b/assets/sass/_customize.scss
@@ -279,14 +279,5 @@ ul.tags-cloud {
 }
 
 .screen-reader-text {
-  position: absolute;
-  word-wrap: normal;
-  border: 0;
-  height: 1px;
-  width: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-
-  @include clip-path(inset(50%));
+  @include visually-hidden();
 }
diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
index 95e63e4..e41e01f 100644
--- a/assets/sass/_mixins.scss
+++ b/assets/sass/_mixins.scss
@@ -222,3 +222,32 @@ $break-desktop: 1600px;
       -ms-clip-path: $clip-list;
           clip-path: $clip-list;
 }
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - visually-hidden
+// Visually hides text content for accessibility. This text should
+// only be visible to screen reader users.
+//
+// Usage: @include visually-hidden();
+
+@mixin visually-hidden {
+  // Outside the DOM flow
+  position: absolute !important;
+  // Do not wrap content
+  white-space: nowrap;
+  // Hide borders
+  border: 0;
+  // Nearly collapsed
+  height: 1px;
+  width: 1px;
+  // Remove padding / margin
+  padding: 0;
+  margin: -1px;
+  // Do not allow overflow
+  overflow: hidden;
+  // Hide the 1px x 1px element completely
+  // - clip: old browsers
+  // - clip-path: modern browsers
+  clip: rect(1px, 1px, 1px, 1px);
+  @include clip-path(inset(50%));
+}