Remove explicit suppression of focus outline #33029
Conversation
It's unclear what the reason for first introducing the original hack here (for `[tabindex="-1"]:focus {...}`) was. Seems something that may have been useful/necessary in SuitCSS, but don't think BS ever relied on this. #18330
It's since been modified to only apply when the browser wouldn't apply a visible outline anyway based on its own heuristics (the `:not(:focus-visible)` part) #28437
But now, thinking this through more...in browsers that do support this pseudo-selector, what this is essentially saying is redundant: don't apply outline in cases where a `tabindex="-1"` element receives focus but the browser wouldn't normally apply focus outline". at best, this is unnecessary. at worst, this actually overrides things an author may explicitly be trying to do with adding `:focus { outline: ... }` explicitly.
|
prompted by #29875 |
|
Want to primarily see if removing this in reboot causes any of bootstrap's own components to suddenly start showing inappropriate focus outlines on things like modal dialog containers etc. It shouldn't, since I believe we explicitly suppress these cases where |
|
Doesn't seem to adversely affect any of our components, from testing. And, as the change in #28437 already essentially neutered this directive, I think it's safe to fully remove it. |
|
Just had a look using Firefox—which IMHO is the most susceptible of messing focus styles— and didn't notice anything. Tested modals, collapses and skip links. |
It's unclear what the reason for first introducing the original hack here (for
[tabindex="-1"]:focus {...}) was. Seems something that may have been useful/necessary in SuitCSS, but don't think BS ever relied on this. #18330It's since been modified to only apply when the browser wouldn't apply a visible outline anyway based on its own heuristics (the
:not(:focus-visible)part) #28437But now, thinking this through more...in browsers that do support this pseudo-selector, what this is essentially saying is redundant: don't apply outline in cases where a
tabindex="-1"element receives focus but the browser wouldn't normally apply focus outline". at best, this is unnecessary. at worst, this actually overrides things an author may explicitly be trying to do with adding:focus { outline: ... }explicitly.