style: accessibility improvements to high contrast and text size #377
Conversation
United600
added
the
a11y
| <!-- Use opacity rather than a foreground brush so that it doesn't override the GridViewItem/ListViewItem foreground brushes --> | ||
| <x:Double x:Key="TextFillColorSecondaryOpacity">0.775</x:Double> | ||
| <x:Double x:Key="TextFillColorTertiaryOpacity">0.53</x:Double> |
There was a problem hiding this comment.
I love this. This is so clever! 🤩
| <VisualState x:Name="PointerOver"> | ||
| <Storyboard> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewHeaderItemSubtleButtonBackgroundPointerOver}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewHeaderItemSubtleButtonBorderBrushPointerOver}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewHeaderItemSubtleButtonForegroundPointerOver}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| </Storyboard> | ||
| </VisualState> | ||
|
|
||
| <VisualState x:Name="Pressed"> | ||
| <Storyboard> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewHeaderItemSubtleButtonBackgroundPressed}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewHeaderItemSubtleButtonBorderBrushPressed}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewHeaderItemSubtleButtonForegroundPressed}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| </Storyboard> | ||
| </VisualState> |
There was a problem hiding this comment.
Why do we use Storyboard here? Shouldn't VisualState.Setters be enough here? It doesn't seem like any animation is playing.
There was a problem hiding this comment.
Hmmm, is there any penalty that I'm not aware? Aren't 0 time duration animations as performant as they can get? Seems like the default for WinUI/SystemXAML.
| </Setter> | ||
| </Style> | ||
| <!-- ListViewHeaderItem with thicker font and PointerOver/Pressed states --> | ||
| <Style x:Key="ListViewHeaderItemSubtleButtonStyle" TargetType="ListViewHeaderItem"> |
There was a problem hiding this comment.
How is this style different from the GridViewHeaderItemSubtleButtonStyle?
There was a problem hiding this comment.
The GridViewHeaderItemSubtleButtonStyle needs a plus 4 side margin to compensate for this (so it's inline with the content):
Line 89 in a93c937
There was a problem hiding this comment.
In that case, you can probably base one style on the other and just override the different values.
<Style x:Key="GridViewHeaderItemSubtleButtonStyle" TargetType="GridViewHeaderItem" BasedOn="{StaticResource ListViewHeaderItemSubtleButtonStyle}">If that doesn't work you can change the TargetType to ListViewBaseHeaderItem so both styles target the same type.
add item corner radius resource fix deprecated glyph fix text horizontal alignment set opacity for playing item remove background brush transition fix network page content height fix group overview button text size cut off
Describe your changes
Before
Screenbox_Header_Old.mp4
After
Screenbox_Header.mp4
Note
This area still needs more work.
Screenbox_TextSize.mp4
Screenbox_NavView_Theme.mp4
Screenbox_Button_Theme.mp4