{Linked:Bug209103,LinkedBug;Freeway-Bug}[MGTP-Left navigation]: Luminosity contrast ratio of keyboard focus indicator on 'Left navigation' controls is 2.604:1 which is less than 3:1

[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: Samples / General - Localization ⋅ Storybook (mgt.dev) User ID: V-id Tool: Accessibility Insights for Windows

Repro Steps:

1. Open the above URL and login with valid credentials.
2. 'Microsoft Graph Toolkit Playground' Overview page will get displayed.
3. Navigate to the 'Left rail navigation' region using tab key.
4. Navigate on the controls using tab key.
5. Run AI tool and observe the issue.

Actual Result: The color contrast ratio of the keyboard focus indicator for the 'Left navigation' controls is 1.252:1 which is less than 3:1

Expected Result: The color contrast ratio of the keyboard focus indicator on the 'Left navigation controls' should be greater than or equal to 3:1.

Note: Same issue is repro on Components / mgt-agenda / Properties - Preferred Timezone ⋅ Storybook

User Experience: Low vision and keyboard users would face difficulty seeing the keyboard focus on the control if the color contrast ratio of the keyboard focus is less than 3:1.

WCAG Reference Link:
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

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

[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]

@vagpt / @KarunaNarang if there was a focus ring on this element that had the required contrast would that be an acceptable fix?

[gavinbarron]

Blocked as related to focus tracking in left hand explorer pane which is currently identified as a Storybook issue

[gavinbarron]

Closing as A11yExternal, this is an issue with Storybook

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

[vagpt]

Hi @gavinbarron,

Now this bug is tracking using the below URL;

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

[Bhaskar301101]

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

[vagpt]

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.

Snippet:

[gavinbarron]

This issue requires building the storybook website with a node script, the reproduction is available on my personal github repo here: https://github.com/gavinbarron/storybook-a11y-repro