[Accessibility] [Microsoft Graph Toolkit Playground - Sample - General - Login To Show Agenda]: Keyboard focus is not visible on 'Sign in' button.[Sev3][WCAG2.4.7]

[SrujanaAnaganti]

Test Environment: OS Build: Windows 11 Version: 21H2 (OS Build 22000.318) Browser: Edge Version 96.0.1054.43 (Official build) (64-bit) URL: https://mgt.dev/next Screen reader: Narrator Tool: Accessibility insights for web

Repro Steps: Open the above URL and login with valid credentials. 'Microsoft Graph Toolkit Playground' home page will get displayed. Navigate to 'Sample > General > Login To Show Agenda' menu item and activate it. Now navigate to 'Megan Bowen' button, activate it and activate 'Sign out' button. Now again navigate to 'Sign In' button and verify the issue that keyboard focus is not visible on button.

Actual: Keyboard focus is not visible on 'Sign In' button in Sample - General - Login To Show Agenda menu item. But when user activates, The Sign In button is getting activated.

Expected: Keyboard focus is should be visible properly on 'Sign In' button in Sample - General - Login To Show Agenda menu item.

User Impact: Keyboard only users need to know which element has focus so they can track their navigation through and interaction with interactive controls. Note that non-interactive content will not get keyboard focus and cannot be navigated to with the keyboard alone.

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

https://user-images.githubusercontent.com/85154417/154943369-c4d32aaa-d264-415b-bc44-598bf71ab190.mp4

[ghost]

Hello SrujanaAnaganti, 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 🙌

[Mnickii]

Hi @Laxmidurga, I have a fix for this in the PR here

[Laxmidurga]

Hi @Mnickii, As verified issue does not repro in the below URL as keyboard focus is properly visible on 'Sign in' button. Hence, closing. URL: https://mgt.dev/next/pr/1855/?path=/story/samples-general--login-to-show-agenda PFA Screenshot: