Skip to content

Commit

Permalink
Fix color picker element tab order in horizonal mode. (#5939)
Browse files Browse the repository at this point in the history
  • Loading branch information
@StephenLPeters
StephenLPeters authored Sep 22, 2021
1 parent a50c1c2 commit 841d01d
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 14 deletions.
26 changes: 14 additions & 12 deletions dev/ColorPicker/ColorPicker.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@

<Setter Target="ColorRepresentationComboBox.(Grid.Row)" Value="1"/>
<Setter Target="ColorTextInputPanels.(Grid.Row)" Value="2"/>
<Setter Target="HexTextBox.TabIndex" Value="3"/>
<Setter Target="HexTextBox.(Grid.Row)" Value="0"/>
<Setter Target="HexTextBox.(Grid.Column)" Value="0"/>
<Setter Target="HexTextBox.(Grid.ColumnSpan)" Value="3"/>
Expand Down Expand Up @@ -244,7 +245,8 @@
MaxValue="{TemplateBinding MaxValue}"
Shape="{TemplateBinding ColorSpectrumShape}"
Components="{TemplateBinding ColorSpectrumComponents}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}" />
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
TabIndex="0"/>
<Grid x:Name="ColorPreviewRectangleGrid" Grid.Column="1" Grid.Row="0" Width="44" Margin="12,0,0,0">
<Grid.RowDefinitions>
<RowDefinition />
Expand Down Expand Up @@ -290,7 +292,7 @@
<LinearGradientBrush x:Name="ThirdDimensionSliderGradientBrush" />
</Rectangle.Fill>
</Rectangle>
<primitives:ColorPickerSlider x:Name="ThirdDimensionSlider" Minimum="0" Maximum="100" ColorChannel="Value" Orientation="Horizontal" Style="{StaticResource ColorPickerSliderStyle}" IsThumbToolTipEnabled="False" />
<primitives:ColorPickerSlider x:Name="ThirdDimensionSlider" Minimum="0" Maximum="100" ColorChannel="Value" Orientation="Horizontal" Style="{StaticResource ColorPickerSliderStyle}" IsThumbToolTipEnabled="False" TabIndex="1"/>
</Grid>
<Grid Margin="0,0,0,16" x:Name="AlphaSliderGrid" Grid.Row="2">
<Rectangle x:Name="AlphaSliderCheckeredBackgroundRectangle" RenderTransformOrigin="0.5, 0.5" Height="12" VerticalAlignment="Center"
Expand All @@ -311,7 +313,7 @@
<LinearGradientBrush x:Name="AlphaSliderGradientBrush" />
</Rectangle.Fill>
</Rectangle>
<primitives:ColorPickerSlider x:Name="AlphaSlider" Minimum="0" Maximum="100" ColorChannel="Alpha" Orientation="Horizontal" Style="{StaticResource ColorPickerSliderStyle}" IsThumbToolTipEnabled="False" />
<primitives:ColorPickerSlider x:Name="AlphaSlider" Minimum="0" Maximum="100" ColorChannel="Alpha" Orientation="Horizontal" Style="{StaticResource ColorPickerSliderStyle}" IsThumbToolTipEnabled="False" TabIndex="2"/>
</Grid>
<StackPanel x:Name="MoreEntriesPanel" Grid.Row="3" Margin="0,0,0,12">
<ToggleButton
Expand Down Expand Up @@ -427,7 +429,7 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ComboBox Grid.Row="0" x:Name="ColorRepresentationComboBox" Width="120">
<ComboBox Grid.Row="0" x:Name="ColorRepresentationComboBox" Width="120" TabIndex="4">
<ComboBoxItem x:Name="RGBComboBoxItem" Content="RGB" IsSelected="True"/>
<ComboBoxItem x:Name="HSVComboBoxItem" Content="HSV"/>
</ComboBox>
Expand All @@ -444,11 +446,11 @@
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox x:Name="RedTextBox" Grid.Row="0" Grid.Column="0" Width="120" MaxLength="3" Text="255" Margin="0,12,0,0"/>
<TextBox x:Name="RedTextBox" Grid.Row="0" Grid.Column="0" Width="120" MaxLength="3" Text="255" Margin="0,12,0,0" />
<TextBlock x:Name="RedLabel" Grid.Row="0" Grid.Column="2" Text="Red" VerticalAlignment="Center" Margin="0,12,0,0"/>
<TextBox x:Name="GreenTextBox" Grid.Row="1" Grid.Column="0" Width="120" MaxLength="3" Text="255" Margin="0,12,0,0"/>
<TextBox x:Name="GreenTextBox" Grid.Row="1" Grid.Column="0" Width="120" MaxLength="3" Text="255" Margin="0,12,0,0" />
<TextBlock x:Name="GreenLabel" Grid.Row="1" Grid.Column="2" Text="Green" VerticalAlignment="Center" Margin="0,12,0,0"/>
<TextBox x:Name="BlueTextBox" Grid.Row="2" Grid.Column="0" Width="120" MaxLength="3" Text="255" Margin="0,12,0,0"/>
<TextBox x:Name="BlueTextBox" Grid.Row="2" Grid.Column="0" Width="120" MaxLength="3" Text="255" Margin="0,12,0,0" />
<TextBlock x:Name="BlueLabel" Grid.Row="2" Grid.Column="2" Text="Blue" VerticalAlignment="Center" Margin="0,12,0,0"/>
</Grid>
<Grid x:Name="HsvPanel" Visibility="Collapsed">
Expand All @@ -462,11 +464,11 @@
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox x:Name="HueTextBox" Grid.Row="0" Grid.Column="0" Width="120" MaxLength="3" Text="0" Margin="0,12,0,0"/>
<TextBox x:Name="HueTextBox" Grid.Row="0" Grid.Column="0" Width="120" MaxLength="3" Text="0" Margin="0,12,0,0" />
<TextBlock x:Name="HueLabel" Grid.Row="0" Grid.Column="2" Text="Hue" VerticalAlignment="Center" Margin="0,12,0,0"/>
<TextBox x:Name="SaturationTextBox" Grid.Row="1" Grid.Column="0" Width="120" MaxLength="3" Text="0" Margin="0,12,0,0"/>
<TextBox x:Name="SaturationTextBox" Grid.Row="1" Grid.Column="0" Width="120" MaxLength="3" Text="0" Margin="0,12,0,0" />
<TextBlock x:Name="SaturationLabel" Grid.Row="1" Grid.Column="2" Text="Saturation" VerticalAlignment="Center" Margin="0,12,0,0"/>
<TextBox x:Name="ValueTextBox" Grid.Row="2" Grid.Column="0" Width="120" MaxLength="3" Text="100" Margin="0,12,0,0"/>
<TextBox x:Name="ValueTextBox" Grid.Row="2" Grid.Column="0" Width="120" MaxLength="3" Text="100" Margin="0,12,0,0" />
<TextBlock x:Name="ValueLabel" Grid.Row="2" Grid.Column="2" Text="Value" VerticalAlignment="Center" Margin="0,12,0,0"/>
</Grid>
</StackPanel>
Expand All @@ -479,11 +481,11 @@
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox x:Name="AlphaTextBox" Width="120" MaxLength="4" Text="100%"/>
<TextBox x:Name="AlphaTextBox" Width="120" MaxLength="4" Text="100%" />
<TextBlock x:Name="AlphaLabel" Grid.Column="2" Text="Opacity" VerticalAlignment="Center"/>
</Grid>
</StackPanel>
<TextBox x:Name="HexTextBox" Grid.Column="2" MaxLength="7" Text="#FFFFFF" Width="132" HorizontalAlignment="Right" VerticalAlignment="Top" />
<TextBox x:Name="HexTextBox" Grid.Column="2" MaxLength="7" Text="#FFFFFF" Width="132" HorizontalAlignment="Right" VerticalAlignment="Top"/>
</Grid>
</StackPanel>
</Grid>
Expand Down
81 changes: 81 additions & 0 deletions dev/ColorPicker/InteractionTests/ColorPickerTests.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1300,6 +1300,87 @@ public void VerifyStringsAreLocalizedCorrectly()
LocalizationHelper.CompareStringSets(englishStrings, otherLanguageStrings);
}

[TestMethod]
public void VerifyTabFocusOrder()
{
using (var setup = SetupColorPickerTest(TestOptions.EnableAlpha | TestOptions.DisableColorSpectrumLoadWait))
{
Log.Comment("Give initial keyboard focus to the color spectrum.");
FindElement.ById(ColorSpectrumAutomationId).SetFocus();
Wait.ForIdle();

Log.Comment("Give keyboard focus to the value slider using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(ThirdDimensionAutomationId);

Log.Comment("Give keyboard focus to the alpha slider using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(AlphaSliderAutomationId);

Log.Comment("Give keyboard focus to the Color Representation ComboBox using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(ColorRepresentationComboBoxAutomationId);

Log.Comment("Give keyboard focus to the red text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(RedTextBoxAutomationId);

Log.Comment("Give keyboard focus to the green text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(GreenTextBoxAutomationId);

Log.Comment("Give keyboard focus to the blue text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(BlueTextBoxAutomationId);

Log.Comment("Give keyboard focus to the alpha text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(AlphaTextBoxAutomationId);

Log.Comment("Give keyboard focus to the hex text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(HexTextBoxAutomationId);

SetIsHorizontalOrientation(true);

Log.Comment("Give initial keyboard focus to the color spectrum.");
FindElement.ById(ColorSpectrumAutomationId).SetFocus();
Wait.ForIdle();

Log.Comment("Give keyboard focus to the value slider using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(ThirdDimensionAutomationId);

Log.Comment("Give keyboard focus to the alpha slider using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(AlphaSliderAutomationId);

Log.Comment("Give keyboard focus to the hex text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(HexTextBoxAutomationId);

Log.Comment("Give keyboard focus to the Color Representation ComboBox using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(ColorRepresentationComboBoxAutomationId);

Log.Comment("Give keyboard focus to the red text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(RedTextBoxAutomationId);

Log.Comment("Give keyboard focus to the green text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(GreenTextBoxAutomationId);

Log.Comment("Give keyboard focus to the blue text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(BlueTextBoxAutomationId);

Log.Comment("Give keyboard focus to the alpha text box using tab.");
KeyboardHelper.PressKey(Key.Tab);
VerifyElementIsFocused(AlphaTextBoxAutomationId);
}
}

private void GetLocalizedText(IList<string> stringList)
{
ColorSpectrum colorSpectrum = new ColorSpectrum(FindElement.ById(ColorSpectrumAutomationId));
Expand Down
4 changes: 2 additions & 2 deletions dev/ColorPicker/TestUI/ColorPickerPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
<CheckBox AutomationProperties.AutomationId="AlphaEnabledCheckBox" Content="Is alpha enabled" IsChecked="{Binding IsAlphaEnabled, ElementName=ColorPicker, Mode=TwoWay}" />
<CheckBox AutomationProperties.AutomationId="ColorSpectrumVisibleCheckBox" Content="Is color spectrum visible" IsChecked="{Binding IsColorSpectrumVisible, ElementName=ColorPicker, Mode=TwoWay}" />
<CheckBox AutomationProperties.AutomationId="ColorPreviewVisibleCheckBox" Content="Is color preview visible" IsChecked="{Binding IsColorPreviewVisible, ElementName=ColorPicker, Mode=TwoWay}" />
<CheckBox AutomationProperties.AutomationId="ColorSliderVisibleCheckBox" Content="Is color slider visible" IsChecked="{Binding IsColorSliderVisible, ElementName=ColorPicker, Mode=TwoWay}" />
<CheckBox AutomationProperties.AutomationId="ColorSliderVisibleCheckBox" Content="Is color slider visible" IsChecked="{Binding IsColorSliderVisible, ElementName=ColorPicker, Mode=TwoWay}" TabIndex="0"/>
<CheckBox AutomationProperties.AutomationId="AlphaSliderVisibleCheckBox" Content="Is alpha slider visible" IsChecked="{Binding IsAlphaSliderVisible, ElementName=ColorPicker, Mode=TwoWay}" />
<CheckBox AutomationProperties.AutomationId="MoreButtonVisibleCheckBox" Content="Is more button visible" IsChecked="{Binding IsMoreButtonVisible, ElementName=ColorPicker, Mode=TwoWay}" />
<CheckBox AutomationProperties.AutomationId="ColorChannelTextInputVisibleCheckBox" Content="Is color channel text input visible" IsChecked="{Binding IsColorChannelTextInputVisible, ElementName=ColorPicker, Mode=TwoWay}" />
Expand Down Expand Up @@ -221,7 +221,7 @@
<TextBlock Text="BorderBrush:" VerticalAlignment="Center" Margin="0,0,10,0" />
<TextBlock AutomationProperties.AutomationId="MoreButtonBorderBrushTextBlock" x:Name="MoreButtonBorderBrushTextBlock" />
</StackPanel>
<CheckBox AutomationProperties.AutomationId="ColorSpectrumLoadedCheckBox" x:Name="ColorSpectrumLoadedCheckBox" IsChecked="False" Content="ColorSpectrum loaded" />
<CheckBox AutomationProperties.AutomationId="ColorSpectrumLoadedCheckBox" x:Name="ColorSpectrumLoadedCheckBox" IsChecked="False" Content="ColorSpectrum loaded" TabIndex="0"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="ColorSpectrum width:" VerticalAlignment="Center" Margin="0,0,10,0" />
<TextBlock AutomationProperties.AutomationId="WidthTextBlock" x:Name="WidthTextBlock" />
Expand Down

0 comments on commit 841d01d

Please sign in to comment.