From 208723606fc3badf945cfddd74c0d196b7003fba Mon Sep 17 00:00:00 2001
From: Muhannad Abdelrazek <muhnad.abdelrazek@gmail.com>
Date: Thu, 29 Mar 2018 00:47:18 +0200
Subject: [PATCH] A11y: Add .is-sr-only to helpers

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a1c35d178..7b031a5b31 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,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 6a6cad7166..0d69a83daa 100644
--- a/docs/documentation/modifiers/helpers.html
+++ b/docs/documentation/modifiers/helpers.html
@@ -37,7 +37,7 @@ <h2 class="subtitle">You can apply <strong>helper classes</strong> to almost any
           <td>Removes any <strong>padding</strong></td>
         </tr>
         <tr>
-          <th rowspan="6">Other</th>
+          <th rowspan="7">Other</th>
           <td><code>is-overlay</code></td>
           <td>Completely covers the first positioned parent</td>
         </tr>
@@ -60,6 +60,11 @@ <h2 class="subtitle">You can apply <strong>helper classes</strong> to almost any
           <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>
   </div>
diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass
index c838c4844e..edebfd6155 100644
--- a/sass/base/helpers.sass
+++ b/sass/base/helpers.sass
@@ -154,6 +154,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