[Webkit-unassigned] [Bug 205531] New: :focus doesn't select shadow root hosts with delegatesFocus when focus moves from outside the page to a focusable element in the shadow root

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=205531

            Bug ID: 205531
           Summary: :focus doesn't select shadow root hosts with
                    delegatesFocus when focus moves from outside the page
                    to a focusable element in the shadow root
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Macintosh
                OS: macOS 10.14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: bicknellr at google.com

Created attachment 386276

  --> https://bugs.webkit.org/attachment.cgi?id=386276&action=review

A page with a focusable input inside a shadow root that delegates focus.

Safari Technology Preview, Release 96 (Safari 13.1, WebKit 14609.1.9.7)

When some part of the Safari UI outside of the web content area is focused and then focus is moved directly to an element that is a descendant of a shadow root that delegates focus, CSS rules using `:focus` to select the shadow root's host don't apply.


Steps to reproduce:

1. Open the attached file "WebKit-delegatesFocus-focusSelector.html". The input inside the div should become focused and the div should have a magenta border.

2. Click somewhere on the page outside of the box to cause it to lose focus, the border should become black.

3. Click the URL bar to focus it.

4. Press the tab key (once). Or, click inside the black box (either inside or outside the contained input). The input inside the shadow root should now have focus.

The input inside the div with the shadow root becomes focused but the CSS rule with the `:host(:focus)` selector does not apply. (The border of the host div should become magenta, but doesn't.)


If you change System Preferences > Keyboard > Shortcuts > Full Keyboard Access to "All controls", you'll be able to tab through the other buttons in the toolbar. Using the tab key to move focus from something other than the URL bar to the input or clicking on the box still reproduces this behavior (i.e. this isn't specific to the URL bar).

Also, if you add an input before the div in that page, then tab from the URL bar to that new input and then to the input inside the shadow root, the `:host(:focus)` rule *does* apply correctly, while moving focus directly from the URL bar to the input in the shadow root by clicking still does not.


Another way to reproduce this is:

1. Open the attached file "WebKit-delegatesFocus-focusSelector.html".

2. Open the inspector and focus something in it (for example, the console input).

3. Close the inspector using the keyboard shortcut.

4. Refresh the page.

The input will be focused by the script but the `:host(:focus)` rule still doesn't apply.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20191221/1b2d7aaf/attachment.htm>