search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
162.98k stars 28.78k forks source link

Fix a11y: Inputs do not have a visible focus state when HC Light theme is applied #160225

Closed hawkticehurst closed 1 year ago

hawkticehurst commented 2 years ago

Does this issue occur when all extensions are disabled?: Yes

Steps to Reproduce:

  1. Change editor to use the VS Code High Contrast default light theme
  2. Open the settings page
  3. Find a setting that uses a checkbox
  4. Tab to focus on the checkbox (you should see no visible change when focused)

Reference/Comparison Screenshots

Default Dark Theme:

Screen Shot 2022-09-06 at 1 33 53 PM Screen Shot 2022-09-06 at 1 33 58 PM

Default Light Theme:

Screen Shot 2022-09-06 at 1 34 16 PM Screen Shot 2022-09-06 at 1 34 22 PM

Default HC Dark Theme:

Screen Shot 2022-09-06 at 1 33 29 PM Screen Shot 2022-09-06 at 1 33 37 PM

Default HC Light Theme (note lack of difference between non-focused/focused states):

Screen Shot 2022-09-06 at 1 34 51 PM Screen Shot 2022-09-06 at 1 34 58 PM

cc @daviddossett

hawkticehurst commented 2 years ago

Oh, looks like this issue seems to apply to dropdown and text field elements as well. I can file separate issues for each UI element if that's helpful/desired.

rzhao271 commented 1 year ago

There's a difference now, but it's very slight, imo. I'm wondering if another colour like orange could be used instead for the focus border, like in the HC dark theme? Focused setting next to an unfocused setting with the HC light theme