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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9fd7fb0afdd4dc855e74392b7c4a0683c7d9b8ae..f86fd5d6d379da9c6faf70b8276afb23cc6f0a50 100644 (file)
--- 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 3c1c915fec0370c09fab249f9b5fd3e2553fa7e6..2e69b971a19da7f56c1d1f5b0f352fb235c1e20f 100644 (file)
--- 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 32cafa4f7eb04e329e5e34214a19ffd7af098e63..87774bb4e8bb87774937bd2a14dcb2a6642a5a61 100644 (file)
--- 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