A11y: Add .is-sr-only to helpers (#1764)

jgthms · Jul 9, 2018 · e71c248 · e71c248
1 parent 2b8f668
commit e71c248
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -487,6 +487,7 @@
 ### New features
 
 * 🎉 Rounded buttons, inputs, pagination and toggle tabs
+* #1764 New `.is-sr-only` helper
 
 ### Improvements
 

diff --git a/docs/documentation/modifiers/helpers.html b/docs/documentation/modifiers/helpers.html
@@ -58,5 +58,9 @@
       <td><code>is-invisible</code></td>
       <td>Adds visibility <strong>hidden</strong></td>
     </tr>
+    <tr>
+      <td><code>is-sr-only</code></td>
+      <td>Hide elements <strong>visually</strong> but keep the element available to be announced by a <strong>screen reader</strong></td>
+    </tr>
   </tbody>
 </table>
diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass
@@ -158,6 +158,17 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .is-hidden
   display: none !important
 
+.is-sr-only
+    position: absolute !important
+    width: 1px !important
+    height: 1px !important
+    padding: 0 !important
+    border: 0 !important
+    overflow: hidden !important
+    clip: rect(0, 0, 0, 0) !important
+    clip-path: inset(50%) !important
+    white-space: nowrap !important
+
 +mobile
   .is-hidden-mobile
     display: none !important