{Freeway-Bug}[MGTP-Content Info links]: 'Privacy & cookies', 'Terms of user' links under 'Microsoft Graph toolkit playground' page is not accessible using Keyboard.

[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-requisites:

1. Navigate using keyboard only.

Repro Steps:

1. Open the above URL and login with valid credentials.
2. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
3. Try to navigate on the 'Privacy & cookies', 'Terms of user' content info links using tab key, arrow keys.
4. Observe the issue.

Actual Result:
Keyboard users is not able to access 'Privacy & cookies', 'Terms of user' links under 'Microsoft Graph toolkit playground' page using Tab key/arrow key.

Observation:
The 'links' are activated when the user selects using mouse.

Expected result:
''Privacy & cookies', 'Terms of user' links under 'Microsoft Graph toolkit playground' page should be accessible with keyboard.

User experience:
It will be difficult for the keyboard users to access the links and to perform functionality if the controls are not accessible with keyboard navigation. Hence, they are blocked from performing action.

WCAG Reference link:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html

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

Uploading WCAG2.1.1-Keyboard users not able to access 'Privacy & cookies', 'Terms of user' links under 'Microsoft Graph toolkit playground' page using Tab keyarrow key..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]

This is an interesting one. Because of the DOM order of the footer these would create a strange tabbing order when they become accessible with the keyboard.

I wonder if we can inject it between the sidebar and the story area so that tab ordering is down the sidebar across the footer and back to the top of the story area.

We can't have it at the end of the DOM (after the editor pane) as the editor pane traps focus can't be tabbed out of....

[gavinbarron]

@sebastienlevert I'd love your thoughts on this one, it's a structural issue with our page along with someone making these links non-tabbable

[sebastienlevert]

Now that we have a "homepage" for the Playground... Maybe we could drop this content over there?

[vagpt]

This issue is working fine on the environment below, hence closing this issue.

Test Environment:
URL: https://mgt.dev/next/v3/?path=/story/overview--page
OS Version: 23H2(Os Build 25375.1)
Browser Version: Version 115.0.1880.3 (Official build) dev (64-bit)

Attachment:

Privacy.and.Cookies.and.Terms.of.User.links.are.accessible.now.mp4