Added !important to sr-only and sr-only-focusable SASS mixins

[Jakobud]

Closes #28691

[Jakobud]

This is regarding #28691

[ysds]

@patrickhlauke I added comment in #28691. Could you re-review the necessity need to set "! Important" for all properties?

[patrickhlauke]

@ysds i really don't see the harm of just having everything !important regardless of explicit need. to me, makes it easier than having to potentially miss out/test permutations of what does/doesn't need to be set...
so whatever, retracting my review for now...

[MartijnCuppens]

Hmm, this looks like a nothing can go wrong here PR, but @ysds' seems to be right here. Adding !important to everything can lead to some unexpected results. In fact even without !important we already have an issue: https://codepen.io/MartijnCuppens/pen/Pgrpwe

I think we should have a look at which properties are still necessary and then rethink about which should be !important before maybe introducing more problems.

I also just noticed we did a way shorter notation for the button groups, maybe that's more what we should look into:

bootstrap/scss/_button-group.scss

Lines 156 to 161 in 09c99fe

	input[type="radio"],
	input[type="checkbox"] {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	pointer-events: none;
	}

[Jakobud]

I'm not sure I'm seeing the issue in that codepen. The sr-only button appears only when focused, which appears to be functioning correctly...

EDIT: Ah I see now the button sizing or padding is not correct.

[Jakobud]

Maybe the solution on sr-only-focusable would be to set values to use inherit so that they inherit their values (padding, margin) to what they should be according to their other classes when it's focused...

Needs further investigation