[delegatesFocus] Focus should transfer to focusable ancestor (in the same shadow) when click target is not focusable

[ekashida]

Description

When the user clicks on a focusable element, the delegatesFocus polyfill disables all the magic and lets the browser do its thing. This implementation breaks down when the click target is a non-focusable element wrapped by a focusable element.

Expected Behavior

Focus should apply to the focusable element wrapping the non-focusable element when the non-focusable element is clicked.

Observed Behavior

Clicks on non-focusable elements causes focus to be forwarded to the next focusable element outside of the shadow, even the the click target is wrapped by a focusable element (such as a button).

It is as though the user arrived at the target via sequential focus navigation, sees that the shadow host has a tabindex value of -1, and forwards focus to the next focusable element outside of the shadow.

Steps to Reproduce

https://playground.lwcjs.org/projects/CsB3R9LDu/6/edit