Bug 199633

Summary: Sequential focus navigation can't get out of a descendant of a slot element in a document tree
Product: WebKit Reporter: Eugene Kashida <ekashida>
Component: UI EventsAssignee: Ryosuke Niwa <rniwa>
Status: RESOLVED FIXED    
Severity: Major CC: andresg_22, cdumez, cfleizach, darin, jcraig, koivisto, rniwa, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 12   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
repro of issue (wrapped by slot) with additional example of expected behavior (wrapped by div)
none
Fixes the bug
none
Fixes the bug
none
Fixed the test darin: review+

Eugene Kashida
Reported 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.
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
DetailsFormatted DiffDiff
Fixes the bug (5.56 KB, patch)
2020-03-25 22:42 PDT, Ryosuke Niwa 		no flags
DetailsFormatted DiffDiff
Fixed the test (5.56 KB, patch)
2020-03-26 00:38 PDT, Ryosuke Niwa 		darin: review+
DetailsFormatted DiffDiff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-07-09 12:24:18 PDT
<rdar://problem/52846658>
Ryosuke Niwa
Comment 2 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>
Ryosuke Niwa
Comment 3 2020-03-25 22:41:25 PDT
Created attachment 394579 [details] Fixes the bug
Ryosuke Niwa
Comment 4 2020-03-25 22:42:39 PDT
Created attachment 394580 [details] Fixes the bug
Ryosuke Niwa
Comment 5 2020-03-26 00:38:20 PDT
Created attachment 394583 [details] Fixed the test
Ryosuke Niwa
Comment 6 2020-03-26 12:58:34 PDT
Committed r259065: <https://trac.webkit.org/changeset/259065>
Note You need to log in before you can comment on or make changes to this bug.