3 files changed, 33 insertions, 12 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%));
+}
diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index afc21d5..bffa49d 100644
--- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -1112,14 +1112,15 @@ ul.tags-cloud {
   visibility: visible; }
 
 .screen-reader-text {
-  position: absolute;
-  word-wrap: normal;
+  position: absolute !important;
+  white-space: nowrap;
   border: 0;
   height: 1px;
   width: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
   -webkit-clip-path: inset(50%);
   -moz-clip-path: inset(50%);
   -ms-clip-path: inset(50%);