Bug 258807

Summary: Fragment URL targeting custom element with ID would skip over focusable elements inside shadowDOM
Product: WebKit Reporter: Tanel Terras <tanel.terras>
Component: AccessibilityAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: akeerthi, andresg_22, rniwa, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 13   
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
Chrome (Stable)
none
Safari 17 none

Tanel Terras
Reported 2023-07-03 06:43:41 PDT
When activating fragment URL that points to custom element with shadowDOM the sequential focus navigation starting point (https://html.spec.whatwg.org/multipage/browsing-the-web.html#scrolling-to-a-fragment:sequential-focus-navigation-starting-point) is set so that any focusable elements in custom element will be ignored. Everything seems to be by the spec when testing out simpler use-cases: https://codepen.io/hidde/pen/QvKGqa I created a more complex example that reproduces the bug: https://studio.webcomponents.dev/view/oH04HRauNorw5KhLGJH7 Although my target (#content) is custom element it should (to my understanding) not skip over the focusable elements inside custom elements shadowDOM. Latest chrome and firefox would not skip over the focusable elements inside shadowDOM.
Attachments
Chrome (Stable) (25.84 KB, image/png)
2023-10-16 07:30 PDT, Tanel Terras 		no flags
Details
Safari 17 (28.00 KB, image/png)
2023-10-16 07:31 PDT, Tanel Terras 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-07-03 06:43:50 PDT
<rdar://problem/111684394>
Ryosuke Niwa
Comment 2 2023-07-03 15:18:26 PDT
I'm having a trouble understanding what the reported bug is. What are exact steps to follow & what you're expecting to see vs. what you see instead?
Tanel Terras
Comment 3 2023-07-03 23:28:20 PDT
Sorry for not explaining the steps to reproduce. Please follow the steps in this example: https://studio.webcomponents.dev/view/oH04HRauNorw5KhLGJH7 1. Click on the link "Content 2" 2. Press Tab to see keyboard focus 3. Focus shifts straight to green button that is inside #content-3 , skipping two green buttons inside #content-2 I would expect that after step 2 I would see the focus on the first green button inside #content-2. I refer to #content-2 and #content-3 as custom elements (regular-content) with their own shadow DOM. Following these steps in chrome/firefox would work as expected - focus in step 2 would shift to first green button inside the #content-2.
Ryosuke Niwa
Comment 4 2023-07-14 18:52:00 PDT
(In reply to Tanel Terras from comment #3) > Sorry for not explaining the steps to reproduce. > > Please follow the steps in this example: > https://studio.webcomponents.dev/view/oH04HRauNorw5KhLGJH7 > > 1. Click on the link "Content 2" > 2. Press Tab to see keyboard focus > 3. Focus shifts straight to green button that is inside #content-3 , > skipping two green buttons inside #content-2 > > I would expect that after step 2 I would see the focus on the first green > button inside #content-2. > > I refer to #content-2 and #content-3 as custom elements (regular-content) > with their own shadow DOM. > > Following these steps in chrome/firefox would work as expected - focus in > step 2 would shift to first green button inside the #content-2. Hm... as far as I've checked, Firfox and Safari behave the same and both moves the focus to the button inside #content-3. If wanted the behavior you're desiring, then yo should probably be setting "delegatesFocus" to true when creating the shadow root.
Tanel Terras
Comment 5 2023-10-16 07:30:41 PDT
Created attachment 468230 [details] Chrome (Stable)
Tanel Terras
Comment 6 2023-10-16 07:31:03 PDT
Created attachment 468231 [details] Safari 17
Tanel Terras
Comment 7 2023-10-16 07:36:18 PDT
Sorry for the very delayed response. I have updated my example with delegatesFocus: true. It seems that this has no relation with the specific bug. I have attached the difference in browser implementations that can be observed when following the steps: 1. updated example: https://studio.webcomponents.dev/view/oH04HRauNorw5KhLGJH7?branch=delegatesFocus%40a7ImxJuv82MsKw89cF9BjqxK6XP2 2. Click on the link "Content 2" 3. Press Tab to see keyboard focus Safari seems to ignore the focusable elements inside my custom element shadowDOM when setting/updating the focus navigation starting point.
Note You need to log in before you can comment on or make changes to this bug.