Closed Bug 1751253 Opened 3 years ago Closed 3 years ago

Firefox erroneously displays focus ring on a web component when the host has a focus ring defined and any internal item has received focus

Categories

(Core :: DOM: UI Events & Focus Handling, defect)

Product:
Core
Component:
DOM: UI Events & Focus Handling
Version:
Firefox 95
Type:
defect

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: elliot.nahman, Unassigned)

References

Details

Steps to reproduce:

I created a web component with focusable elements inside (eg a button) and I defined a focus state on the host (eg :host(:focus) { outline: 4px solid red; })

Codepen with examples: https://codepen.io/nonmetalhail/pen/QWqXNQp

Actual results:

Tabbing to focus on the button inside the the web component causes the host to display its focus ring in addition to the button focus ring.

Expected results:

Only the button focus ring should be displayed.

The Bugbug bot thinks this bug should belong to the 'Core::DOM: UI Events & Focus Handling' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: Untriaged → DOM: UI Events & Focus Handling
Product: Firefox → Core
Severity: -- → S3
See Also: → 1752687

You want to use :focus-visible. This is per spec, see https://html.spec.whatwg.org/#selector-focus. Safari matches our behavior, this is a Chrome bug.

Status: UNCONFIRMED → RESOLVED
Closed: 3 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.