A11y_AzureToolsforVSCode_AzureFunction_Selectalocationfornewresources_Non-TextContrast: The color contrast ratio of the focus indicator on "Back" button with respect to background is less than 3:1.

[12-shweta]

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

GitHubTags:#A11yMAS;#A11yTCS;BM_AzureToolsforVSCode_Win32_Aug2021;#Azure Tools for VS Code;#A11yWCAG2.1;#A11ySev2;#WCAG1.4.11;#DesktopApp;#Win10;#ColorContrast;#Linked:Bug152047;

Environment Details:

Visual Studio Code Azure Function Operating System: Windows 10 Pro 21H1

Steps to Reproduce:

1. Launch the Visual studio code.
2. TAB to on "Extension" button and search for "Azure Functions" and select it using ENTER key.
3. "Azure Function" screen should open. TAB to "Install" button and hit ENTER key to install it.
4. "Azure" button will appear in navigation pane. TAB to it and select it.
5. TAB to any Subscription and expand options using Shift+F10 then TAB to "Create Function App in Azure" control and select it.
6. Edit some name for new function and hit ENTER key, then select "Powershell 7.0" as a "Runtime stack" and hit ENTER key.
7. "Select a location for new resources" edit control will appear.
8. TAB to "Back" button.
9. Open AI4D color contrast analyzer and check the color contrast ratio of the focus indicator on "Back" button with respect to background

Actual:

The color contrast ratio of the focus indicator on "Back" button with respect to background is 2.663:1 which is less than 3:1.

Expected:

The color contrast ratio of the focus indicator on "Back" button with respect to background should be greater than or equal to 3:1.

User Impact:

The low vision users won't be able to see the focus on the "Back" button properly.

[ejizba]

This is an issue on VS Code: https://github.com/Microsoft/vscode

It can be reproduced with the quickinput-sample extension here: https://github.com/microsoft/vscode-extension-samples/tree/main/quickinput-sample

Repro steps:

1. F5 the sample extension
2. Run "Quick Input Samples" from the command palette
3. Pick "multiStepInput"
4. Pick any option:
5. The next step will have a back button that demonstrates the original issue:

[12-shweta]

@ejizba We have downloaded the "QuickInput sample" extension but in command pallet we are not getting "Quick Input Samples" to run the command

[jinglouMSFT]

@12-shweta you need to download the "Quickinput sample" extension, then you need to open the folder where you have the sample source code in VS Code and open the "Terminal" window, change to the sample directory, run "npm install" to install the dependencies. You can also do this in a powershell command window. Once the dependencies are installed, in VS Code, run F5. This will bring up a debug session of VS Code instance. In THIS instance of VS Code, F1 to bring up the command palette, select "Quick input sample", then follow with Eric's step 3 above to reproduce the problem.

Here is a screenshot I just took from my test run:

Here are the results from CCA:

Once you have been able to reproduce the problem, please use Eric's steps above to open a bug in VS Code. Also, please make sure you specify which themes this problem exists. Not all themes in VS Code have this issue. I have only tried with Dark (Visual Studio) which has this issue, but Solarized Dark doesn't have this issue. So please make sure you provide the details to VS Code. Thanks.

[12-shweta]

@jinglouMSFT Thank you for detailed steps. Please find the external bug for VS code: https://github.com/microsoft/vscode/issues/152047

[jinglouMSFT]

@12-shweta Since this is a VS Code bug, can you make this a tracking bug on our side? There is no action on our side but it's showing up in my S360 report every week as an out of SLA item.

[12-shweta]

@jinglouMSFT We can not close this bug as the external or tracking bug still in open state as per our Bug Regression process.

[MicroFish91]

Upstream issue being tracked against has been closed, can you please reconfirm to see if we can have this issue closed as well @12-shweta. Thank you!

[12-shweta]

Verified issue in VS and issue is fixed

[Rama8345]

Github Tags:#Closed;

[InduPriya1805]

GitHubTags:#BM_AzureToolsforVSCode_Win32_Aug2021;