[MGTP-teams-channel-picker]: Keyboard focus is getting stuck on ‘Select a channel’ combo edit box using Tab navigation.

[Raisul123]

Test Environment: OS Build: Windows 11  Version: 24H2 (OS Build 26058.1400)  Browser: Edge dev  Browser Version 123.0.2400.1 (Official build) dev (64-bit) URL: Overview - Docs ⋅ Storybook (mgt.dev)

Repro Steps:

1. Open the above URL.
2. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
3. Navigate to the ‘MGTP- teams-channel-picker’ and activate it.
4. Navigate to the ‘Docs’ and activate it.
5. Navigate to the ‘Select a channel’ combo edit box using Tab key.
6. Observe the issue.

Actual Result: Keyboard focus is getting stuck on ‘Select a channel’ combo edit box using Tab navigation.

Expected Result: Keyboard focus should not get stuck on ‘Select a channel’ combo edit box using Tab navigation. Keyboard focus should move on ‘Show code’ button after ‘Select a channel’ combo edit box using Tab navigation.

User Impact: Keyboard dependent user will have difficulty in navigating, when focus order does not follow the visible reading order, the experience can create a different interaction pattern, and/or unintended content relationships for assistive technology users. On rare occasions, there is a logical reason the focus order is different from the reading order, but the meaning of the content and interactions must remain the same.

WCAG Reference: Understanding Success Criterion 2.4.3: Focus Order | WAI | W3C “ Have feedback on bugs logged, please tag bug as “A11yRCA“ and a

“ Have feedback on bugs logged, please tag bug as “A11yRCA“ and add your feedback in the comment section. “

Attachments:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/23114460/bf4b1cb4-d161-45d3-9c47-7f8c671c57da