accessibility-insights-web
accessibility-insights-web copied to clipboard
microsoft
Bug: Kebab menu hover state is bad in Win10 HC modes
Describe the bug
The kebab menu produces unfortunately colors on hover state in Windows HC modes:
| HC Theme | Hover? | Image |
|---|---|---|
| HC1 | No |  |
| HC1 | Yes |  |
| HC2 | No |  |
| HC2 | Yes |  |
| HC Black | No |  |
| HC Black | Yes |  |
| HC White | No |  |
| HC White | Yes |  |
There is no change in mouse cursor (it's already a hand because the kebab menu is hosted by a card that is already clickable). The only visible change on hover is the change in the text color.
To Reproduce Steps to reproduce the behavior:
- Run on Win10 with High Contrast enabled
- Run automated checks on https://www.washington.edu/accesscomputing/AU/before.html
- In automated checks view, hover over the kebab menu
- Look at the colors
CodePen repro example
Expected behavior
There should be a clear visual indicator of the hover, and simply changing the text color doesn't provide that. We're following the FluentUI guidance of changing just the text color, but that guidance assumes that the cursor will also change on hover. In our scenario, the cursor remains unchanged, so our experience isn't great. We could almost call this good enough if the text color had a 3:1 contrast ratio in all HC modes, but the HC2 contrast ratio is too low when compared to the window color. That's not surprising, since the selected text color (what the browser uses for the text) is designed to be contrasted against the text color, not the window color.
Looking at Windows apps in HC modes, 2 common practices emerge to get a clear hover indicator in HC modes. Either of the following strategies would work:
- Include a border around the button being hovered in HC mode. This is how some command bars show hover.
- Set both the foreground and background color on hover in HC mode. This is how most Win32 controls show hover.
Screenshots
Context (please complete the following information)
- OS Name & Version: Win10 21H2
- AI-Web Version & Environment: 2.34.1 Insider
- Browser Version: Chrome 105.0.5195.102
- Target Page: https://www.washington.edu/accesscomputing/AU/before.html
Are you willing to submit a PR?
Did you search for similar existing issues?
Additional context
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!
