Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A11y Testing for vscodeedu.com - VS Code UI Toolkit doesn't adapt to Windows High Contrast themes #507

Open
IanMatthewHuff opened this issue Sep 20, 2023 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@IanMatthewHuff
Copy link
Member

Context: Pasted below is a the contents of a linked bug from vscode for edu testing. We use vscode.dev + the vscode webview UI toolkit to provide our UI. In a recent accessibility pass we had a couple of bugs filed that I believe the UI toolkit would need to either resolve or make the choice to not resolve for now.

For this issue the overall Windows visual theme is changed to either high contrast aquatic or desert themes. In the browser window it's expected that the theming would now match this choice. Personally I think that the VS Code theme choices would cover this, but not sure if that meets overall A11y accessibility requirements.

Original bug: https://github.com/microsoft/vscode-edu-extension/issues/1078

Text of Original bug:

Describe the Bug

In High contrast (desert/aquatic) theme focus is not visible on the “checkbox”
Note:

  1. Similar issue is observed in Example True/False Question page scenarios also.
  2. Similar issue is observed on "overview", "Objectives", "Prerequisites" tabitems.

Github Tags:
#A11yMAS; #A11yTCS; #A11ySev2; #DesktopWeb; #Visual Studio Code For Education ; #GH-VisualStudioCodeforEducation-Web-Aug2023; #MAS4.3.1; #No Disruption of Accessibility Features; #High Contrast; ; #Get Healthy; #ChromiumEdge; #Win11;

Steps to Reproduce

  1. Launch the application using URL: https://vscodeedu.com/.
  2. "Visual Studio Code for Education" screen will get open.
  3. TAB till "login" control and hit ENTER.
  4. Courses tab will get open.
  5. TAB till "My Courses" tab.
  6. TAB till "Start" control and hit ENTER.
  7. TAB till "Introduction to Python" control present in the left navigation and hit ENTER.
  8. TAB till "Unit 1" control and hit ENTER.
  9. TAB till "Start" control present in "Unit 1 - Getting Started" section and hit ENTER.
  10. "Welcome" screen will appear.
  11. TAB till "Next" control and hit ENTER until "Example: Multiple Choice Question" screen appears.
  12. "Example: Multiple Choice Question" screen will appear.
  13. Verify whether In High contrast (desert/aquatic) theme focus is visible on the “checkbox" or not.

Expected behavior

In High contrast (desert/aquatic) theme focus is should be visible on the “checkbox" and “radio buttons”.

Screenshots / Video

Unit_1_-_Getting_Started_Introduction_Example_Multiple_Choice_Question_and_Example_TrueFalse_Question_page__Highcontrast_Desert_mode
Unit-1-Getting-Started_Introduction_Example-Multiple-Choice-Question-and-Example-TrueFalse-Question- (1)

@IanMatthewHuff IanMatthewHuff added the bug Something isn't working label Sep 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants