Skip to content

Commit

Permalink
fix: Improve AT experience in color contrast dialog (#1202)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaveTryon
DaveTryon authored Sep 24, 2021
1 parent b27b8a8 commit f32d8cd
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 48 deletions.
42 changes: 22 additions & 20 deletions src/AccessibilityInsights.SharedUx/Controls/TestTabs/ColorContrast.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,14 @@
<Label Grid.Row="0" Content="{x:Static Properties:Resources.ColorContrastAutomationPropertiesName}"
FontSize="{DynamicResource ConstXXLTextSize}"
Style="{StaticResource lblHeader}" HorizontalAlignment="Left" Margin="0,0,0,16"/>
<TextBlock Grid.Row="1" FontSize="{DynamicResource StandardTextSize}" Margin="0,0,0,0" TextWrapping="Wrap" Grid.ColumnSpan="2" VerticalAlignment="Center">
<Run FontSize="{DynamicResource StandardTextSize}" Foreground="{DynamicResource ResourceKey=SecondaryFGBrush}" Text="{x:Static Properties:Resources.ColorContrast_IntroRun}" />
<Hyperlink
AutomationProperties.Name="{x:Static Properties:Resources.ColorContrast_IntroLink}" Click="hlLearnAboutColorContrast_Click" Style="{StaticResource hLink}" Name="hlLearnMore">
<Run Text="{x:Static Properties:Resources.ColorContrast_IntroLink}" />
</Hyperlink>
<TextBlock Grid.Row="1" Name="tbInstructions" FontSize="{DynamicResource StandardTextSize}" Margin="0,0,0,0" TextWrapping="Wrap" Grid.ColumnSpan="2" VerticalAlignment="Center" Style="{StaticResource TbFocusable}">
<Run FontSize="{DynamicResource StandardTextSize}" Foreground="{DynamicResource ResourceKey=SecondaryFGBrush}" Text="{x:Static Properties:Resources.ColorContrast_IntroRun}" />
<TextBlock>
<Hyperlink
AutomationProperties.Name="{x:Static Properties:Resources.ColorContrast_IntroLink}" Click="hlLearnAboutColorContrast_Click" Style="{StaticResource hLink}" Name="hlLearnMore">
<Run Text="{x:Static Properties:Resources.ColorContrast_IntroLink}" />
</Hyperlink>
</TextBlock>
</TextBlock>
<Grid Grid.Row="2" Grid.ColumnSpan="2" Height="24" Margin="0,16,0,0" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
Expand All @@ -55,9 +57,9 @@
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Name="lblAutoDetect" Content="{x:Static Properties:Resources.lblAutoDetectContent}" Grid.Column="0" VerticalAlignment="Center" Style="{StaticResource lblDark}"/>
<ToggleButton Style="{StaticResource tgbSlider}" Grid.Column="2" Name="tgbtnAutoDetect" Margin="20,0,0,0" AutomationProperties.LabeledBy="{Binding ElementName=lblAutoDetect}" Click="TgbtnAutoDetect_Click"> </ToggleButton>
<ToggleButton Style="{StaticResource tgbSlider}" Grid.Column="2" Name="tgbtnAutoDetect" Margin="20,0,0,0" AutomationProperties.LabeledBy="{Binding ElementName=lblAutoDetect}" Click="TgbtnAutoDetect_Click"/>
</Grid>
<TextBlock Grid.Row="3" FontSize="{DynamicResource StandardTextSize}" Margin="0,0,0,0" TextWrapping="Wrap" Grid.ColumnSpan="2" VerticalAlignment="Center" Focusable="True">
<TextBlock Grid.Row="3" FontSize="{DynamicResource StandardTextSize}" Margin="0,0,0,0" TextWrapping="Wrap" Grid.ColumnSpan="2" VerticalAlignment="Center" Focusable="True" Style="{StaticResource TbFocusable}">
<Run FontSize="{DynamicResource StandardTextSize}" Foreground="{DynamicResource ResourceKey=SecondaryFGBrush}" Text="{x:Static Properties:Resources.ColorContrast_AutoDetectGuidance}" />
</TextBlock>
<Grid Grid.Row="4" Grid.Column="0" Margin="0,16,0,0">
Expand All @@ -71,29 +73,27 @@
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" >
<TextBlock FontSize="14" Margin="0 4">
<Run FontWeight="SemiBold" Text="{x:Static Properties:Resources.ColorContrast_Color1}" AutomationProperties.Name="{x:Static Properties:Resources.ColorContrast_Color1}" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}"/>
<Run FontWeight="SemiBold" Text="{x:Static Properties:Resources.ColorContrast_Color1}" AutomationProperties.Name="{x:Static Properties:Resources.ColorContrast_Color1}" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}"/>
</TextBlock>
<controls:ColorChooser x:Name="firstChooser"
HorizontalAlignment="Left"
BorderBrush="Transparent"
BorderThickness="2"
KeyboardNavigation.TabIndex="1"
ColorPickerName="{x:Static Properties:Resources.ColorContrast_Color1}"
AutomationProperties.Name="{x:Static Properties:Resources.firstChooserAutomationPropertiesName}"
StoredColor="{Binding Path=ContrastVM.FirstColor, Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ColorContrast}}"
DefaultColor="Black"/>
</StackPanel>
<StackPanel Grid.Row="1" Margin="0 8" Grid.Column="0">
<TextBlock FontSize="14" Margin="0 4">
<Run FontWeight="SemiBold" Text="{x:Static Properties:Resources.ColorContrast_Color2}" AutomationProperties.Name="{x:Static Properties:Resources.ColorContrast_Color2}" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}"/>
<Run FontWeight="SemiBold" Text="{x:Static Properties:Resources.ColorContrast_Color2}" AutomationProperties.Name="{x:Static Properties:Resources.ColorContrast_Color2}" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}"/>
</TextBlock>
<controls:ColorChooser x:Name="secondChooser"
HorizontalAlignment="Left"
BorderBrush="Transparent"
BorderThickness="2"
ColorPickerName="{x:Static Properties:Resources.ColorContrast_Color2}"
StoredColor="{Binding Path=ContrastVM.SecondColor, Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ColorContrast}}"
KeyboardNavigation.TabIndex="2"
AutomationProperties.Name="{x:Static Properties:Resources.secondChooserAutomationPropertiesName}"
/>
</StackPanel>
Expand All @@ -104,18 +104,17 @@
<StackPanel Orientation="Vertical" Margin="10,6,0,0" MinWidth="132">
<TextBlock Text="{x:Static Properties:Resources.ColorContrast_Ratio}" FontSize="14" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}"/>
<TextBlock x:Name="output" FontWeight="SemiBold" FontSize="17" HorizontalAlignment="Left"
AutomationProperties.LiveSetting="Polite" VerticalAlignment="Center" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}"
AutomationProperties.Name="{Binding Text, RelativeSource={RelativeSource Self}, StringFormat={x:Static Properties:Resources.ColorContrast_OutputAutomationName}}"
KeyboardNavigation.TabIndex="3" Focusable="True"
Text="{Binding Path=ContrastVM.FormattedRatio, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ColorContrast}}">
</TextBlock>
AutomationProperties.LiveSetting="Polite" VerticalAlignment="Center" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}"
AutomationProperties.Name="{Binding Text, RelativeSource={RelativeSource Self}, StringFormat={x:Static Properties:Resources.ColorContrast_OutputAutomationName}}"
Focusable="True" Style="{StaticResource TbFocusable}"
Text="{Binding Path=ContrastVM.FormattedRatio, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ColorContrast}}"/>
</StackPanel>
<StackPanel Name="spConfidence" Orientation="Vertical" Margin="10,10,0,6" MinWidth="132">
<TextBlock Name="tbConfidenceLabel" Text="{x:Static Properties:Resources.ColorContrast_Confidence}" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}" FontSize="14"/>
<TextBlock x:Name="tbConfidence" FontWeight="SemiBold" FontSize="17" HorizontalAlignment="Left"
AutomationProperties.LiveSetting="Polite" VerticalAlignment="Center"
AutomationProperties.Name="{Binding Text, RelativeSource={RelativeSource Self}, StringFormat={x:Static Properties:Resources.ColorContrast_tbConfidenceAutomationName}}"
KeyboardNavigation.TabIndex="4" Focusable="True" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}">
Focusable="True" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}" Style="{StaticResource TbFocusable}">
</TextBlock>
</StackPanel>
</StackPanel>
Expand Down Expand Up @@ -193,6 +192,7 @@
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}"/>
</Style>
</TextBlock.Style>
</TextBlock>
Expand Down Expand Up @@ -233,7 +233,7 @@
</fabric:FabricIconControl.Style>
</fabric:FabricIconControl>
<TextBlock x:Name="largeTextResult" KeyboardNavigation.IsTabStop="True" Focusable="True" FontWeight="SemiBold" FontSize="{DynamicResource ConstStandardTextSize}" Margin="8 0 0 0"
AutomationProperties.HelpText="{x:Static Properties:Resources.largeTextResultAutomationHelpText}" VerticalAlignment="Center" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}">
AutomationProperties.HelpText="{x:Static Properties:Resources.ColorContrast_LargeTextResultHelpText}" VerticalAlignment="Center" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
Expand All @@ -252,6 +252,7 @@
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}"/>
</Style>
</TextBlock.Style>
</TextBlock>
Expand Down Expand Up @@ -304,7 +305,7 @@
</fabric:FabricIconControl.Style>
</fabric:FabricIconControl>
<TextBlock x:Name="nonTextObjectResult" FontWeight="SemiBold" KeyboardNavigation.IsTabStop="True" Focusable="True" FontSize="{DynamicResource ConstStandardTextSize}" Margin="8 0 0 0"
AutomationProperties.HelpText="{x:Static Properties:Resources.ColorContrast_SmallTextResultHelpText}" VerticalAlignment="Center" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}">
AutomationProperties.HelpText="{x:Static Properties:Resources.ColorContrast_NonTextObjectsTestResultHelpText}" VerticalAlignment="Center" Foreground="{DynamicResource ResourceKey=PrimaryFGBrush}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
Expand All @@ -323,6 +324,7 @@
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}"/>
</Style>
</TextBlock.Style>
</TextBlock>
Expand Down
20 changes: 10 additions & 10 deletions src/AccessibilityInsights.SharedUx/Controls/TestTabs/ColorContrast.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,11 +122,18 @@ private void RunAutoCCA(Bitmap bitmap)
throw new InvalidOperationException("Unable to determine colors!");
}

SetConfidenceVisibility(Visibility.Visible);
this.ContrastVM.FirstColor = pair.DarkerColor.DrawingColor.ToMediaColor();
this.ContrastVM.SecondColor = pair.LighterColor.DrawingColor.ToMediaColor();
tbConfidence.Text = result.ConfidenceValue().ToString();
}

private void SetConfidenceVisibility(Visibility visibility)
{
tbConfidence.Visibility = visibility;
tbConfidenceLabel.Visibility = visibility;
}

private void RaiseLiveRegionEvents()
{
var peer = FrameworkElementAutomationPeer.FromElement(output) ?? new FrameworkElementAutomationPeer(output);
Expand Down Expand Up @@ -164,7 +171,7 @@ public void ClearUI()
this.ContrastVM.Reset();
this.firstChooser.Reset();
this.secondChooser.Reset();
this.tbConfidence.Text = string.Empty;
SetConfidenceVisibility(Visibility.Hidden);
}

public object Confidence => this.tbConfidence.Text;
Expand Down Expand Up @@ -279,14 +286,7 @@ private void HandleToggleButtonSwitch(bool isEnabled)
CCAMode.HandleToggleStatusChanged(isEnabled);
}

spConfidence.Children.Clear();
tbConfidence.Text = "";

if (isEnabled)
{
spConfidence.Children.Add(tbConfidenceLabel);
spConfidence.Children.Add(tbConfidence);
}
SetConfidenceVisibility(Visibility.Hidden);
}

public void SetAutoCCAState(bool state)
Expand Down Expand Up @@ -315,7 +315,7 @@ public void DeactivateProgressRing()

public new void Focus()
{
this.hlLearnMore.Focus();
this.tbInstructions.Focus();
}
}
}
35 changes: 22 additions & 13 deletions src/AccessibilityInsights.SharedUx/Properties/Resources.Designer.cs
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 8 additions & 5 deletions src/AccessibilityInsights.SharedUx/Properties/Resources.resx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@
<data name="smallSampleText" xml:space="preserve">
<value>The quick brown fox</value>
</data>
<data name="largeTextResultAutomationHelpText" xml:space="preserve">
<data name="ColorContrast_LargeTextResultHelpText" xml:space="preserve">
<value>Test result large text</value>
</data>
<data name="ColorContrast_OpenLinkFailed" xml:space="preserve">
Expand Down Expand Up @@ -1219,13 +1219,13 @@
<value>Sample large text</value>
</data>
<data name="ColorContrast_SmallSampleBoldHelpText" xml:space="preserve">
<value>Sample small bold text</value>
<value>Sample regular bold text</value>
</data>
<data name="ColorContrast_SmallSampleHelpText" xml:space="preserve">
<value>Sample small text</value>
<value>Sample regular text</value>
</data>
<data name="ColorContrast_SmallTextResultHelpText" xml:space="preserve">
<value>Test result small text</value>
<value>Test result regular text</value>
</data>
<data name="PropertyConfigDialogAutomationName" xml:space="preserve">
<value>Select properties to always show</value>
Expand Down Expand Up @@ -1308,7 +1308,7 @@ We collect anonymized data to identify the top accessibility issues found by use
<value>Auto detect contrast ratio</value>
</data>
<data name="ColorContrast_AutoDetectGuidance" xml:space="preserve">
<value>Auto-detection allows you to evaulate color contrast ratios by hovering over an element or setting the keyboard focus on it.</value>
<value>Auto-detection allows you to evaluate color contrast ratios by hovering over an element or setting the keyboard focus on it.</value>
</data>
<data name="hlHelpName" xml:space="preserve">
<value>Help</value>
Expand Down Expand Up @@ -1515,6 +1515,9 @@ Do you want to change the channel? </value>
<data name="TextRangeControl_Details" xml:space="preserve">
<value>Details</value>
</data>
<data name="ColorContrast_NonTextObjectsTestResultHelpText" xml:space="preserve">
<value>Test result Graphical objects</value>
</data>
<data name="UpdateContainedDialogAutomationName" xml:space="preserve">
<value>There is an update available</value>
</data>
Expand Down
Loading

0 comments on commit f32d8cd

Please sign in to comment.