Bug 199633 - Sequential focus navigation can't get out of a descendant of a slot element in a document tree
Summary: Sequential focus navigation can't get out of a descendant of a slot element i...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: Safari 12
Hardware: All All
: P2 Major
Assignee: Ryosuke Niwa
URL:
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2019-07-09 12:18 PDT by Eugene Kashida
Modified: 2020-03-26 12:58 PDT (History)
8 users (show)

See Also:


Attachments
repro of issue (wrapped by slot) with additional example of expected behavior (wrapped by div) (429 bytes, text/html)
2019-07-09 12:18 PDT, Eugene Kashida
no flags Details
Fixes the bug (5.47 KB, patch)
2020-03-25 22:41 PDT, Ryosuke Niwa
no flags Details | Formatted Diff | Diff
Fixes the bug (5.56 KB, patch)
2020-03-25 22:42 PDT, Ryosuke Niwa
no flags Details | Formatted Diff | Diff
Fixed the test (5.56 KB, patch)
2020-03-26 00:38 PDT, Ryosuke Niwa
darin: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Eugene Kashida 2019-07-09 12:18:43 PDT
Created attachment 373743 [details]
repro of issue (wrapped by slot) with additional example of expected behavior (wrapped by div)

Slot elements with focusable descendants trap focus during sequential focus navigation. This may seem like an edge case because the slot element is not being used for its intended purpose but it causes major accessibility issues for Shadow DOM polyfills.
Comment 1 Radar WebKit Bug Importer 2019-07-09 12:24:18 PDT
<rdar://problem/52846658>
Comment 2 Ryosuke Niwa 2020-03-19 18:48:07 PDT
Looks like adding a positive tabindex on the slot element itself, and subsequent focusable element like this seems to work but this workaround doesn't seem to work when there are multiple slot elements.

<div>
<h3>three buttons wrapped with a slot</h3>
<input>
<input>
<slot tabindex=1>
<button>foo</button>
<button>foo</button>
<button>foo</button>
</slot>
<input tabindex=1>
</div>
Comment 3 Ryosuke Niwa 2020-03-25 22:41:25 PDT
Created attachment 394579 [details]
Fixes the bug
Comment 4 Ryosuke Niwa 2020-03-25 22:42:39 PDT
Created attachment 394580 [details]
Fixes the bug
Comment 5 Ryosuke Niwa 2020-03-26 00:38:20 PDT
Created attachment 394583 [details]
Fixed the test
Comment 6 Ryosuke Niwa 2020-03-26 12:58:34 PDT
Committed r259065: <https://trac.webkit.org/changeset/259065>