Remove indiscriminate outline suppression for tabindex="-1" elements #28437
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
instead, only apply outline suppression if the browser wouldn't normally apply the focus outline, using the (currently experimental) `:focus-visible` pseudo-class
|
This will add the focus ring back everywhere since this property is not yet supported (https://caniuse.com/#search=focus-visible). Don't know if that's an issue? |
everywhere there's a |
|
but yes, the |
XhmikosR
pushed a commit
that referenced
this pull request
Mar 12, 2019
…28437) instead, only apply outline suppression if the browser wouldn't normally apply the focus outline, using the (currently experimental) `:focus-visible` pseudo-class
Closed
patrickhlauke
added a commit
that referenced
this pull request
Feb 9, 2021
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.
mdo
pushed a commit
that referenced
this pull request
Feb 11, 2021
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
instead, only apply outline suppression if the browser wouldn't normally apply the focus outline, using the (currently experimental)
:focus-visiblepseudo-classCloses #28425