From e71c248cde2856c0fab553770477eb98a6850633 Mon Sep 17 00:00:00 2001
From: Muhannad Abdelrazek <muhnad.abdelrazek@gmail.com>
Date: Mon, 9 Jul 2018 17:09:42 +0200
Subject: [PATCH] A11y: Add .is-sr-only to helpers (#1764)

---
 CHANGELOG.md                              |  1 +
 docs/documentation/modifiers/helpers.html |  4 ++++
 sass/base/helpers.sass                    | 11 +++++++++++
 3 files changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9fd7fb0a..f86fd5d6 100644
--- 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
index 3c1c915f..2e69b971 100644
--- a/docs/documentation/modifiers/helpers.html
+++ b/docs/documentation/modifiers/helpers.html
@@ -58,5 +58,9 @@ breadcrumb:
       <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
index 32cafa4f..87774bb4 100644
--- 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