[Accessibility] [Microsoft Graph Toolkit Playground - mgt-agenda]: Keyboard focus is going to background page while navigating in user profile card.[Sev2][WCAG2.4.3]

[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' Overview page will get displayed. Now navigate to 'Components' drop down and activate it. Activate 'Simple' tab in mgt-agenda' and navigate to person profile card button, activate it. People profile card gets displayed. Now navigate through the profile card using 'TAB' key and verify the issue that keyboard focus is visible on background page controls.

Actual Result: When user navigates in People profile card, focus is going to background page controls.

Expected Result: Keyboard focus should not go to background page controls when user navigates in People profile card. Focus should be available in People profile card only.

User Impact: Keyboard dependent users will face difficulty if the focus order is not correct or focus goes to background elements while navigating in a profile card then end users will get confused and have to gone through extra navigation focus is actually on which control and this may lead to disorientation due to this issue.

Note: Same issue is observed through out the URL.

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

https://user-images.githubusercontent.com/85154417/154228706-0590718c-dfe5-47a4-9971-4da4be3d209a.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 🙌

[sebastienlevert]

@Laxmidurga we are currently looking at giving the user the opportunity to close the profile card by pressing "Esc". Would this work for this scenario?

[Laxmidurga]

Hi @sebastienlevert as checked, we can close the profile card by pressing the 'ESC' key now also. But the focus should not move outside of the card unless the user wants to close the profile card. Here we have two options for this requirement:

1. On pressing the 'Tab' key when the focus is on the last interactive control, the focus should again move to first interactive control in the profile card.
2. On pressing 'Tab' key when the focus is on the last interactive control, the profile card should get closed, and focus lands on next interactive control in background page.

Please let me know if my understanding is wrong or you have any queries.

[sebastienlevert]

Thanks for the feedback! Pinging @musale. I believe option #1 would be the preferred approach when using the card in a hover / click scenario. For a card used directly on a canvas (without a person component) we should simply move to the next component.

[musale]

Hi @sebastienlevert as checked, we can close the profile card by pressing the 'ESC' key now also. But the focus should not move outside of the card unless the user wants to close the profile card. Here we have two options for this requirement:

1. On pressing the 'Tab' key when the focus is on the last interactive control, the focus should again move to first interactive control in the profile card.
2. On pressing 'Tab' key when the focus is on the last interactive control, the profile card should get closed, and focus lands on next interactive control in background page.

Please let me know if my understanding is wrong or you have any queries.

I tried all these strategies and ended up facing more challenges with how web components work and the way we have designed MGT components.

The main challenge with option 1 was getting which control is last in nested shadow DOMs. That proved a little challenging and informed me to be keener on how we coompose and re-use components.

On option 2, we already have the Esc key cancelling a card that is shown by either hovering or clicking. There wasn't much to do to get a work around. I used @sebastienlevert suggestion for an attribute and came up with a different solution.

The final solution I have implemented adds an "invincible" div at the bottom of the card. This is configurable through a lock-tab-navigation attribute. The div has aria-text that announces "End of the card" when tabbing through with narrator. Then re-focuses to the top of the card.

@Laxmidurga you can test the solution here and let me know of any issues.

[sebastienlevert]

@vogtn I reopened to let the Accessibility team close it! Thanks!

[Laxmidurga]

Hi @sebastienlevert, @musale, @vogtn as verified, issue does not repro in the below URL as keyboard focus is not going to background controls unless user closes the profile pane. Hence, closing. URL: https://mgt.dev/next/?path=/story/components-mgt-agenda--simple