Handle shadow DOM and <dialog> focusing

[domenic]

Closes #2393, by making behave the same as delegatesFocus: they both "delegate focus" to either autofocus="" if it's specified on a (non-shadow-including) descendant, or the first focusable element among their shadow-including descendants if not.

• At least two implementers are interested (and none opposed):
  • This had original agreement over in Define focus behavior for <dialog> element with Shadow DOM #2393.
  • Reaffirmed by Gecko and Chromium in this thread.
• Tests are written and can be reviewed and commented upon at:
  • Test <dialog> + shadow DOM focus web-platform-tests/wpt#31523
• Implementation bugs are filed:
  • Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=383230
  • Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1741936
  • Safari: https://bugs.webkit.org/show_bug.cgi?id=233320

(See WHATWG Working Mode: Changes for more details.)

---

/interaction.html ( diff )
/interactive-elements.html ( diff )

[annevk]

Looks good, but I guess root needs to be initialized to focus target's shadow root (if there is one?), or perhaps it needs to be replaced with focus target.

[annevk]

cc @sefeng211 @emilio

[sefeng211]

Looks good to me!

[domenic]

I created tests for this at web-platform-tests/wpt#31523. Both Firefox and Chrome fail them in interesting and different ways. It's possible I made a mistake when writing them, so careful review appreciated.

It'd be great if @sefeng211 and @mfreed7 could review those tests to make sure the results expected there are good. Then we can proceed to merge this/merge the tests/file bugs.

[domenic]

Ping @sefeng211 @mfreed7 to review the tests in web-platform-tests/wpt#31523 , and @mfreed7 to confirm this looks like a reasonable route from Chromium's perspective.

[josepharhar]

After seeing the crbug from the attached issue, is the basic idea that we will focus the first focusable item even if its in shadow DOM, which chrome doesn't do right now?

[domenic]

The basic idea is what's outlined in the OP: focus either an element with autofocus="" if autofocus="" is specified on a (non-shadow-including) descendant, or focus the first focusable element among their shadow-including descendants if there is no such autofocus="".

So, yes, but also with autofocus="" interaction.

[josepharhar]

This "DOM anchor" span doesn't have data-x="DOM anchor", but the "DOM anchor" span below has data-x="DOM anchor". Does it make a difference?

[domenic]

It's necessary below because the actual text is DOM anchors with a plural "s". Here it can be inferred based on the text content. https://github.com/whatwg/wattsi/blob/main/Syntax.md for more.

[josepharhar]

I may have followup questions when I actually implement the behavior in chrome, but LGTM!

[domenic]

Awesome, thanks for the review; I'll merge this and the tests now.