diff --git a/assets/sass/components/visually-hidden/_visually-hidden.scss b/assets/sass/components/visually-hidden/_visually-hidden.scss index 56fdcfe..75ab590 100644 --- a/assets/sass/components/visually-hidden/_visually-hidden.scss +++ b/assets/sass/components/visually-hidden/_visually-hidden.scss @@ -1,24 +1,16 @@ // Visually hidden // // Make an element visually hidden, but accessible to screen readers, etc. -// -// .visually-hidden--off - Turns off the visually-hidden effect. -// .visually-hidden--focusable - Makes an element visually hidden by default, -// but visible when receiving focus. -// .visually-hidden--focusable:focus - A focused, and visible, element. .visually-hidden, %visually-hidden { - @include visually-hidden(); - - &--off { - @include visually-hidden--off(); - } - - &--focusable { - &:active, - &:focus { - @extend %visually-hidden--off; - } + &:not(:focus):not(:active) { + position: absolute; + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + width: 1px; + overflow: hidden; + white-space: nowrap; } }