From: Muhannad Abdelrazek <muhnad.abdelrazek@gmail.com>
Date: Mon, 9 Jul 2018 15:09:42 +0000 (+0200)
Subject: A11y: Add .is-sr-only to helpers (#1764)
X-Git-Tag: 0.7.2~83
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e71c248cde2856c0fab553770477eb98a6850633;p=thirdparty%2Fbulma.git

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9fd7fb0af..f86fd5d6d 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 3c1c915fe..2e69b971a 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 32cafa4f7..87774bb4e 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