Fix bug where buttons would be in tab order despite not visible, add …

…test UI (#5641)
microsoft · Aug 11, 2021 · 8ccaaa2 · 8ccaaa2
1 parent 4653903
commit 8ccaaa2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/dev/CommonStyles/ContentDialog_themeresources.xaml b/dev/CommonStyles/ContentDialog_themeresources.xaml
@@ -120,12 +120,18 @@
                                 <VisualState x:Name="DialogHidden" />
                                 <VisualState x:Name="DialogShowing">
                                     <VisualState.Setters>
+                                        <Setter Target="PrimaryButton.IsTabStop" Value="True"/>
+                                        <Setter Target="SecondaryButton.IsTabStop" Value="True"/>
+                                        <Setter Target="CloseButton.IsTabStop" Value="True"/>
                                         <Setter Target="LayoutRoot.Visibility" Value="Visible" />
                                         <Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
                                     </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="DialogShowingWithoutSmokeLayer">
                                     <VisualState.Setters>
+                                        <Setter Target="PrimaryButton.IsTabStop" Value="True"/>
+                                        <Setter Target="SecondaryButton.IsTabStop" Value="True"/>
+                                        <Setter Target="CloseButton.IsTabStop" Value="True"/>
                                         <Setter Target="LayoutRoot.Visibility" Value="Visible" />
                                         <Setter Target="LayoutRoot.Background" Value="{x:Null}" />
                                     </VisualState.Setters>
@@ -310,20 +316,23 @@
                                         </Grid.ColumnDefinitions>
                                         <Button
                                             x:Name="PrimaryButton"
+                                            IsTabStop="False"
                                             Content="{TemplateBinding PrimaryButtonText}"
                                             IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}"
                                             Style="{TemplateBinding PrimaryButtonStyle}"
                                             ElementSoundMode="FocusOnly"
                                             HorizontalAlignment="Stretch" />
                                         <Button
                                             x:Name="SecondaryButton"
+                                            IsTabStop="False"
                                             Content="{TemplateBinding SecondaryButtonText}"
                                             IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}"
                                             Style="{TemplateBinding SecondaryButtonStyle}"
                                             ElementSoundMode="FocusOnly"
                                             HorizontalAlignment="Stretch" />
                                         <Button
                                             x:Name="CloseButton"
+                                            IsTabStop="False"
                                             Grid.Column="4" 
                                             Content="{TemplateBinding CloseButtonText}"
                                             Style="{TemplateBinding CloseButtonStyle}"

diff --git a/dev/CommonStyles/ContentDialog_themeresources_v1.xaml b/dev/CommonStyles/ContentDialog_themeresources_v1.xaml
@@ -157,12 +157,18 @@
                                 <VisualState x:Name="DialogHidden" />
                                 <VisualState x:Name="DialogShowing">
                                     <VisualState.Setters>
+                                        <Setter Target="PrimaryButton.IsTabStop" Value="True"/>
+                                        <Setter Target="SecondaryButton.IsTabStop" Value="True"/>
+                                        <Setter Target="CloseButton.IsTabStop" Value="True"/>
                                         <Setter Target="LayoutRoot.Visibility" Value="Visible" />
                                         <Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
                                     </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="DialogShowingWithoutSmokeLayer">
                                     <VisualState.Setters>
+                                        <Setter Target="PrimaryButton.IsTabStop" Value="True"/>
+                                        <Setter Target="SecondaryButton.IsTabStop" Value="True"/>
+                                        <Setter Target="CloseButton.IsTabStop" Value="True"/>
                                         <Setter Target="LayoutRoot.Visibility" Value="Visible" />
                                         <Setter Target="LayoutRoot.Background" Value="{x:Null}" />
                                     </VisualState.Setters>
@@ -319,9 +325,9 @@
                                             <ColumnDefinition Width="0.5*" />
                                             <ColumnDefinition />
                                         </Grid.ColumnDefinitions>
-                                        <Button x:Name="PrimaryButton" Content="{TemplateBinding PrimaryButtonText}" IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}" Style="{TemplateBinding PrimaryButtonStyle}" ElementSoundMode="FocusOnly" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,2,0" Grid.Column="0" />
-                                        <Button x:Name="SecondaryButton" Content="{TemplateBinding SecondaryButtonText}" IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}" Style="{TemplateBinding SecondaryButtonStyle}" ElementSoundMode="FocusOnly" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2,0,2,0" Grid.Column="1" Grid.ColumnSpan="2" />
-                                        <Button x:Name="CloseButton" Content="{TemplateBinding CloseButtonText}" Style="{TemplateBinding CloseButtonStyle}" ElementSoundMode="FocusOnly" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2,0,0,0" Grid.Column="3" />
+                                        <Button x:Name="PrimaryButton" Content="{TemplateBinding PrimaryButtonText}" IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}" IsTabStop="False" Style="{TemplateBinding PrimaryButtonStyle}" ElementSoundMode="FocusOnly" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,2,0" Grid.Column="0" />
+                                        <Button x:Name="SecondaryButton" Content="{TemplateBinding SecondaryButtonText}" IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}" IsTabStop="False" Style="{TemplateBinding SecondaryButtonStyle}" ElementSoundMode="FocusOnly" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2,0,2,0" Grid.Column="1" Grid.ColumnSpan="2" />
+                                        <Button x:Name="CloseButton" Content="{TemplateBinding CloseButtonText}" IsTabStop="False" Style="{TemplateBinding CloseButtonStyle}" ElementSoundMode="FocusOnly" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2,0,0,0" Grid.Column="3" />
                                     </Grid>
                                 </Grid>
                             </Border>

diff --git a/dev/CommonStyles/TestUI/ContentDialogPage.xaml b/dev/CommonStyles/TestUI/ContentDialogPage.xaml
@@ -10,6 +10,13 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12">
+        <ContentDialog  x:Name="Dialog"
+            d:Visibility="Collapsed"
+            Content="Hello world"
+            PrimaryButtonText="Yes"
+            SecondaryButtonText="No"
+            CloseButtonText="Cancel"
+            DefaultButton="Primary" />
         <Button Content="Click to open simple ContentDialog" Click="ShowDialog_Click" Margin="0,12,0,24"/>
         <Button Content="Border thickness test dialog" Click="ShowBorderThickness_Click"/>
     </StackPanel>