[FZEditor]Mark headings for accessibility (#25897)

* [FancyZones Editor - Edit layout] New HeadingTextBlock style is added and applied to FZ headers.

* [FancyZones Editor - Edit layout] Loaded event added.

* [Fancy zones editor - Edit layout] Two texts in FZEditor changed to header.

* [FancyZones Editor - Edit layout] Heading level property added for new headingtextblock.

src/modules/fancyzones/editor/FancyZonesEditor/App.xaml

@@ -14,6 +14,8 @@
                 <ResourceDictionary Source="pack://application:,,,/Styles/GridViewStyles.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/Styles/LayoutPreviewStyles.xaml" />
             </ResourceDictionary.MergedDictionaries>
+
+            <Style x:Key="HeadingTextBlock" TargetType="TextBlock"/>
         </ResourceDictionary>
     </Application.Resources>
 </Application>

src/modules/fancyzones/editor/FancyZonesEditor/HeadingTextBlock.cs

@@ -0,0 +1,31 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Windows;
+using System.Windows.Automation.Peers;
+using System.Windows.Controls;
+
+namespace FancyZonesEditor
+{
+    public class HeadingTextBlock : TextBlock
+    {
+        protected override AutomationPeer OnCreateAutomationPeer()
+        {
+            return new HeadingTextBlockAutomationPeer(this);
+        }
+
+        internal sealed class HeadingTextBlockAutomationPeer : TextBlockAutomationPeer
+        {
+            public HeadingTextBlockAutomationPeer(HeadingTextBlock owner)
+                : base(owner)
+            {
+            }
+
+            protected override AutomationControlType GetAutomationControlTypeCore()
+            {
+                return AutomationControlType.Header;
+            }
+        }
+    }
+}

src/modules/fancyzones/editor/FancyZonesEditor/MainWindow.xaml

@@ -188,11 +188,12 @@
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
-                    
+
-                    <TextBlock Text="{x:Static props:Resources.Templates}"
+                    <local:HeadingTextBlock Text="{x:Static props:Resources.Templates}"
-                               x:Name="TemplatesHeaderBlock"
+                        AutomationProperties.HeadingLevel="Level1"
-                               FontWeight="SemiBold"
+                        x:Name="TemplatesHeaderBlock"
-                               FontSize="24" />
+                        FontWeight="SemiBold"
+                        FontSize="24" />
 
                     <ui:GridView ItemsSource="{Binding TemplateModels}"
                                  Grid.Row="1"
@@ -215,7 +216,8 @@
                         </ui:GridView.ItemContainerStyle>
                     </ui:GridView>
 
-                    <TextBlock Text="{x:Static props:Resources.Custom}"
+                    <local:HeadingTextBlock Text="{x:Static props:Resources.Custom}"
+                               AutomationProperties.HeadingLevel="Level1"
                                x:Name="CustomHeaderBlock"
                                FontWeight="SemiBold"
                                Grid.Row="2"
@@ -362,7 +364,13 @@
                           Opened="Dialog_Opened"
                           Closed="Dialog_Closed">
             <ui:ContentDialog.Title>
-                <TextBlock x:Name="EditLayoutDialogTitle" MaxWidth="320" Margin="0,0,96,0" Loaded="EditLayoutDialogTitle_Loaded"/>
+                <local:HeadingTextBlock 
+                    x:Name="EditLayoutDialogTitle" 
+                    MaxWidth="320" 
+                    Margin="0,0,96,0" 
+                    Style="{StaticResource HeadingTextBlock}" 
+                    Loaded="EditLayoutDialogTitle_Loaded" 
+                    AutomationProperties.HeadingLevel="Level1"/>
             </ui:ContentDialog.Title>
             <Grid DataContext="{Binding SelectedModel}"
                  Margin="4,4,24,32">
@@ -739,11 +747,17 @@
                           PrimaryButtonText="{x:Static props:Resources.Create}"
                           PrimaryButtonClick="NewLayoutDialog_PrimaryButtonClick"
                           IsPrimaryButtonEnabled="{Binding ElementName=LayoutNameText, Path=Text.Length}"
-                          Title="{x:Static props:Resources.Choose_layout_type}"
                           Opened="Dialog_Opened"
                           Closed="Dialog_Closed">
+            <ui:ContentDialog.TitleTemplate>
+                <DataTemplate>
+                    <local:HeadingTextBlock Text="{x:Static props:Resources.Choose_layout_type}"
+                       AutomationProperties.HeadingLevel="Level1"
+                       Style="{StaticResource HeadingTextBlock}" />
+                </DataTemplate>
+            </ui:ContentDialog.TitleTemplate>
             <StackPanel Margin="0,16,24,0">
-                <TextBlock x:Name="NameHeaderText"
+                    <TextBlock x:Name="NameHeaderText"
                            Text="{x:Static props:Resources.Name}" />
                 <TextBox Margin="3,6,3,0"
                          x:Name="LayoutNameText"
@@ -815,11 +829,11 @@
                                            Margin="0,4,0,0"
                                            Text="{x:Static props:Resources.Layout_Canvas_Description}"
                                            Foreground="{DynamicResource SecondaryForegroundBrush}" />
-                            </StackPanel>
+                                </StackPanel>
-                        </Grid>
+                            </Grid>
-                    </RadioButton.Content>
+                        </RadioButton.Content>
-                </RadioButton>
+                    </RadioButton>
-            </StackPanel>
+                </StackPanel>
         </ui:ContentDialog>
     </Grid>
 </Window>

src/modules/fancyzones/editor/FancyZonesEditor/MainWindow.xaml.cs

@@ -621,7 +621,7 @@ namespace FancyZonesEditor
             SettingsDeepLink.OpenSettings(SettingsDeepLink.SettingsWindow.FancyZones);
         }
 
-        private void EditLayoutDialogTitle_Loaded(object sender, EventArgs e)
+        private void EditLayoutDialogTitle_Loaded(object sender, RoutedEventArgs e)
         {
             EditLayoutDialogTitle.TextTrimming = TextTrimming.CharacterEllipsis;
             EditLayoutDialogTitle.TextWrapping = TextWrapping.NoWrap;