Skip to content

Fix focus indicator visibility for hyperlinks in dark mode and high contrast #2235

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

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Jun 13, 2025

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.

Co-authored-by: brianrob <6210322+brianrob@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] Focus indicator not visible for links in dark mode and high contrast Fix focus indicator visibility for hyperlinks in dark mode and high contrast Jun 13, 2025
@Copilot Copilot AI requested a review from brianrob June 13, 2025 18:24
Copilot finished work on behalf of brianrob June 13, 2025 18:24
@brianrob
Copy link
Member

@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.

Co-authored-by: brianrob <6210322+brianrob@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Jun 13, 2025

@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 finished work on behalf of brianrob June 13, 2025 18:51
@brianrob
Copy link
Member

@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.

Co-authored-by: brianrob <6210322+brianrob@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Jun 13, 2025

@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 finished work on behalf of brianrob June 13, 2025 23:21
@@ -2205,10 +2205,14 @@ SOFTWARE.
<Setter Property="OverridesDefaultStyle" Value="true" />
</Style>
<Style x:Key="{x:Type Hyperlink}" BasedOn="{StaticResource {x:Type Hyperlink}}" TargetType="{x:Type Hyperlink}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please undo all changes in this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reverted all changes to DarkTheme.xaml as requested. Changes in commit c31b04d.

@@ -85,9 +85,9 @@ SOFTWARE.
<SolidColorBrush x:Key="Menu.Static.Separator" Color="#FFD7D7D7"/>
<SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/>
<SolidColorBrush x:Key="MenuItem.Selected.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="MenuItem.Selected.Border" Color="#FF2084E8"/>
<SolidColorBrush x:Key="MenuItem.Selected.Border" Color="#FF1F4E79"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem to work either - it looks like the high contrast theme overrides the highlighting color and chooses something very bright. The bottom status bar in PerfView is properly themed such that under dark high-contrast themes, the text is light and the background is dark. Can you please theme the top file menu bar in the same way?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed by changing the top menu bar to use SystemColors.MenuBarBrushKey instead of theme-specific colors. This makes it work like the bottom status bar - using system colors that automatically adapt to high contrast themes. Changes in commit c31b04d.

Co-authored-by: brianrob <6210322+brianrob@users.noreply.github.com>
Copilot finished work on behalf of brianrob June 13, 2025 23:36
@brianrob
Copy link
Member

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.

@brianrob brianrob marked this pull request as ready for review June 13, 2025 23:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Focus indicator not visible for links in dark mode and high contrast
2 participants