Adding border to ToggleButton when checked in high-contrast themes #2092
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
arpitmathur
added
Bug
rladuca
approved these changes
Oct 23, 2019
vatsan-madhavan
approved these changes
Oct 25, 2019
arpitmathur
removed
the
* NO MERGE *
ghost
locked as resolved and limited conversation to collaborators
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #1458
5.0 PR: #1976
Description
In non-high contrast themes, when you check a ToggleButton and navigate to another control, we display the checked status by highlighting the button with a lighter shade of the selection color.
We don't follow this behavior in high contrast themes. The text is slightly-depressed upon checking but that is not visually apparent . When the ToggleButton does not have focus, there is a slight border which again, is not apparent.
In the image above, the 'S', 'C' and 'I' buttons are checked. However, it's barely noticeable that 'S' and 'C' are checked. The checked status of the 'I' button is also not noticeable when it receives focus.
The fix here is to check for a toggle button to be checked when in a high-contrast theme, we then add a border around the button. When a checked button also has keyboard focus, we add a border in the background-color. When the user navigates away, the border color is the same as the selection-color.
In the image below, the 'S', 'C' and 'I' buttons are checked again. Here, it's visually apparent that they are all currently checked.
In this pull request, relevant changes are in lines 673:693 in Button.xaml, the remaining files are generated off those changes.
Customer Impact
In high contrast themes, when you check a ToggleButton, it is not visually apparent that the ToggleButton has been checked, both when the ToggleButton has keyboard focus and when it does not.
Regression
No. This was discovered during accessibility testing on .Net Core 3.0
Risk - Low
This change only affects the ToggleButton control when HighContrast mode is turned on. The change has been tested well internally.