[Accessibility] [Microsoft Graph Toolkit Playground - Overview]: Keyboard focus is not visible properly on 'Copy' buttons.[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 'Overview' tab and activate it. Now navigate to 'Copy' button in the page and verify the issue that keyboard focus is not visible properly on 'Copy' button.

Actual: Keyboard focus is not visible properly on 'Copy' button in 'Overview' page. Keyboard focus is visible on one side only when the button gets focus.

Expected: Keyboard focus should be visible properly on 'Copy' button in 'Overview' page. Focus should be visible on 4 sides of 'Copy' button.

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.

Note:

1. Same issue is repro for 'Canvas' tab. Refer : WCAG2.4.7_Canvas.

2. Keyboard focus not visible properly on 'People-person' buttons in Samples > General > Login to Show Agenda. This issue repro for all similar kind of controls through out the URL. WCAG2.4.7_Button_People-person

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

https://user-images.githubusercontent.com/85154417/154938854-96ec2342-1cd8-4ca8-b56d-5cf5a2b046d5.mp4

https://user-images.githubusercontent.com/85154417/154941527-feeadb3e-47b0-4970-b559-19fd5d5f70a4.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 visible properly on controls. Hence, closing. URL: https://mgt.dev/next/pr/1855/?path=/story/samples-general--login-to-show-agenda