A11y_AzureExtensionsforVSCode_AzureFuction_CreateNewProject__ColorContrast : The color contrast ratio of keyboard focus on several controls such as "Python", "JavaScript", etc. is less than 3:1.

[MayuriNaik]

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

GitHub Tags:#E2E-AzureExtensionsForVSCode-Mac-Aug2020;#A11y_Azure Extensions for VS Code;#Azure Tools for VS Code;#A11yTCS;#A11yWCAG2.1;#MAC;#FTP;#Benchmark;#ColorContrast;#A11ySev2:#WCAG1.4.11;

Environment Details:

Application Name: Azure Extensions for VS Code
Application Version: 1.48.0-insider
Commit: cfbd1999769f4f08dce29629fb92fdc0fac53829
Date: 2020-08-06T05:40:40.871Z
Electron: 7.3.2
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.6.0
Operating system: macOS Catalina Version 10.15.6 (19G73)
Screen Reader: VoiceOver

Repro Steps:

1. Open Visual studio code
2. Click on the extension button and search for "Azure Functions"
3. Click on install and move to the "Azure" button
4. Click on "Create New Project Button" from the toolbar
5. Navigate to options from the list box such as "Python", "JavaScript", etc. control using a keyboard and verify if the color contrast ratio of keyboard focus is less than 3:1 or not.

Actual:

The several controls such as "Python", "JavaScript", etc. has a keyboard focus color contrast ratio of 1.1:1 which is less than the standard color contrast ratio of 3:1 which is not appropriate as the users with low vision will have difficulty in understanding the navigation on the screen.

Expected:

The keyboard focus color contrast ratio of several controls such as "Python", "JavaScript", etc. should be greater than or equal to 3:1.

User Impact:

If the color contrast ratio of the keyboard focus for the contents present on the screen is less than 3:1 then the users with low vision will have difficulty in understanding the keyboard navigation for the controls on the screen.

Attachment link for Reference:

[ejizba]

This issue should be filed in the VS Code repo: https://github.com/Microsoft/vscode

Our extension has no control over the theming. For example, here is a VS Code dialog with the same styling:

[nirmalsahoo]

Logged issue in VS Code- microsoft/vscode#104556
As per the C & AI bug process assigning the bug to the Product Owner. Please assign this bug back to the tester once the "External" issue has been resolved and changes are pushed to the environment that will be available for bug verification.

[ejizba]

Per the comment in the VS Code issue, you selected the wrong colors and this should be closed.

[vscodebot]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!