search

microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
944 stars 303 forks source link

{Linked:Bug209107, LinkedBug; Freeway-Bug}[MGTP-Left Navigation-Custom Properties]: Keyboard Focus indicator is not visible on selected link (like-Custom Properties) under MGTP’ page. #2237

Closed vagpt closed 1 year ago

vagpt commented 1 year ago

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

Repro Steps:

  1. Open the above URL and login with valid credentials.
  2. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
  3. Navigate the 'Custom Properties’ link and select it.
  4. Renavigate to ‘Custom Properties’ link using arrow key.
  5. Observe the issue.

Actual Result: Keyboard focus indicator is not visible over the selected link (like-Custom Properties) under MGTP’ page.

Observation: Keyboard focus indicator is properly visible for the non-selected controls.

Expected Result: Keyboard focus indicators should be visible over the link (like-Custom Properties) under MGTP’ page.

User Experience: Keyboard users will be impacted to track their navigation when keyboard focus indicator is not visible over the selected control.

WCAG reference link: Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0 (w3.org)

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

https://user-images.githubusercontent.com/95913748/236492679-55cc2829-5a61-442f-9e44-8f3a12d4c320.mp4

MAS2 4 7-Keyboard Focus indicator is not visible on selected link (like-Custom Properties) under MGTP’ page
ghost commented 1 year ago

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 commented 1 year ago

Marked as blocked as this is an issue with Storybook itself

gavinbarron commented 1 year ago

Closing as A11yExternal as this is an issue with Storybook.

Reproduction available here: https://github.com/gavinbarron/storybook-a11y-repro

vagpt commented 1 year ago

Hi @gavinbarron,

Now this issue can be tracked using below URL.

https://dev.azure.com/CSS-IRT/CSS%20IRT/_workitems/edit/209107

Bhaskar301101 commented 1 year ago

@gavinbarron Could you please provide us the codepen of this bug, Storybook team need codepen to check the issue.

vagpt commented 1 year ago

Hi @gavinbarron and @sebastienlevert,

Hope you are doing great.

I need your help regarding this bug. We have got a comment from the external team, and they are asking for codepen. so kindly refer to the below snippet for the reference and help us on the same.

gavinbarron commented 1 year ago

This issue cannot be shared in a Codepen. It requires building the storybook site using nodejs. The reproduction is available on my personal GitHub repo: https://github.com/gavinbarron/storybook-a11y-repro