A11y_.NET Core_ASP.NETCore_BlazorServerManageurAccntProfile_NonTextContrast: The color contrast ratio of the focus indicator of the "Save" button is less than 3:1.

[Truptik12]

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

GitHubTags:#A11yMAS;#A11yWCAG2.1;#A11yTCS;#.NET Core[aspnetcore]-Win32-June2022;#.NET Core;#A11ySev2;#WCAG1.4.11;#DesktopApp;#Win11;#ColorContrast;#Benchmark;

Environment Details:

.NET Core
ASP.NET Core
Operating System: Windows 11 Enterprise 21H2

Steps to Reproduce:

1. Open command prompt
2. Create a folder using command "mkdir foldername" e.g. "mkdir BlazorServer"
3. Move to the created directory using command "cd foldername"
4. Run the following command "dotnet new blazorserver -au Individual" and hit enter.
5. Run the following command "dotnet run"
6. Copy the First URL link from Command prompt and copy it
7. Paste it in URL section of Browser and hit Search
8. Browser page will open with above template loaded
9. To get access to all the pages you'll need to register first and then log-in.
10. Login with your registered account
11. Tab till "Hello with the userid" and click on it.
12. Navigate to profile and click on it
13. Turn on Color contrast analyzer and check that The Color contrast ratio of "Save" is less than 3:1.

Actual:

The Color contrast ratio of the focus indicator of the "Save" button is less than 3:1.

Expected:

The Color contrast ratio of the focus indicator of the "Save" button should be more than or equal to 3:1.

User Impact:

Low vision users won't be able to see the focus indicator.

[HaoK]

Should be fixed by #43177

[Truptik12]

@HaoK

We downloaded the latest RC1 build from the first column of the above table and verified the bug, and the bug still reproduces.
Please find the attachment of the version.

Could you please provide the repro steps that you followed, if the issue is not reproducing at your end.

[merriemcgaw]

Ping @HaoK, can you check out what the problem might be? This is an RC2 build and it seems to still repro.

[HaoK]

Well I'm a little confused because this bug is talking about blazor server, not angular which is what the attachment is showing with the command prompt.

I see the fix in the site.css for a build I installed from last week (7.0.100-rc.2.22417.1 [C:\Program Files\dotnet\sdk]):

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

[HaoK]

That said there is a blocking bug preventing actually hitting the forgot password page in these builds, so its likely whatever build the testers are using is not actually the correct one, but the fix is now in the css

[Truptik12]

We have installed latest build dotnet-sdk-7.0.100-rc.2.22452.3-win-x64 but getting a below error.

[merriemcgaw]

@Truptik12 - the updated machine setup instructions are as follows:

1. On a clean machine install .NET RC2 SDK from the Top, Middle cell in the Installer Table
2. Open a command prompt and enter the following command: dotnet nuget add source -n dotnet7 https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet7/nuget/v3/index.json
3. Follow the test repro steps from here.

[Truptik12]

Verified the bug in the above environment. The bug does not repro. Hence closing the bug. Please find the screenshot attached.

[mkArtakMSFT]

Issue is fixed. Adding #Closed; tag.