Created by: MartijnCuppens
Analysis of the .sr-only properties:
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