New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 618587 link

Starred by 13 users

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: Nov 2016
Cc:
Components:
EstimatedDays: ----
NextAction: 2016-11-07
OS: All
Pri: 1
Type: Bug



Sign in to add a comment

Tab focus navigation gets trapped when delegatesFocus is used

Project Member Reported by kochi@chromium.org, Jun 9 2016

Issue description

Version: Canary as of today
Extra flag: --enable-experimental-web-platform-features

The following tests tab focus navigation, and when
shadow root is attached with {delegatesFocus: true} option,
tab focus navigation gets trapped while moving focus back and forth.
http://jsbin.com/bonudiwagu/1/edit?html,output
(will eventually repeat between "x-inner light" and "x-inner shadow 2")

(the demo by courtesy of Russell Bicknell)
 

Comment 1 by kochi@chromium.org, Jul 8 2016

Status: Started (was: Assigned)

Comment 2 by kochi@chromium.org, Jul 28 2016

Labels: -Pri-1 Pri-2
lowering priority, as this is not blocking/urgent.
Uh, this would make it pretty difficult to use a site with only a keyboard, don't you think?

Comment 4 by kochi@chromium.org, Aug 2 2016

This is simply a bug in the navigation code, and not a spec bug.
Once this is fixed, usability should be okay.
No one claims that this is a spec bug. :)

This implementation bug would cause a very bad user experience.
Pri-2 might be okay, but it looks Pri-1.5 bug to me.

Comment 6 by hayato@chromium.org, Sep 21 2016

 Issue 648345  has been merged into this issue.

Comment 7 by hayato@chromium.org, Sep 22 2016

Labels: -Pri-2 Pri-1
The focus navigation is also broken even when delegatesFocus=false, according to https://bugs.chromium.org/p/chromium/issues/detail?id=648345.

I think this is a general bug of a focus navigation in Shadow DOM v1.
Let me raise the priority to 1. This is a very bad user experience.
Ran into this yesterday when building a button group component. It only happens if the light dom of a component also includes html (the <span> in the first button component).

http://codepen.io/seancurtis/pen/yaVjZK?editors=0010

Expected that tabbing would go to both buttons, but it skips over the second one. This gets even stranger if you include a second focusable element inside the light dom (this is a contrived example, but I figured it might help lead to a conclusion as to why). 

http://codepen.io/seancurtis/pen/bwBamv?editors=0010

We picked this up when performing accessibility testing of our components before release. It's certainly not a minor issue. This is a pretty serious issue for us.

Comment 9 by n...@chromium.org, Oct 6 2016

Is there an ETA on when this make it to Canary? I see that it's been started for a couple of months with no progress :(
Labels: M-56
Components: -Blink>WebComponents Blink>DOM>ShadowDOM

Comment 12 by kochi@chromium.org, Oct 18 2016

This has been suspended for a while, but I'm resuming the work.
Project Member

Comment 13 by bugdroid1@chromium.org, Oct 31 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/5639462246b2b792a1d75ba418fce6c6edd76940

commit 5639462246b2b792a1d75ba418fce6c6edd76940
Author: kochi <kochi@chromium.org>
Date: Mon Oct 31 10:53:19 2016

Fix focus navigation for nested slot case

For forward navigation, SlotScopedTraversal was not
excluding an element that is assigned to another slot.

For backward navigation, the original logic in
FocusController/SlotScopedTraversal failed to
detect case when shadow hosts exist in a slot scope.
Elements that are slotted to slots in their shadow roots
should be skipped in traversal.

BUG= 618587 

Review-Url: https://codereview.chromium.org/2432293002
Cr-Commit-Position: refs/heads/master@{#428682}

[add] https://crrev.com/5639462246b2b792a1d75ba418fce6c6edd76940/third_party/WebKit/LayoutTests/shadow-dom/focus-navigation-slot-nested-2levels.html
[add] https://crrev.com/5639462246b2b792a1d75ba418fce6c6edd76940/third_party/WebKit/LayoutTests/shadow-dom/focus-navigation-slot-nested-delegatesFocus.html
[add] https://crrev.com/5639462246b2b792a1d75ba418fce6c6edd76940/third_party/WebKit/LayoutTests/shadow-dom/focus-navigation-slot-nested.html
[modify] https://crrev.com/5639462246b2b792a1d75ba418fce6c6edd76940/third_party/WebKit/LayoutTests/shadow-dom/resources/shadow-dom.js
[modify] https://crrev.com/5639462246b2b792a1d75ba418fce6c6edd76940/third_party/WebKit/Source/core/BUILD.gn
[modify] https://crrev.com/5639462246b2b792a1d75ba418fce6c6edd76940/third_party/WebKit/Source/core/dom/shadow/SlotScopedTraversal.cpp
[modify] https://crrev.com/5639462246b2b792a1d75ba418fce6c6edd76940/third_party/WebKit/Source/core/dom/shadow/SlotScopedTraversal.h
[add] https://crrev.com/5639462246b2b792a1d75ba418fce6c6edd76940/third_party/WebKit/Source/core/dom/shadow/SlotScopedTraversalTest.cpp
[modify] https://crrev.com/5639462246b2b792a1d75ba418fce6c6edd76940/third_party/WebKit/Source/core/page/FocusController.cpp

Status: Fixed (was: Started)
The case in the original description and comment #8 should be working
properly with the fix. Will be in canary in a few days.

I'll bake it in canary or dev for a few days and will try to make
merge request to stable 55.

Filed remaining issue as  bug 660806  (for fallback slot case).
NextAction: 2016-11-07
Labels: -M-56 M-55 Merge-Request-55
Requesting merge to M55, this was very visible bug that affects usability
of form elements, when used in conjunction with Shadow DOM v1.
As far as I see there is no crash reports due to this change on canary/dev.

Comment 17 by dimu@chromium.org, Nov 7 2016

Labels: -Merge-Request-55 Merge-Approved-55 Hotlist-Merge-Approved
Your change meets the bar and is auto-approved for M55 (branch: 2883)
Project Member

Comment 18 by bugdroid1@chromium.org, Nov 8 2016

Labels: -merge-approved-55 merge-merged-2883
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/bcc1bf393bb93e080c224e743a9bb972948db27e

commit bcc1bf393bb93e080c224e743a9bb972948db27e
Author: Takayoshi Kochi <kochi@chromium.org>
Date: Tue Nov 08 00:11:22 2016

Fix focus navigation for nested slot case

For forward navigation, SlotScopedTraversal was not
excluding an element that is assigned to another slot.

For backward navigation, the original logic in
FocusController/SlotScopedTraversal failed to
detect case when shadow hosts exist in a slot scope.
Elements that are slotted to slots in their shadow roots
should be skipped in traversal.

BUG= 618587 

Review-Url: https://codereview.chromium.org/2432293002
Cr-Commit-Position: refs/heads/master@{#428682}
(cherry picked from commit 5639462246b2b792a1d75ba418fce6c6edd76940)

Review URL: https://codereview.chromium.org/2483073002 .

Cr-Commit-Position: refs/branch-heads/2883@{#489}
Cr-Branched-From: 614d31daee2f61b0180df403a8ad43f20b9f6dd7-refs/heads/master@{#423768}

[add] https://crrev.com/bcc1bf393bb93e080c224e743a9bb972948db27e/third_party/WebKit/LayoutTests/shadow-dom/focus-navigation-slot-nested-2levels.html
[add] https://crrev.com/bcc1bf393bb93e080c224e743a9bb972948db27e/third_party/WebKit/LayoutTests/shadow-dom/focus-navigation-slot-nested-delegatesFocus.html
[add] https://crrev.com/bcc1bf393bb93e080c224e743a9bb972948db27e/third_party/WebKit/LayoutTests/shadow-dom/focus-navigation-slot-nested.html
[modify] https://crrev.com/bcc1bf393bb93e080c224e743a9bb972948db27e/third_party/WebKit/LayoutTests/shadow-dom/resources/shadow-dom.js
[modify] https://crrev.com/bcc1bf393bb93e080c224e743a9bb972948db27e/third_party/WebKit/Source/core/BUILD.gn
[modify] https://crrev.com/bcc1bf393bb93e080c224e743a9bb972948db27e/third_party/WebKit/Source/core/dom/shadow/SlotScopedTraversal.cpp
[modify] https://crrev.com/bcc1bf393bb93e080c224e743a9bb972948db27e/third_party/WebKit/Source/core/dom/shadow/SlotScopedTraversal.h
[add] https://crrev.com/bcc1bf393bb93e080c224e743a9bb972948db27e/third_party/WebKit/Source/core/dom/shadow/SlotScopedTraversalTest.cpp
[modify] https://crrev.com/bcc1bf393bb93e080c224e743a9bb972948db27e/third_party/WebKit/Source/core/page/FocusController.cpp

Comment 19 by ajha@chromium.org, Nov 9 2016

Labels: TE-Verified-55.0.2883.44 TE-Verified-M55
Verified the fix on the latest M-55(55.0.2883.44) on Windows-10, Mac OS 10.11.6 and Linux Ubuntu 14.04 as per the attached jsbin in C#0. This is working as intended. Hence adding the verified label.




Cc: dglazkov@chromium.org aboxhall@chromium.org hayato@chromium.org kochi@chromium.org
 Issue 459858  has been merged into this issue.
Components: Blink>HTML>Focus
Components: -Blink>Focus

Sign in to add a comment