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

CHANGELOG.md

@@ -487,6 +487,7 @@
 ### New features
 
 * 🎉 Rounded buttons, inputs, pagination and toggle tabs
+* #1764 New `.is-sr-only` helper
 
 ### Improvements
 

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>

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