Closed Bug 1604140 Opened 5 years ago Closed 5 years ago

Using overflow:auto|scroll and display:grid|flex creates a “focus trap” within shadow DOM

Categories

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

73 Branch
All
Unspecified
defect

Tracking

()

RESOLVED FIXED
mozilla75
Tracking Status
firefox75 --- fixed

People

(Reporter: abruere, Assigned: edgar)

References

(Blocks 3 open bugs)

Details

(Keywords: access)

Attachments

(4 files, 1 obsolete file)

Attached file shadow-dom-focus-trap.html (deleted) —

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0

Steps to reproduce:

[Affected versions]:

Latest Firefox Nightly 73.0a1 (Build ID: 20191215094838, UA: Mozilla/5.0 (X11; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0)
Firefox 70.0.1 (Build ID: 20191031062442, UA: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:70.0) Gecko/20100101 Firefox/70.0)
Firefox 64 (Build ID: 20181206201918, UA: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0)

[Affected Platforms]:

All (reproduced on Linux x64 and Windows 10 x64)

[Prerequisites]:

None

[Steps to reproduce]:

1. Focus the input in shadow root (either with display:grid or flex in attached HTML).
2. Press Tab to move focus to the button in same shadow root
3. Press Tab again

Attached an HTML snippet to reproduce the issue. Here is also a JSFiddle: https://jsfiddle.net/abruere/oe3dfv70/

Actual results:

Focus moves out of the shadow root to next input in Light DOM (see last example with display: block).

Expected results:

Focus moves back to the input in the same shadow root.

[Additional details]:

The loosely related bug 1507101 might help to pin down the cause.
Intermittent focus-within-shadow test failure bug 1444671 could be related as well.

Found this bug while digging into bug 1597993.

Component: Untriaged → DOM: Core & HTML
Product: Firefox → Core
Hardware: Unspecified → All
Keywords: access
Blocks: 1597993
Flags: needinfo?(echen)
Blocks: shadowdom
Status: UNCONFIRMED → NEW
Ever confirmed: true

It looks like a long-standing issue. I will take a look.

Assignee: nobody → echen
Flags: needinfo?(echen)
Priority: -- → P2
Depends on: 1607223
Attachment #9118988 - Attachment description: Bug 1604140 - Part 4: Avoid check of next tabbable content on the first element in shadow dom duplicatedly; → Bug 1604140 - Part 4: Avoid performing check of next tabbable content on the first element of shadow dom duplicatedly;

Comment on attachment 9118988 [details]
Bug 1604140 - Part 4: Avoid performing check of next tabbable content on the first element of shadow dom duplicatedly;

Revision D58876 was moved to bug 1607223. Setting attachment 9118988 [details] to obsolete.

Attachment #9118988 - Attachment is obsolete: true
Blocks: 1562716
Attachment #9124038 - Attachment description: Bug 1604140 - Fix focus trap within shadow DOM whose host is scrollable; → Bug 1604140 - Part 1: Fix focus trap within shadow DOM when host is scrollable;

The original check, currentContent != startContent, is to skip the element we started on in frame traversal.
This would happen for instance on a scrollable element, where frame traversal could return the element again.

However, in shadow dom case, the frame traversal may start on a redirected shadow host, where startContent is still the original start element.

Attachment #9124916 - Attachment description: Bug 1604140 - Part 3: Add backward tab navigation tests in wpt; → Bug 1604140 - Part 3: Add test for focus tabbing through scrollable shadow host;
Pushed by echen@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/8897a2187a95 Part 1: Fix focus trap within shadow DOM when host is scrollable; r=smaug https://hg.mozilla.org/integration/autoland/rev/cc54269377f2 Part 2: Should skip the shadow host we started on in frame traversal; r=smaug https://hg.mozilla.org/integration/autoland/rev/59fc63dfa309 Part 3: Add test for focus tabbing through scrollable shadow host; r=smaug
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/21775 for changes under testing/web-platform/tests
Blocks: 1615215
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Upstream PR was closed without merging

Hmm, look like some thing related bug 1614224? I will rebase patches and test again.

Pushed by echen@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/241851c7036f Part 1: Fix focus trap within shadow DOM when host is scrollable; r=smaug https://hg.mozilla.org/integration/autoland/rev/0af4f0491ba3 Part 2: Should skip the shadow host we started on in frame traversal; r=smaug https://hg.mozilla.org/integration/autoland/rev/7b1f14ca66b9 Part 3: Add test for focus tabbing through scrollable shadow host; r=smaug
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla75
Upstream PR merged by moz-wptsync-bot
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: