Fixed tab navigation control in calendar (#9504)

* Fixed tab navigation control in calendar * Fixed tab navigation for year view in calendar * Reverting auto generated value of passwordchar
dotnet · Aug 2, 2024 · 4e977f5 · 4e977f5
1 parent 4ed2a56
commit 4e977f5
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 39 deletions.
diff --git a/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/Calendar.xaml b/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/Calendar.xaml
@@ -307,14 +307,14 @@
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type CalendarItem}">
                     <Grid x:Name="PART_Root" Margin="12">
-                        <Grid KeyboardNavigation.TabNavigation="Cycle">
+                        <Grid KeyboardNavigation.TabNavigation="Local">
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="Auto" />
                                 <RowDefinition Height="*" />
                             </Grid.RowDefinitions>
 
                             <!--  HINT: Header with title and navigation buttons  -->
-                            <Grid Grid.Row="0" Margin="8,0,8,14">
+                            <Grid Grid.Row="0" Margin="8,0,8,14" KeyboardNavigation.TabIndex="0">
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" />
@@ -331,8 +331,7 @@
                                     BorderBrush="Transparent"
                                     Focusable="True"
                                     FontSize="14"
-                                    FontWeight="Bold"
-                                    KeyboardNavigation.TabNavigation="Cycle"
+                                    FontWeight="Bold"                                   
                                     Foreground="{DynamicResource CalendarViewForeground}" />
                                 <Button
                                     x:Name="PART_PreviousButton"
@@ -346,8 +345,7 @@
                                     Background="Transparent"
                                     BorderBrush="Transparent"
                                     Focusable="True"
-                                    AutomationProperties.Name="Previous"
-                                    KeyboardNavigation.TabNavigation="Cycle"
+                                    AutomationProperties.Name="Previous"                                  
                                     Foreground="{DynamicResource CalendarViewButtonForeground}">
                                     <Button.Content>
                                         <TextBlock
@@ -369,7 +367,6 @@
                                     BorderBrush="Transparent"
                                     Focusable="True"
                                     AutomationProperties.Name="Next"
-                                    KeyboardNavigation.TabNavigation="Contained"
                                     Foreground="{DynamicResource CalendarViewButtonForeground}">
                                     <Button.Content>
                                         <TextBlock
@@ -386,7 +383,8 @@
                                 Grid.Row="1"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
-                                KeyboardNavigation.TabNavigation="None"
+                                KeyboardNavigation.TabNavigation="Once"
+                                KeyboardNavigation.TabIndex="1"
                                 Visibility="Visible">
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="Auto" />
@@ -411,8 +409,10 @@
                             <Border
                                 Grid.Row="1"
                                 HorizontalAlignment="Center"
-                                VerticalAlignment="Center">
-                                <Grid x:Name="PART_YearView" Visibility="Hidden" KeyboardNavigation.TabNavigation="None">
+                                VerticalAlignment="Center"
+                                KeyboardNavigation.TabNavigation="Once"
+                                KeyboardNavigation.TabIndex="1">
+                                <Grid x:Name="PART_YearView" Visibility="Hidden">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="Auto" />
                                         <ColumnDefinition Width="Auto" />
@@ -437,7 +437,9 @@
                                 Stretch="Fill"
                                 Stroke="Transparent"
                                 StrokeThickness="0"
-                                Visibility="Collapsed">
+                                Visibility="Collapsed"
+                                KeyboardNavigation.TabNavigation="Once"
+                                KeyboardNavigation.TabIndex="1">
                                 <Rectangle.Fill>
                                     <SolidColorBrush Color="{DynamicResource ControlFillColorDefault}" />
                                 </Rectangle.Fill>

diff --git a/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Dark.xaml b/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Dark.xaml
@@ -941,32 +941,32 @@
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type CalendarItem}">
           <Grid x:Name="PART_Root" Margin="12">
-            <Grid KeyboardNavigation.TabNavigation="Cycle">
+            <Grid KeyboardNavigation.TabNavigation="Local">
               <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
               </Grid.RowDefinitions>
               <!--  HINT: Header with title and navigation buttons  -->
-              <Grid Grid.Row="0" Margin="8,0,8,14">
+              <Grid Grid.Row="0" Margin="8,0,8,14" KeyboardNavigation.TabIndex="0">
                 <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="Auto" />
                   <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
-                <Button x:Name="PART_HeaderButton" Grid.Column="0" Margin="-6,0,0,0" Padding="6,2" HorizontalAlignment="Left" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" FontSize="14" FontWeight="Bold" KeyboardNavigation.TabNavigation="Cycle" Foreground="{DynamicResource CalendarViewForeground}" />
-                <Button x:Name="PART_PreviousButton" Grid.Column="1" Width="26" Height="26" Margin="0,0,8,0" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" AutomationProperties.Name="Previous" KeyboardNavigation.TabNavigation="Cycle" Foreground="{DynamicResource CalendarViewButtonForeground}">
+                <Button x:Name="PART_HeaderButton" Grid.Column="0" Margin="-6,0,0,0" Padding="6,2" HorizontalAlignment="Left" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" FontSize="14" FontWeight="Bold" Foreground="{DynamicResource CalendarViewForeground}" />
+                <Button x:Name="PART_PreviousButton" Grid.Column="1" Width="26" Height="26" Margin="0,0,8,0" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" AutomationProperties.Name="Previous" Foreground="{DynamicResource CalendarViewButtonForeground}">
                   <Button.Content>
                     <TextBlock FontSize="8" FontFamily="{DynamicResource SegoeFluentIcons}"></TextBlock>
                   </Button.Content>
                 </Button>
-                <Button x:Name="PART_NextButton" Grid.Column="2" Width="26" Height="26" Margin="0" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" AutomationProperties.Name="Next" KeyboardNavigation.TabNavigation="Contained" Foreground="{DynamicResource CalendarViewButtonForeground}">
+                <Button x:Name="PART_NextButton" Grid.Column="2" Width="26" Height="26" Margin="0" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" AutomationProperties.Name="Next" Foreground="{DynamicResource CalendarViewButtonForeground}">
                   <Button.Content>
                     <TextBlock FontSize="8" FontFamily="{DynamicResource SegoeFluentIcons}"></TextBlock>
                   </Button.Content>
                 </Button>
               </Grid>
               <!--  HINT: Day picker  -->
-              <Grid x:Name="PART_MonthView" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" KeyboardNavigation.TabNavigation="None" Visibility="Visible">
+              <Grid x:Name="PART_MonthView" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.TabIndex="1" Visibility="Visible">
                 <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto" />
                   <ColumnDefinition Width="Auto" />
@@ -986,8 +986,8 @@
                   <RowDefinition Height="Auto" />
                 </Grid.RowDefinitions>
               </Grid>
-              <Border Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
-                <Grid x:Name="PART_YearView" Visibility="Hidden" KeyboardNavigation.TabNavigation="None">
+              <Border Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.TabIndex="1">
+                <Grid x:Name="PART_YearView" Visibility="Hidden">
                   <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="Auto" />
                     <ColumnDefinition Width="Auto" />
@@ -1001,7 +1001,7 @@
                   </Grid.RowDefinitions>
                 </Grid>
               </Border>
-              <Rectangle x:Name="PART_DisabledVisual" Grid.Row="0" Grid.RowSpan="2" Opacity="0" RadiusX="2" RadiusY="2" Stretch="Fill" Stroke="Transparent" StrokeThickness="0" Visibility="Collapsed">
+              <Rectangle x:Name="PART_DisabledVisual" Grid.Row="0" Grid.RowSpan="2" Opacity="0" RadiusX="2" RadiusY="2" Stretch="Fill" Stroke="Transparent" StrokeThickness="0" Visibility="Collapsed" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.TabIndex="1">
                 <Rectangle.Fill>
                   <SolidColorBrush Color="{DynamicResource ControlFillColorDefault}" />
                 </Rectangle.Fill>

diff --git a/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.HC.xaml b/src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.HC.xaml
@@ -915,32 +915,32 @@
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type CalendarItem}">
           <Grid x:Name="PART_Root" Margin="12">
-            <Grid KeyboardNavigation.TabNavigation="Cycle">
+            <Grid KeyboardNavigation.TabNavigation="Local">
               <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
               </Grid.RowDefinitions>
               <!--  HINT: Header with title and navigation buttons  -->
-              <Grid Grid.Row="0" Margin="8,0,8,14">
+              <Grid Grid.Row="0" Margin="8,0,8,14" KeyboardNavigation.TabIndex="0">
                 <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="Auto" />
                   <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
-                <Button x:Name="PART_HeaderButton" Grid.Column="0" Margin="-6,0,0,0" Padding="6,2" HorizontalAlignment="Left" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" FontSize="14" FontWeight="Bold" KeyboardNavigation.TabNavigation="Cycle" Foreground="{DynamicResource CalendarViewForeground}" />
-                <Button x:Name="PART_PreviousButton" Grid.Column="1" Width="26" Height="26" Margin="0,0,8,0" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" AutomationProperties.Name="Previous" KeyboardNavigation.TabNavigation="Cycle" Foreground="{DynamicResource CalendarViewButtonForeground}">
+                <Button x:Name="PART_HeaderButton" Grid.Column="0" Margin="-6,0,0,0" Padding="6,2" HorizontalAlignment="Left" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" FontSize="14" FontWeight="Bold" Foreground="{DynamicResource CalendarViewForeground}" />
+                <Button x:Name="PART_PreviousButton" Grid.Column="1" Width="26" Height="26" Margin="0,0,8,0" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" AutomationProperties.Name="Previous" Foreground="{DynamicResource CalendarViewButtonForeground}">
                   <Button.Content>
                     <TextBlock FontSize="8" FontFamily="{DynamicResource SegoeFluentIcons}"></TextBlock>
                   </Button.Content>
                 </Button>
-                <Button x:Name="PART_NextButton" Grid.Column="2" Width="26" Height="26" Margin="0" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" AutomationProperties.Name="Next" KeyboardNavigation.TabNavigation="Contained" Foreground="{DynamicResource CalendarViewButtonForeground}">
+                <Button x:Name="PART_NextButton" Grid.Column="2" Width="26" Height="26" Margin="0" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Focusable="True" AutomationProperties.Name="Next" Foreground="{DynamicResource CalendarViewButtonForeground}">
                   <Button.Content>
                     <TextBlock FontSize="8" FontFamily="{DynamicResource SegoeFluentIcons}"></TextBlock>
                   </Button.Content>
                 </Button>
               </Grid>
               <!--  HINT: Day picker  -->
-              <Grid x:Name="PART_MonthView" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" KeyboardNavigation.TabNavigation="None" Visibility="Visible">
+              <Grid x:Name="PART_MonthView" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.TabIndex="1" Visibility="Visible">
                 <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto" />
                   <ColumnDefinition Width="Auto" />
@@ -960,8 +960,8 @@
                   <RowDefinition Height="Auto" />
                 </Grid.RowDefinitions>
               </Grid>
-              <Border Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
-                <Grid x:Name="PART_YearView" Visibility="Hidden" KeyboardNavigation.TabNavigation="None">
+              <Border Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.TabIndex="1">
+                <Grid x:Name="PART_YearView" Visibility="Hidden">
                   <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="Auto" />
                     <ColumnDefinition Width="Auto" />
@@ -975,7 +975,7 @@
                   </Grid.RowDefinitions>
                 </Grid>
               </Border>
-              <Rectangle x:Name="PART_DisabledVisual" Grid.Row="0" Grid.RowSpan="2" Opacity="0" RadiusX="2" RadiusY="2" Stretch="Fill" Stroke="Transparent" StrokeThickness="0" Visibility="Collapsed">
+              <Rectangle x:Name="PART_DisabledVisual" Grid.Row="0" Grid.RowSpan="2" Opacity="0" RadiusX="2" RadiusY="2" Stretch="Fill" Stroke="Transparent" StrokeThickness="0" Visibility="Collapsed" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.TabIndex="1">
                 <Rectangle.Fill>
                   <SolidColorBrush Color="{DynamicResource ControlFillColorDefault}" />
                 </Rectangle.Fill>