Created by: MartijnCuppens
.sr-only
properties:
Analysis of the position: absolute
: needed to prevent the element from taking up space in the document
width: 1px
: prevents the element from becoming too wide and therefor creating scrollbars
height: 1px
: prevents the element from becoming too tall and therefor creating scrollbars
padding: 0
: padding could increase the width or height even when those are set to 1px
overflow: hidden
: prevent the text inside from breaking out the box
clip: rect(0, 0, 0, 0)
: make the element invisible
white-space: nowrap
: see https://github.com/twbs/bootstrap/pull/22154
border: 0
: border could increase the width or height even when those are set to 1px
So yeah, we all need them.
We had this problem: https://github.com/twbs/bootstrap/issues/28691, which could be fixed by adding !important
to all properties, but that would just make this problem bigger: https://codepen.io/MartijnCuppens/pen/Pgrpwe.
And than I remembered a technique I used before (https://github.com/twbs/bootstrap/pull/25806), just make use of the :not()
selector. This would solve #28691 (closed) without introducing padding issues.
This would also not require the .sr-only
class on elements with .sr-only-focusable
. I've changed the docs a bit to make this clear.
I added @Jakobud as co author for the !important
commit since he already fixed that in #28701.
Fixes https://github.com/twbs/bootstrap/issues/28691 Closes https://github.com/twbs/bootstrap/pull/28701