overflow:hidden affects Shift+Tab within shadow DOM

VERIFIED FIXED in Firefox 65

Status

()

defect
P2
normal
VERIFIED FIXED
7 months ago
4 months ago

People

(Reporter: serguey.kulikov, Assigned: emilio)

Tracking

(Blocks 1 bug)

unspecified
mozilla65
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox65 verified)

Details

Attachments

(2 attachments)

Reporter

Description

7 months ago
Posted file 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
Reporter

Comment 1

7 months ago
UPD: corrected description:


Expected results: 
focus moves out of the shadow root

Actual results:
focus returns back to the input

Updated

7 months ago
Component: Untriaged → DOM
Product: Firefox → Core

Updated

7 months ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P2

Updated

7 months ago
Blocks: shadowdom
No longer blocks: shadowdom-initial-release
Assignee

Comment 2

7 months ago
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
If you have time, feel free to take a look.
Assignee

Updated

7 months ago
Assignee: nobody → emilio
Assignee

Comment 4

7 months ago
Yup! I was right on which code was wrong :-)
Blocks: 1430692
Assignee

Comment 5

7 months ago
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

7 months ago
Pushed by emilio@crisal.io:
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

7 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/5322e59f933e
Status: NEW → RESOLVED
Closed: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla65
I was meant to document the custom code as a clean-up after bug 1507895 and this is done already 👍
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Component: DOM → DOM: Core & HTML
You need to log in before you can comment on or make changes to this bug.