microsoft / accessibility-insights-web

Accessibility Insights for Web
https://accessibilityinsights.io
MIT License
832 stars 149 forks source link

Left nav lacks clear tab or focus indicators with Windows HC modes #4263

Open DaveTryon opened 3 years ago

DaveTryon commented 3 years ago

Describe the bug

If you enable a Windows HC mode, the left nav pane loses both the hover indicator and the current selection indicators

To Reproduce Steps to reproduce the behavior:

  1. Start an assessment on a page (I used )
  2. Hover over the assessment steps in the nav pane -- there's no strong visual feedback (except the tooltip if you pause long enough)
  3. Select an item in the list--there should be a clear indicator that it's selected, but the only indication seems to be a bolding of text (which is much harder to discern than the non-HC version)
  4. See error

Alternatively, run FastPass--all 3 steps in the nav bar look more or less the same

CodePen repro example

Expected behavior

There should be clearly visible counterparts of the selection in HC modes

Screenshots

In these screenshots, the mouse hover is on "3 Focus", and the selection is on "3.1 Visible Focus". The only The Black-based HC themes show a "thumb"

HC Mode Screenshot
None image
HC 1 image
HC 2 image
HC Black image
HC White image

Context (please complete the following information)

Are you willing to submit a PR?

Did you search for similar existing issues?

Additional context

ghost commented 3 years ago

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

ferBonnin commented 3 years ago

@ferBonnin needs some PM/ Design information

ghost commented 3 years ago

This issue requires additional investigation by the Accessibility Insights team. When the issue is ready to be triaged again, we will update the issue with the investigation result and add "status: ready for triage". Thank you for contributing to Accessibility Insights!

ferBonnin commented 2 years ago

@jlperkins could you please help us verify if this issue still repos after the Fluent update?

jlperkins commented 2 years ago

With the latest changes in main, and the new HC modes in Windows 11, this issue still repros. Note that I am unable to check on Windows 10 HC modes since I have already upgraded. For the Windows 11 modes, as seen in the images below, the assessment step gets a small colored bar to the side and text is bolded; but there is no strong indication that you have selected that test or are on that step of the assessment. This is different than in regular mode, where the entire nav item is highlighted a different color.

image [Theme 1, Aquatic]

image [Theme 2, Desert]

image [Theme 3, Dusk]

image [Theme 4, Night Sky]

v-viyada commented 9 months ago

@nang4ally Please review below screenshots if they are the desired outcomes for this bug or any changes required in this.

In these screenshots, the mouse hover is on "3 Focus", and the selection is on "3.1 Visible Focus" [Theme 1 Aquatic]

image

[Theme 2 Desert]

image

[Theme 3 Dusk]

image

[Theme 4 Night Sky]

image

@peterdur FYI