Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Reboot] Suppress focus outline on elements that cannot be accessed via keyboard #18330

Closed
oleersoy opened this issue Nov 24, 2015 · 3 comments
Closed

[Reboot] Suppress focus outline on elements that cannot be accessed via keyboard #18330

oleersoy opened this issue Nov 24, 2015 · 3 comments
Labels
accessibility css v4
Milestone
v4.0.0-alpha.2

Comments

@oleersoy
Copy link

Hi,

SuitCSS's base module contains the following snippet to suppress the focus outline on elements that cannot be accessed via keyboard.

/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}

Perhaps reboot should also include this.

Cheers,
Ole
@oleersoy oleersoy mentioned this issue Nov 24, 2015
Closed
@cvrebert
Copy link
Collaborator

@patrickhlauke Any concerns here?

@patrickhlauke
Copy link
Member

no concerns i can think of just now, no.

@mdo mdo added this to the v4.0.0-alpha.2 milestone Dec 8, 2015
@mdo
Copy link
Member

mdo commented Dec 8, 2015

Added in 5a6a128.

@mdo mdo closed this as completed Dec 8, 2015
mdo added a commit that referenced this issue Dec 8, 2015
@mdo
fixes #18330
5a6a128
patrickhlauke added a commit that referenced this issue Feb 9, 2021
@patrickhlauke
Remove explicit suppression of focus outline
cc54152 
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.
@patrickhlauke patrickhlauke mentioned this issue Feb 9, 2021
Merged
mdo pushed a commit that referenced this issue Feb 11, 2021
@patrickhlauke @mdo
Remove explicit suppression of focus outline
df79aad 
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
Assignees
No one assigned
Labels
accessibility css v4
Projects
None yet
Milestone
v4.0.0-alpha.2
Development

No branches or pull requests
4 participants
@mdo @cvrebert @patrickhlauke @oleersoy