A11y_.NET Core_ASP.NETCore_AngularForgotPassword_NonTextContrast: The Color contrast ratio of the focus indicator of the "Reset Password" button is less than 3:1.
Truptik12 opened this issue · comments
“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;#DesktopWeb;#Win11;#ColorContrast;#Benchmark;
Environment Details:
.NET Core
ASP.NET Core
Operating System: Windows 11 Enterprise 21H2
Chrome: Version 102.0.5005.115 (Official Build) (64-bit)
Steps to Reproduce:
- Open command prompt.
- Create a folder using command "mkdir foldername" e.g. "mkdir Angular"
- Move to the created directory using command "cd foldername"
- Run the following command "dotnet new angular -au Individual" and hit enter.
- Run the following command "dotnet run"
- Copy the First URL link from Command prompt and copy it
- Paste it in URL section of Browser and hit Search
- Browser page will open with above template loaded
- Hit enter on login link
- Tab and navigate to "forgot your password?" link and press enter.
- Turn on Color contrast analyzer and check that The Color contrast ratio of "Reset Password" is less than 3:1.
Actual:
The Color contrast ratio of the focus indicator of the "Reset Password" button is less than 3:1.
This issue is observed throughout the application for all the "Reset Password" buttons.
Expected:
The Color contrast ratio of the focus indicator of the "Reset Password" button should be more than or equal to 3:1.
User Impact:
Low vision users wont be able to see the focus indicator.
@merriemcgaw are we able to resolve this contrast issue as external (bootstrap defaults) since the focus color here is the default in bootstrap, and we are trying to generally use the standard look and feel of bootstrap in identity UI?
@HaoK Is there a way to change it on our own? If there is, I'd highly recommend it, along with filing an issue with bootstrap that their focus indicator is not accessible. We're required to be accessible if it is at all possible. If there's no way to fix it on our end, we can work together to mark this as external and try to get an exception, though I'm doubtful we'd get one for focus indicators.
Okay I think we hardcoded some colors before, so I guess I can just pick a new color for focus that satisfies the ratio
Can you attach a new screenshot? I thought we updated thing sto have a solid black border, i.e. https://user-images.githubusercontent.com/6537861/180089982-c1c7b8b3-262f-4bb3-b174-c2eb26318890.png
@Truptik12 did you install the latest SDK in your testing from here: https://dotnet.microsoft.com/en-us/download/dotnet/7.0
@HaoK was the update in Preview 6 for sure? Or do we need to wait for Preview 7?
Ah right, this is fixed in aspnetcore-main which would be rc1 I think
Should be available in the https://github.com/dotnet/installer nightlies for main
Verified the bug after installing the https://github.com/dotnet/installer , the bug still reproduces.
@Truptik12 can you confirm the version you are running for me by including the contents of your csproj for app?
Okay I think I see the issue, reassigning back to myself
Should be fixed by dotnet/spa-templates#73
@Truptik12 can you please validate this with the latest .NET Preview 7 SDK?
I think the fixes for these are only in main/rc1
@Truptik12 that means you will need to download the latest RC1 build from the first column of this table. That should give you the updated templates for all the recent fixes.
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.
Okay the fix might not have made it to the installers yet for the angular/react templates:
They went in on via a dependency update #43289 4 days ago.
I see the changes in the blazorserver site.css, but you might not be able to verify those until #43375 makes it up to the installers since that bug blocks things.
@HaoK can you verify that #43375 has made it to the installers at this point (I think it should have) so that @Truptik12 can validate?
We have installed latest build dotnet-sdk-7.0.100-rc.2.22452.3-win-x64 but getting a below error.
Thanks @Truptik12. @HaoK can we find out when this fix is going to make it to installers/SDK for RC2? We are cutting it very close.
@Truptik12 - the updated machine setup instructions are as follows:
- On a clean machine install .NET RC2 SDK from the Top, Middle cell in the Installer Table
- 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
- Follow the test repro steps from here.
Verified the bug in the above environment. The bug does not repro. Hence closing the bug. Please find the screenshot attached.
Issue is fixed. Adding #Closed; tag.