[FZEditor] Improve narrator support on Grid Editor (#17532)

* [FZEditor]Add narrator info to thumb buttons

* [FZEditor]Narrator information about the zones

* [FZEditor]Allow text to be focused for narrator

* Address PR feedback

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

@@ -37,7 +37,8 @@
         </Grid>
         <StackPanel Margin="16">
             <StackPanel Margin="0,8,0,0">
-                <TextBlock 
+                <TextBlock
+                    Focusable="True"
                     TextWrapping="Wrap">
                     <Run 
                         FontWeight="Bold" 
@@ -46,6 +47,7 @@
                 </TextBlock>
                 <TextBlock 
                     Margin="0,8,0,0"
+                    Focusable="True"
                     TextWrapping="Wrap">
                     <Run 
                         FontWeight="Bold" 
@@ -54,6 +56,7 @@
                 </TextBlock>
                 <TextBlock 
                     Margin="0,8,0,0"
+                    Focusable="True"
                     TextWrapping="Wrap">
                     <Run 
                         FontWeight="Bold" 

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

@@ -4,8 +4,10 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:FancyZonesEditor"
+             xmlns:props="clr-namespace:FancyZonesEditor.Properties"
              mc:Ignorable="d" 
              Focusable="True"
+             AutomationProperties.Name="{x:Static props:Resources.Resizer_Thumb_Announce}"
              d:DesignHeight="300" d:DesignWidth="300">
     <Thumb.Template>
         <ControlTemplate>

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

@@ -112,6 +112,13 @@ namespace FancyZonesEditor
             // using current culture as this is end user facing
             WidthLabel.Text = Math.Round(ActualWidth).ToString(CultureInfo.CurrentCulture);
             HeightLabel.Text = Math.Round(ActualHeight).ToString(CultureInfo.CurrentCulture);
+            System.Windows.Automation.AutomationProperties.SetName(
+                this,
+#pragma warning disable SA1118 // Parameter should not span multiple lines
+                Properties.Resources.Zone_Name + " " + (_zone.Index + 1).ToString(CultureInfo.CurrentCulture) + ". " +
+                Properties.Resources.Width_Name + ": " + WidthLabel.Text + ", " +
+                Properties.Resources.Height_Name + ": " + HeightLabel.Text);
+#pragma warning restore SA1118 // Parameter should not span multiple lines
         }
 
         public void UpdateShiftState(bool shiftState)

src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.Designer.cs

@@ -239,7 +239,47 @@ namespace FancyZonesEditor.Properties {
                 return ResourceManager.GetString("Delete_Layout_Dialog_Announce", resourceCulture);
             }
         }
-        
+
+        /// <summary>
+        ///   Looks up a localized string for representing the names of a single zone.
+        /// </summary>
+        public static string Zone_Name {
+            get
+            {
+                return ResourceManager.GetString("Zone_Name", resourceCulture);
+            }
+        }
+
+        /// <summary>
+        ///   Looks up a localized string for representing the name of the width dimension.
+        /// </summary>
+        public static string Width_Name {
+            get
+            {
+                return ResourceManager.GetString("Width_Name", resourceCulture);
+            }
+        }
+
+        /// <summary>
+        ///   Looks up a localized string for representing the name of the height dimension.
+        /// </summary>
+        public static string Height_Name {
+            get
+            {
+                return ResourceManager.GetString("Height_Name", resourceCulture);
+            }
+        }
+
+        /// <summary>
+        ///   Looks up a localized string for explaining how to use the thumbs to resize zone.
+        /// </summary>
+        public static string Resizer_Thumb_Announce {
+            get
+            {
+                return ResourceManager.GetString("Resizer_Thumb_Announce", resourceCulture);
+            }
+        }
+
         /// <summary>
         ///   Looks up a localized string similar to Delete zone.
         /// </summary>

src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.resx

@@ -288,6 +288,22 @@
   <data name="Delete_Layout_Dialog_Announce" xml:space="preserve">
     <value>Delete layout dialog.</value>
   </data>
+  <data name="Zone_Name" xml:space="preserve">
+    <value>Zone</value>
+    <comment>The name of the zones.</comment>
+  </data>
+  <data name="Width_Name" xml:space="preserve">
+    <value>Width</value>
+    <comment>The name of dimension called width.</comment>
+  </data>
+  <data name="Height_Name" xml:space="preserve">
+    <value>Height</value>
+    <comment>The name of dimension called height.</comment>
+  </data>
+  <data name="Resizer_Thumb_Announce" xml:space="preserve">
+    <value>Use the arrow keys to resize, delete key to remove.</value>
+    <comment>Keys and key means the keyboard keys.</comment>
+  </data>
   <data name="Are_You_Sure" xml:space="preserve">
     <value>Are you sure?</value>
   </data>