[MGTP-Samples-General-Login to Show agenda]: Keyboard tab focus is moving out of the expanded 'Sign out' flyout without dismissing the expanded menu.

[vagpt]

Test Environment:
OS Build: Windows 11
Version: 22H2 (OS Build 25300.1000)
Browser: Edge dev
Browser Version 114.0.1807.5 (Official build) dev (64-bit)
URL: Components / mgt-agenda / Properties - Preferred Timezone ⋅ Storybook
User ID: V-id

Pre-requisite:

1. Navigate using keyboard only.

Repro Steps:

1. Open the above URL and login with valid credentials.
2. 'Microsoft Graph Toolkit Playground' Overview page will get displayed.
3. Navigate to 'Components' button using tab key and expand it.
4. Navigate to 'Samples' button using tab key and expand it.
5. Navigate to 'General' button using arrow key and expand it.
6. Navigate to 'Login to Show agenda' link using arrow key and activate it.
7. Navigate to 'Megan Bowen' button using tab key and activate it.
8. 'Sign out' flyout appears.
9. Navigate using tab key on the flyout.
10. Observe the issue.

Actual Result:
Tab focus moves out of the expanded 'Sign out' flyout without closing the expanded menu.

Expected result:
Either the tab focus of keyboard should not move out of the expanded 'Sign out' flyout, or the menu should collapse immediately when focus moves out of the expanded menu.

User Impact:
Keyboard users will face difficulty if focus moves out without closing the expanded pop-up. This will confuse them in navigation and hamper their task.

WCAG Reference link:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html

Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com)"

MAS2.4.3-.Tab.focus.moves.out.of.the.expanded.Sign.out.flyout.without.closing.the.expanded.menu.mp4

[ghost]

Hello vagpt, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[gavinbarron]

Need to make the flyout a focus trap

[gavinbarron]

@vagpt this issue got closed yesterday as we completed a fix and I totally forgot to have you verify the fix, sorry about that.

The flyout now acts as a focus trap and users need to press the escape key to close the flyout, you can test it here: https://mgt.dev/?path=/story/components-mgt-login--multiple-accounts

Please feel free to re-open this if we need to do more to get this fully correct.

Thank you!

[vagpt]

Hi @gavinbarron,

This issue is working fine on the URL provided by you hence, adding A11yTTValidated tag.