Fix focus indicator visibility for hyperlinks in dark mode and high contrast
Problem
Focus indicators were not visible for hyperlinks in dark mode and high contrast, making keyboard navigation difficult for users with visual impairments. When users press Tab to navigate through links in the left navigation section or data grid help buttons, there was no visual indication of which link currently has focus.
Root Cause
The elements in PerfView's UI are using specific colors instead of the system colors.
Solution
Updated the affected elements to use system colors, which react to the system themes.
Before/After
Before: Hyperlinks showed no visual indication when focused via keyboard navigation After: Focused hyperlinks are wrapped in a light color when they have focus
Fixes #2234.
@copilot, in addition to the current change, I'm also noticing that under high contrast, top menu bar, file path drop down, and Filter are all bright gray under high contrast dark mode. With the current change, I can see that the link selection is visible, but only barely. Please style these components to be dark like the rest of the components on the main window.
@copilot, in addition to the current change, I'm also noticing that under high contrast, top menu bar, file path drop down, and Filter are all bright gray under high contrast dark mode. With the curr...
I've addressed the high contrast dark mode styling issues you mentioned. The changes in commit a0a27df add OverridesDefaultStyle="True" and explicit color setters to the Menu, MenuItem, ComboBox, TextBox, and HistoryComboBox styles in DarkTheme.xaml. This ensures these components use dark colors consistently instead of falling back to bright gray system colors in high contrast mode.
Key changes:
- Menu background changed from transparent to dark theme background
- Added explicit dark color overrides for all mentioned components
- Prevents system color fallback in high contrast mode
The top menu bar, file path dropdown, and filter should now appear dark like the rest of the interface in high contrast dark mode.
@copilot, this change is not working. Please undo the change and then let's re-assess.
It looks like the issue is not in PerfView's implementation of dark mode, but instead in PerfView's light mode when run under a Windows high-contrast dark mode them. Under this configuration, the links at the top of the window are light blue but on a very bright background, so they are hard to see, and the fact that one is selected is also very hard to see. Let's try to fix this by updating the LightMode.xaml theme to make the color of the selected item at the top a much darker blue.
@copilot, this change is not working. Please undo the change and then let's re-assess.
It looks like the issue is not in PerfView's implementation of dark mode, but instead in PerfView's light mod...
I've reverted the failed high contrast changes to DarkTheme.xaml and updated LightTheme.xaml instead as requested. Changed the MenuItem.Selected.Border and MenuItem.Highlight.Border colors from bright blue (#FF2084E8) to a much darker blue (#FF1F4E79) to improve visibility of selected menu items when running PerfView's light mode under Windows high-contrast dark mode. This should provide much better contrast against bright backgrounds. Changes in commit 71fa941.
Copilot Post-Mortem:
- Copilot was unable to produce a viable fix for several iterations. It appears the problem is that it was focusing on the PerfView dark mode theme, while the issue was referring to the system dark-high-contrast theme. I believe making this clear to copilot in the issue would have reduced the number of iterations required. Clarification of this enabled copilot to implement a proper solution.
- This is another example of an issue that would benefit from a Windows build and the ability for copilot to do UI testing.