search

dotnet / try

Try .NET provides developers and content authors with tools to create interactive experiences.
MIT License
2.9k stars 527 forks source link

Luminosity contrast ratio of keyboard focus indicator on suggestion dropdown fails to meet the required ratio of 3:1: A11y_.NET Online REPL_NET Editor _Code Suggestion_Non Text Contrast. #1201

Closed AnKushSingh05 closed 5 months ago

AnKushSingh05 commented 6 months ago

GitHub Tags

A11yTCS; #A11ySev2; #Chromiumedge; #WCAG1.4.11; #SH_.NET Online REPL_Web_May2024; #DesktopWeb; #TryDotNet; #A11yMAS; #Non Text Contrast; #A11YWCAG2.1;#Win11;#Closed;

Environment Details:

Application Name: .NET Online REPL Chromium edge Version 125.0.2535.51 (Official build) (64-bit)

Repro Steps:

  1. Hit the URL: https://learn.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/tutorials/numbers-in-csharp?tutorial-step=1
  2. .NET Editor page will open.
  3. Tab till .NET editor section and write something in the code editor, few suggestion will appear.
  4. Verify whether the Luminosity contrast ratio of keyboard focus indicator on suggestion dropdown fails to meet the required ratio of 3:1 or not.

Actual Result:

Luminosity contrast ratio of keyboard focus indicator on suggestion dropdown fails to meet the required ratio of 3:1

Expected Result:

Luminosity contrast ratio of keyboard focus indicator on suggestion dropdown should be greater than or equal to required ratio of 3:1.

User Impact:

People with low vision often have difficulty perceiving tab focus that have insufficient contrast if Luminosity contrast ratio of visual focus indicator fails to meet the required ratio of 3:1. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a lightness difference of 3:1 or greater can make these items more distinguishable when the person does not see a full range of colors

Attachment:

Bug_1201_A11y_ NET Online REPL

Yash14j commented 6 months ago

GithubTags:#Rev:yaja;

AbhitejJohn commented 5 months ago

@Yash14j / @AnKushSingh05 : Should this test have actually been run on the PPE environment instead of what you have in the repro steps? /cc: @ocallesp

ocallesp commented 5 months ago

@AnKushSingh05 can you add a screenshot of the suggested fix from 'Color contrast analyzer' showing the html code to modify ?

shindepra commented 5 months ago

@AnKushSingh05 can you add a screenshot of the suggested fix from 'Color contrast analyzer' showing the html code to modify ?

I see the issue is fixed, Hence closing the bug.

Screenshot (2125)