Bug 260480 – Custom element with delegatesFocus does not focus if inner element is not first child

• Component: DOM
• Status: RESOLVED INVALID

[Elizabeth Mitchell]

A custom element with `delegatesFocus: true` does not correctly delegate focus if the first child of the custom element's shadow DOM is not focusable.

This is common with wrapper divs and styling.

```
<!-- Does not delegate focus correctly -->
<x-button>
  #shadow-root
    <div class="style">
      <button><slot></slot></button>
    </div>
</x-button>

<!-- Delegates focus correctly -->
<x-button>
  #shadow-root
    <button><slot></slot></button>
</x-button>
```

See https://jsbin.com/ranuvuhiri/edit?html,output and click on "Focus button"

Expected: custom element button is focused
Actual: button is not focused

Tested in Safari 16.6 on MacOS 13.5

[Radar WebKit Bug Importer]

<rdar://problem/114580905>

[Ryosuke Niwa]

Hm... the focus is set. We're somehow not applying :focus rule, however.

[Ryosuke Niwa]

Created attachment 470649 [details]
Reduction

[Ryosuke Niwa]

Oh, the issue is simply that x-button becomes width 0px because it's a display: inline. If you set display: block on x-button or replace div with span, the dotted red line renders correctly.

Note that buttons are not focusable by mouse clicks on Apple platforms by default. If you want to make a button focusable, set tabindex=0 on button elements.

As such, this is behaving correctly.