Mouse/Touch Events Can Focus Parent Element

• Component: UI Events
• Status: NEW ---

[Rodney Rehm]

Created attachment 243744 [details]
reduced test case

reduced test case: http://medialize.github.io/ally.js/tests/browser-bugs/webkit-pointer-focus-parent.html

Clicking on an <a> element nested in a <div tabindex="-1"> will cause the <div> to receive focus. If anything should receive focus, it should be the <a> element. This behavior can be observed for mousedown and touchstart.

A way to circumvent this behavior is upon mousedown removing all parental tabindex attributes, so once the mousedown handler finished the only naturally focusable element remaining is the element actually clicked upon. On mouseup the tabindex attributes must be restored. The same applies to touchstart and touchend/touchcancel.

[Ahmad Saleem]

I am able to reproduce this bug in Safari Technology Preview 152 using attached reduction and clicking on first case where <a> with tab index = 1, it leads to <div> having focus and the 'red' outline is extended to whole visual viewport while in case of other browsers, it is limited to similar to other case, where tab index is negative 1 and just limit to <a> text.

All other browsers (Chrome Canary 107 and Firefox Nightly 106) work similar in both cases and match each other. Thanks!