Can't focus on normally focusable elements when pressing the tab key on the keyboard

[tdwhite0]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

latest Chrome and Edge

Describe the bug / error

Elements added to a SharePoint page that are inside Shadow Roots are unable to be focused on with the tab key. Tabbing through the page will completely skip over these elements. I have created a simple reproduction showing the most simple case. Our real world usage is using Stencil Web Components, which all have this issue when using Shadow DOM.

Steps to reproduce

1. Create a basic WebPart and use Shadow Root to add normally focusable inputs and buttons like in this reproduction I have made here: https://github.com/tdwhite0/sp-shadowdomissue-repro
2. Observe that the tab key skips over them when going through the page.

Expected behavior

Elements should be focusable with the tab key.

From digging through what SharePoint is doing, I can see that there is an Accessibility manager component that tries to determine the next focusable element. This code does not take into account elements that are in Shadow Roots.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[marnocha]

Any updates on this issue? I have a couple customers that this is impacting and accessibility should be a priority from an issue standpoint.

[gavinbarron]

This is also impacting customers using Microsoft Graph Toolkit. We have a report from a customer on our repo that we have verified and tested as only being an issue when used in the context of webparts in a SharePoint page https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/1909

[tdwhite0]

For more information, if you search the SharePoint OOB javascript for "_queryFocusableSelector" you can find the method that searches the DOM for focusable elements.

This querySelector does not return elements in Shadow DOM so therefore elements inside will never be returned.

[marnocha]

@AJIXuMuK - Any updates on this issue?

[USCloud-EricWilborn]

@VesaJuvonen @AJIXuMuK - What is the progress of this issue being addressed? Any status updates at all would be appreciated.

[AJIXuMuK]

@USCloud-EricWilborn - we have this issue in the internal backlog of the responsible team. Unfortunately, there is no ETA.

[marnocha]

@VesaJuvonen @AJIXuMuK any further updates on this?

[marnocha]

@VesaJuvonen @AJIXuMuK any further updates on this?

[tumbleweed05]

Maybe Q2 2024, perhaps later for a fix.

[marnocha]

Hi @tumbleweed05 - as we are in Q2 2024, any updates on timing for a fix or solution? Appreciate any updates you can provide.