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

{Freeway-Bug}[MGTP-Left Navigation-Custom Properties]: The Luminosity Contrast Ratio of 'Wednesday, May 3, 2023’ text under ‘Custom Properties’ page is '3.948:1' which is less than 4.5:1. #2238

Closed vagpt closed 1 year ago

vagpt commented 1 year ago

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 / Style - Custom Properties ⋅ Storybook User ID: V-id  Tool: Accessibility Insight for web   Repro Steps: 

  1. Open the above URL and login with valid credentials.
  2. The ‘Microsoft Graph Toolkit Playground' Overview page will be displayed. 
  3. Navigate to the 'Left rail navigation' region using tab key.
  4. Navigate to 'Custom Properties’ control and select it.
  5. The ‘Custom Properties’ page will open.
  6. Check luminosity ration with AI tool and observe the issue.

Actual Result: The Luminosity Contrast Ratio of 'Wednesday, May 3, 2023’ text under ‘Custom Properties’ page is '3.948:1' which is less than 4.5:1.

Expected result: The luminosity contrast ratio of 'Wednesday, May 3, 2023’ text under ‘Custom Properties’ page should be greater than or equal to 4.5:1.

Note:

  1. Same issue is repro for ‘Thursday, May 4, 2023’, ‘Friday, May 5, 2023’ and ‘Saturday, May 6, 2023’ text in this page.
  2. Same issue is repro when dark mode toggle button is on.

User Experience: Low vision users would face difficulty in seeing the text if the color contrast ratio of the control is less than 4.5:1.

WCAG reference link: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

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

WCAG1 4 3_CCA of highighted text under custom properties is less than 4 5 1 WCAG1 4 3-The Luminosity Contrast Ratio of 'Wednesday, May 3, 2023’ text under ‘Custom Properties’ page is less than 4 5 1
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

@sebastienlevert we should turn off the theme toggle for this, when dev are overriding css props to apply styling then all bets are off for the contrast ratios

musale commented 1 year ago

@vagpt this is a late call fixed in #2326 that is already merged. You can test on https://mgt.dev/next/v3. We removed the theme toggle in customized pages.

gavinbarron commented 1 year ago

@vagpt and @KarunaNarang we will be closing this on June 15th unless we receive feedback that the fix provided is not acceptable

vagpt commented 1 year ago

Hi @gavinbarron,

Please see the attached comment in #2326, as issue is still repro.

musale commented 1 year ago

@vagpt I have made a separate fix for this here https://github.com/microsoftgraph/microsoft-graph-toolkit/pull/2436

vagpt commented 1 year ago

Hi @musale , @gavinbarron,

Please see my comment in PR #2436

vagpt commented 1 year ago

Hi @gavinbarron,

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

Test Environment: URL: https://mgt.dev/next/pr/2436/?path=/story/components-mgt-agenda-style--custom-css-properties OS Version: 23H2 (OS Build 25387.1200) Browser Version: 116.0.1923.0 (Official build) dev (64-bit) Tool: Accessibility Insight For Window

Snippet:

image