diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fd7fb0afd..f86fd5d6d3 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 3c1c915fec..2e69b971a1 100644 --- a/docs/documentation/modifiers/helpers.html +++ b/docs/documentation/modifiers/helpers.html @@ -58,5 +58,9 @@ is-invisible Adds visibility hidden + + is-sr-only + Hide elements visually but keep the element available to be announced by a screen reader + diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass index 32cafa4f7e..87774bb4e8 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