Re: [w3c/webcomponents] Focus delegation from shadow host should not behave like sequential focus navigation (#830)

Let me try to come up with a semi-realistic example. This is fairly hard to do, because we need to find situations where:

- Using delegatesFocus makes sense
- Click/programmatic/sequential focusability differ for the shadow children

You can easily come up with contrived examples, like the OP, by using `tabindex=""` to cause differing click/programmatic/sequential focusability. But a realistic example is trickier. This is the best I've got.

Consider a control that is a kind of "color well", with a button that pops open a color picker, plus a textbox for direct control entry. We want this control to delegate focus, similar to `<input type=date>`: it is itself focusable, but also you can focus the individual pieces of it, at least in browsers where they are focusable. So your flat tree looks like:

```html
<span tabindex="0">Before</span>
<color-picker>
  <!!shadow-root delegatesFocus=true!!>
    <button style="background: #0033FF;"></button>
    #<input type="text" value="0033FF">
  </!!shadow-root!!>
</color-picker>
<span tabindex="0">After</span>
```

On Chrome with the current Chromium behavior:

- Tabbing through this markup will focus Before -> button -> input -> After
  - The button is the first sequentially-focusable shadow child
- Clicking on the color-picker (e.g. on the # character) will focus the button
  - The button is the first sequentially-focusable shadow child
- Calling `.focus()` on the color-picker will focus the button
  - The button is the first sequentially-focusable shadow child

On Safari (where buttons are only programmatically focusable), with the current Chromium behavior:

- Tabbing through this markup will focus Before -> input -> After
  - The input is the first sequentially-focusable shadow child
- Clicking on the color-picker (e.g. on the # character) will focus the input
  - The input is the first sequentially-focusable shadow child
- Calling `.focus()` on the color-picker will **focus the input**
  - The input is the first sequentially-focusable shadow child

On Chrome with the proposed behavior: no change, but the reasoning changes...


- Tabbing through this markup will focus Before -> button -> input -> After
  - The button is the first sequentially-focusable shadow child
- Clicking on the color-picker (e.g. on the # character) will focus the button
  - The button is the first **click**-focusable shadow child
- Calling `.focus()` on the color-picker will focus the button
  - The button is the first **programatically**-focusable shadow child


On Safari with the proposed behavior:

- Tabbing through this markup will focus Before -> input -> After
  - The input is the first sequentially-focusable shadow child
- Clicking on the color-picker (e.g. on the # character) will focus the input
  - The input is the first **click**-focusable shadow child
- Calling `.focus()` on the color-picker will **focus the button**, the first programmatically-focusable
  - The button is the first **programmatically**-focusable shadow child

Make sense?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/830#issuecomment-525816320