1507101 - overflow:hidden affects Shift+Tab within shadow DOM

Status: VERIFIED FIXED

(Core :: DOM: Core & HTML, defect, P2)

Description

[serguey.kulikov]

Attachment: repro.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

Steps to reproduce:

1. Create a custom element with shadow root
2. In the shadow DOM, add the div with overflow: hidden
3. In that div, place 2 focusable elements (e.g. button and input)
4. Focus the input
5. Press Shift+Tab, to move focus back to button
6. Press Shift+Tab once again

https://jsfiddle.net/webpadawan/raox4mtu/


Actual results:

focus moves out of the shadow root


Expected results:

focus returns back to the input

Comment 1

[serguey.kulikov]

UPD: corrected description:


Expected results: 
focus moves out of the shadow root

Actual results:
focus returns back to the input

Comment 2

[Emilio Cobos Álvarez (:emilio)]

That's indeed a bit wild, I bet this is related to the extra anonymous box we have for overflow: hidden. Olli, let me know if you want me to look at it, from a quick look I assume the bug is around this code, right?

  https://searchfox.org/mozilla-central/rev/c0b26c40769a1e5607a1ae8be37fe64df64fc55e/dom/base/nsFocusManager.cpp#3353

Comment 3

[Olli Pettay [:smaug][[e-mail]]]

If you have time, feel free to take a look.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Yup! I was right on which code was wrong :-)

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Use StyleChildrenIterator instead of custom frame tree walking code to handle NAC inside shadow dom.

There are lots of frames which create anonymous content (like scrollframes,
which generate scrollbars) but for which this code was wrong.

Use StyleChildrenIterator which has a defined order between NAC and flattened
tree. I've verified this doesn't break tabbing through input type="date" with
UA widget disabled, fwiw.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5322e59f933e
Use StyleChildrenIterator instead of custom frame tree walking code to handle NAC inside shadow dom. r=smaug

Comment 7

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/5322e59f933e

Comment 8

[Tim Guan-tin Chien [:timdream] (please needinfo)]

I was meant to document the custom code as a clean-up after bug 1507895 and this is done already 👍

Comment 9

[Timea Zsoldos [:zstimi/tzsoldos], Desktop QA]

I have reproduced this issue using Firefox 65.0a1 (2018.11.14) on Windows 10 x64.
I can confirm this issue is fixed, I verified using Firefox 65.0b11 on Ubuntu 18.04 x64, Windows 10 x64 and on Mac OS X 10.13.