Fixed AutomationProperties.Name for DatePicker Button (#10949)

* Added AutomationProperties.Name for DatePicker Button

* Fixes DatePicker control to match the use of localized resource for ShowCalendar button name

* Made Show Calendar button focusable

Author: dipeshmsft

src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/DatePicker.xaml

@@ -127,6 +127,7 @@
         <Setter Property="IsTodayHighlighted" Value="True" />
         <Setter Property="SelectedDateFormat" Value="Short" />
         <Setter Property="OverridesDefaultStyle" Value="True" />
+        <Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type DatePicker}">
@@ -148,8 +149,11 @@
                                                 BorderThickness="{TemplateBinding BorderThickness}"
                                                 Background="{TemplateBinding Background}"
                                                 CornerRadius="{TemplateBinding Border.CornerRadius}">
-                                                <ContentPresenter x:Name="GlyphElement"
+                                                <TextBlock x:Name="GlyphElement"
                                                               TextElement.Foreground="{TemplateBinding Foreground}"
+                                                              FontFamily="{DynamicResource SymbolThemeFontFamily}"
+                                                              FontSize="{DynamicResource DatePickerCalendarButtonIconSize}"
+                                                              Text="{StaticResource DatePickerCalendarGlyph}"
                                                               VerticalAlignment="Center"
                                                               HorizontalAlignment="Center" />
                                             </Border>
@@ -190,20 +194,15 @@
                             <DatePickerTextBox x:Name="PART_TextBox" 
                                             Padding="{TemplateBinding Padding}"
                                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                            KeyboardNavigation.TabIndex="0" />
 
                             <Button x:Name="PART_Button" 
                                 Grid.Column="1"
                                 VerticalAlignment="Stretch"
                                 Style="{StaticResource CalendarButtonStyle}"
-                                Focusable="False"
-                                MinWidth="30">
-                                <TextBlock FontFamily="{DynamicResource SymbolThemeFontFamily}"
-                                        FontSize="{DynamicResource DatePickerCalendarButtonIconSize}"
-                                        Text="{StaticResource DatePickerCalendarGlyph}"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center" />
-                            </Button>
+                                KeyboardNavigation.TabIndex="1"
+                                MinWidth="30" />
                         </Grid>
 
                         <Popup

src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Dark.xaml

@@ -2560,6 +2560,7 @@
     <Setter Property="IsTodayHighlighted" Value="True" />
     <Setter Property="SelectedDateFormat" Value="Short" />
     <Setter Property="OverridesDefaultStyle" Value="True" />
+    <Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type DatePicker}">
@@ -2576,7 +2577,7 @@
                   <Setter.Value>
                     <ControlTemplate TargetType="Button">
                       <Border x:Name="ButtonLayoutBorder" Margin="{DynamicResource DatePickerCalendarButtonMargin}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding Border.CornerRadius}">
-                        <ContentPresenter x:Name="GlyphElement" TextElement.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" />
+                        <TextBlock x:Name="GlyphElement" TextElement.Foreground="{TemplateBinding Foreground}" FontFamily="{DynamicResource SymbolThemeFontFamily}" FontSize="{DynamicResource DatePickerCalendarButtonIconSize}" Text="{StaticResource DatePickerCalendarGlyph}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                       </Border>
                       <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
@@ -2604,10 +2605,8 @@
               </Grid.ColumnDefinitions>
               <Border x:Name="BorderElement" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding Border.CornerRadius}" MinHeight="32">
               </Border>
-              <DatePickerTextBox x:Name="PART_TextBox" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
-              <Button x:Name="PART_Button" Grid.Column="1" VerticalAlignment="Stretch" Style="{StaticResource CalendarButtonStyle}" Focusable="False" MinWidth="30">
-                <TextBlock FontFamily="{DynamicResource SymbolThemeFontFamily}" FontSize="{DynamicResource DatePickerCalendarButtonIconSize}" Text="{StaticResource DatePickerCalendarGlyph}" HorizontalAlignment="Center" VerticalAlignment="Center" />
-              </Button>
+              <DatePickerTextBox x:Name="PART_TextBox" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" KeyboardNavigation.TabIndex="0" />
+              <Button x:Name="PART_Button" Grid.Column="1" VerticalAlignment="Stretch" Style="{StaticResource CalendarButtonStyle}" KeyboardNavigation.TabIndex="1" MinWidth="30" />
             </Grid>
             <Popup x:Name="PART_Popup" VerticalAlignment="Top" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_Root}" StaysOpen="False">
             </Popup>

src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.HC.xaml

@@ -2460,6 +2460,7 @@
     <Setter Property="IsTodayHighlighted" Value="True" />
     <Setter Property="SelectedDateFormat" Value="Short" />
     <Setter Property="OverridesDefaultStyle" Value="True" />
+    <Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type DatePicker}">
@@ -2476,7 +2477,7 @@
                   <Setter.Value>
                     <ControlTemplate TargetType="Button">
                       <Border x:Name="ButtonLayoutBorder" Margin="{DynamicResource DatePickerCalendarButtonMargin}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding Border.CornerRadius}">
-                        <ContentPresenter x:Name="GlyphElement" TextElement.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" />
+                        <TextBlock x:Name="GlyphElement" TextElement.Foreground="{TemplateBinding Foreground}" FontFamily="{DynamicResource SymbolThemeFontFamily}" FontSize="{DynamicResource DatePickerCalendarButtonIconSize}" Text="{StaticResource DatePickerCalendarGlyph}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                       </Border>
                       <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
@@ -2504,10 +2505,8 @@
               </Grid.ColumnDefinitions>
               <Border x:Name="BorderElement" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding Border.CornerRadius}" MinHeight="32">
               </Border>
-              <DatePickerTextBox x:Name="PART_TextBox" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
-              <Button x:Name="PART_Button" Grid.Column="1" VerticalAlignment="Stretch" Style="{StaticResource CalendarButtonStyle}" Focusable="False" MinWidth="30">
-                <TextBlock FontFamily="{DynamicResource SymbolThemeFontFamily}" FontSize="{DynamicResource DatePickerCalendarButtonIconSize}" Text="{StaticResource DatePickerCalendarGlyph}" HorizontalAlignment="Center" VerticalAlignment="Center" />
-              </Button>
+              <DatePickerTextBox x:Name="PART_TextBox" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" KeyboardNavigation.TabIndex="0" />
+              <Button x:Name="PART_Button" Grid.Column="1" VerticalAlignment="Stretch" Style="{StaticResource CalendarButtonStyle}" KeyboardNavigation.TabIndex="1" MinWidth="30" />
             </Grid>
             <Popup x:Name="PART_Popup" VerticalAlignment="Top" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_Root}" StaysOpen="False">
             </Popup>

src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Light.xaml

@@ -2575,6 +2575,7 @@
     <Setter Property="IsTodayHighlighted" Value="True" />
     <Setter Property="SelectedDateFormat" Value="Short" />
     <Setter Property="OverridesDefaultStyle" Value="True" />
+    <Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type DatePicker}">
@@ -2591,7 +2592,7 @@
                   <Setter.Value>
                     <ControlTemplate TargetType="Button">
                       <Border x:Name="ButtonLayoutBorder" Margin="{DynamicResource DatePickerCalendarButtonMargin}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding Border.CornerRadius}">
-                        <ContentPresenter x:Name="GlyphElement" TextElement.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" />
+                        <TextBlock x:Name="GlyphElement" TextElement.Foreground="{TemplateBinding Foreground}" FontFamily="{DynamicResource SymbolThemeFontFamily}" FontSize="{DynamicResource DatePickerCalendarButtonIconSize}" Text="{StaticResource DatePickerCalendarGlyph}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                       </Border>
                       <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
@@ -2619,10 +2620,8 @@
               </Grid.ColumnDefinitions>
               <Border x:Name="BorderElement" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding Border.CornerRadius}" MinHeight="32">
               </Border>
-              <DatePickerTextBox x:Name="PART_TextBox" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
-              <Button x:Name="PART_Button" Grid.Column="1" VerticalAlignment="Stretch" Style="{StaticResource CalendarButtonStyle}" Focusable="False" MinWidth="30">
-                <TextBlock FontFamily="{DynamicResource SymbolThemeFontFamily}" FontSize="{DynamicResource DatePickerCalendarButtonIconSize}" Text="{StaticResource DatePickerCalendarGlyph}" HorizontalAlignment="Center" VerticalAlignment="Center" />
-              </Button>
+              <DatePickerTextBox x:Name="PART_TextBox" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" KeyboardNavigation.TabIndex="0" />
+              <Button x:Name="PART_Button" Grid.Column="1" VerticalAlignment="Stretch" Style="{StaticResource CalendarButtonStyle}" KeyboardNavigation.TabIndex="1" MinWidth="30" />
             </Grid>
             <Popup x:Name="PART_Popup" VerticalAlignment="Top" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_Root}" StaysOpen="False">
             </Popup>

src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.xaml

@@ -1758,6 +1758,7 @@
     <Setter Property="IsTodayHighlighted" Value="True" />
     <Setter Property="SelectedDateFormat" Value="Short" />
     <Setter Property="OverridesDefaultStyle" Value="True" />
+    <Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type DatePicker}">
@@ -1774,7 +1775,7 @@
                   <Setter.Value>
                     <ControlTemplate TargetType="Button">
                       <Border x:Name="ButtonLayoutBorder" Margin="{DynamicResource DatePickerCalendarButtonMargin}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding Border.CornerRadius}">
-                        <ContentPresenter x:Name="GlyphElement" TextElement.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" />
+                        <TextBlock x:Name="GlyphElement" TextElement.Foreground="{TemplateBinding Foreground}" FontFamily="{DynamicResource SymbolThemeFontFamily}" FontSize="{DynamicResource DatePickerCalendarButtonIconSize}" Text="{StaticResource DatePickerCalendarGlyph}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                       </Border>
                       <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
@@ -1802,10 +1803,8 @@
               </Grid.ColumnDefinitions>
               <Border x:Name="BorderElement" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding Border.CornerRadius}" MinHeight="32">
               </Border>
-              <DatePickerTextBox x:Name="PART_TextBox" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
-              <Button x:Name="PART_Button" Grid.Column="1" VerticalAlignment="Stretch" Style="{StaticResource CalendarButtonStyle}" Focusable="False" MinWidth="30">
-                <TextBlock FontFamily="{DynamicResource SymbolThemeFontFamily}" FontSize="{DynamicResource DatePickerCalendarButtonIconSize}" Text="{StaticResource DatePickerCalendarGlyph}" HorizontalAlignment="Center" VerticalAlignment="Center" />
-              </Button>
+              <DatePickerTextBox x:Name="PART_TextBox" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" KeyboardNavigation.TabIndex="0" />
+              <Button x:Name="PART_Button" Grid.Column="1" VerticalAlignment="Stretch" Style="{StaticResource CalendarButtonStyle}" KeyboardNavigation.TabIndex="1" MinWidth="30" />
             </Grid>
             <Popup x:Name="PART_Popup" VerticalAlignment="Top" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_Root}" StaysOpen="False">
             </Popup>