A11y_.NET Online REPL_Learn_Enter focus mode_NonTextContrast: Color contrast of focus on suggestion and its background is less than 3:1.

[poojapatil36]

“Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.”

GitHubTags:

#A11yMAS; #A11yTCS; #A11ySev2; #.NET Online REPL; #BM-.NET Online REPL-Web-NOV2022; #DesktopWeb; #WCAG1.4.11; #FTP; #Win11; #Non-Text Contrast; #A11yWCAG2.1;

Environment Details:

Application Name: .NET Online REPL
Windows Version: Windows 11
Chromium Edge: Version 108.0.1462.10 (Official build) dev (64-bit)

Repro Steps:

1. Launch the url: https://learn.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/tutorials/hello-world?tutorial-step=1&WT.mc_id=-blog-scottha.
2. Tab to "Enter focus mode" button and hit ENTER key.
3. TAB to .NET editor and type "int".
4. List of suggestion will appear.
5. Observe that Color contrast of focus on suggestion and its background is less than 3:1.

Actual:

Color contrast of focus on suggestion and its background is 1.014:1 which is less than 3:1.

NOTE: Similar issue is observed on dot.net screen

Expected Result:

Color contrast of focus on suggestion and its background should be more than or equal to 3:1.

Attachment:

[AbhitejJohn]

@colombod , @jonsequitur : Would you know if this is something we control? Can we fix the current UI?
Context: This seems to be showing up in compliance passes.

[jonsequitur]

This is set by the Monaco editor. Styles can be overridden by the hosting page using the Try .NET APIs, so the issue should be filed with Learn, not with Try .NET.

[poojapatil36]

@jonsequitur
This bug is logged for learn url only, and in note section I mentioned that it is reproducing on dot.net screen also

[AbhitejJohn]

This is a dupe of #912 for which I've filed MicrosoftDocs/feedback#3901 an issue in Docs.

[fsteffi]

GithubTags:#Closed;

as duplicate of #912