[MGTP-Person - HTML- Person vertical]: Keyboard focus does not land on first element of profile card after activating "User Profile Image" controls.

[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-Person’ and activate it.
4. Navigate to the ‘HTML’ and activate it.
5. Navigate to the ‘Person vertical’ and activate it.
6. Navigate to the "User Profile Image" controls using tab key and activate it.
7. Observe the issue.

Actual Result: Keyboard focus does not land on first element of profile card after activating "User Profile Image" controls. Also keyboard focus is getting lost while closing profile card using esc key.

Expected Result: Keyboard focus should land on first element of profile card after activating "User Profile Image" controls. Also keyboard focus should not lost while closing profile card using esc key.

Note: Issue repro throughout application

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 add your feedback in the comment section. “

Attachments:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/23114460/5425f985-8e6f-44e3-864e-a3d81d501158