add .screen-reader-text CSS class using .visuallyhidden; update .visu…

…allyhidden technique This fixes #1528 and addresses part of #844
WPBuddy · Sep 10, 2018 · 28efc0c · 28efc0c
1 parent 8d325c4
commit 28efc0c
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 70 deletions.
diff --git a/css/editor-style.css b/css/editor-style.css
diff --git a/css/editor-style.min.css b/css/editor-style.min.css
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.min.css b/css/style.min.css
diff --git a/homepages/assets/css/single.css b/homepages/assets/css/single.css
diff --git a/homepages/assets/css/single.min.css b/homepages/assets/css/single.min.css
diff --git a/homepages/assets/css/top-stories.css b/homepages/assets/css/top-stories.css
diff --git a/homepages/assets/css/top-stories.min.css b/homepages/assets/css/top-stories.min.css
diff --git a/less/inc/footer.less b/less/inc/footer.less
@@ -196,6 +196,7 @@ footer #boilerplate {
  }
 }
 
+.screen-reader-text,
 .back-to-top {
  .visuallyhidden
 }
diff --git a/less/inc/mixins.less b/less/inc/mixins.less
@@ -23,12 +23,18 @@
 // CSS image replacement
 // -------------------------
 // Hide an item visually only
+// https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
 .visuallyhidden {
- position: absolute;
- overflow: hidden;
+ border: 0;
  clip: rect(0 0 0 0);
- height: 1px; width: 1px;
- margin: -1px; padding: 0; border: 0;
+ clip-path: inset(50%);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute !important;
+ width: 1px;
+ word-wrap: normal !important;
 }
 
 // CSS image replacement
@@ -681,4 +687,4 @@
  &:hover {
  background-color: darken(@network, 5%); 
  }
-}
+}