From f6b5840e0eaca73d1f78c4ce6f105b50232683e2 Mon Sep 17 00:00:00 2001
From: Alekhya <reddykalekhya@gmail.com>
Date: Fri, 21 Aug 2020 12:21:23 -0700
Subject: [PATCH] Fix Accessibility issues of the FancyZones Settings page
 (#6045)

* Added automation property for the button

* Added an automation property name for the glyph

* added name automation property for the shortcut window

* fixed the name null for zone highlight button

* fixed the name for the inactive color dropdown

* fixed the accessibility issue with the border color downdown button

* fixed the issue with dropdowb buttons

* add description to the image

* Capitalize Z otherwise it reads it in an expected way

* made the naming generic as it the custom window is not only specific to fancyzones but is also used by colorpicker and PTRun to set their shortcut
---
 .../Controls/HotkeySettingsControl.xaml       |  8 ++++--
 .../Strings/en-us/Resources.resw              |  9 ++++++
 .../Views/FancyZonesPage.xaml                 | 28 ++++++++++++-------
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml
index aff5abfe53..7611e743e8 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml
@@ -23,15 +23,17 @@
                        Text="{x:Bind Header, Mode=OneTime}"
                        Foreground="{Binding Path=IsEnabled, ElementName=HotkeyTextBox, Converter={StaticResource ModuleEnabledToForegroundConverter}}"
                        />
-            
-            <TextBlock x:Name="TitleGlyph" Text="&#xE946;"
+
+            <TextBlock x:Uid="SettingsPage_SetShortcut_Glyph"
+                       x:Name="TitleGlyph" Text="&#xE946;"
                        FontFamily="Segoe MDL2 Assets"
                        Margin="4,4,0,0"
                        Foreground="{Binding Path=IsEnabled, ElementName=HotkeyTextBox, Converter={StaticResource ModuleEnabledToForegroundConverter}}"
                        />
         
         </StackPanel>
-        <TextBox x:Name="HotkeyTextBox"
+        <TextBox x:Uid="SettingsPage_SetShortcut"
+                 x:Name="HotkeyTextBox"
                  Margin="0,5,0,0"
                  IsReadOnly="True"
                  />
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index 3259fdb9e5..e6e32bb59c 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -288,6 +288,9 @@
   <data name="Appearance_GroupSettings.Text" xml:space="preserve">
     <value>Appearance</value>
   </data>
+  <data name="Fancyzones_Image.AutomationProperties.Name" xml:space="preserve">
+    <value>FancyZones windows</value>
+  </data>
   <data name="FancyZones_Description.Text" xml:space="preserve">
     <value>Create window layouts to help make multi-tasking easy.</value>
   </data>
@@ -309,6 +312,12 @@
   <data name="FancyZones_HotkeyEditorControl.Header" xml:space="preserve">
     <value>Open zones editor</value>
   </data>
+  <data name="SettingsPage_SetShortcut.AutomationProperties.Name" xml:space="preserve">
+    <value>Set Shortcut</value>
+  </data>
+  <data name="SettingsPage_SetShortcut_Glyph.AutomationProperties.Name" xml:space="preserve">
+    <value>Information Symbol</value>
+  </data>
   <data name="FancyZones_LaunchEditorButtonControl.Text" xml:space="preserve">
     <value>Launch zones editor</value>
   </data>
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
index 1ecdb29057..e4d4cf7c09 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
@@ -59,12 +59,14 @@
             <Button Margin="{StaticResource MediumTopMargin}"
                     Style="{StaticResource AccentButtonStyle}"
                     Command = "{x:Bind ViewModel.LaunchEditorEventHandler}"
-                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                    AutomationProperties.LabeledBy="{Binding ElementName=FancyZones_LaunchEditorButtonControl}">
                 <StackPanel Orientation="Horizontal">
                     <Viewbox Height="12" Width="12">
                         <PathIcon Data="M896 0v896H0V0h896zM768 768V128H128v640h640zM0 1920v-896h1920v896H0zm128-768v640h1664v-640H128zM1024 0h896v896h-896V0zm768 768V128h-640v640h640z"/>
                     </Viewbox>
                     <TextBlock Margin="12,0,0,0"
+                               Name="FancyZones_LaunchEditorButtonControl"
                                x:Uid="FancyZones_LaunchEditorButtonControl"/>
                 </StackPanel>
             </Button>
@@ -180,13 +182,15 @@
 
             </StackPanel>
 
-            <TextBlock x:Uid="FancyZones_ZoneHighlightColor"
+            <TextBlock Name="FancyZones_ZoneHighlightColor"
+                x:Uid="FancyZones_ZoneHighlightColor"
                 Margin="{StaticResource SmallTopMargin}"
                 Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
 
             <muxc:DropDownButton Margin="0,4,0,0"
                                  IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
-                                 Padding="4,4,8,4">
+                                 Padding="4,4,8,4"
+                                 AutomationProperties.LabeledBy="{Binding ElementName=FancyZones_ZoneHighlightColor}">
                 <Border Width="48"
                         CornerRadius="2"
                         Height="24">
@@ -196,7 +200,7 @@
                 </Border>
                 <muxc:DropDownButton.Flyout>
                     <Flyout>
-                        <muxc:ColorPicker x:Name="FancyZones_ZoneHighlightColor"
+                        <muxc:ColorPicker x:Name="FancyZones_ZoneHighlightColorPicker"
                               Margin="0,6,0,0"
                               HorizontalAlignment="Left"
                               IsColorSliderVisible="True"
@@ -212,13 +216,15 @@
 
             </muxc:DropDownButton>
 
-            <TextBlock x:Uid="FancyZones_InActiveColor"
+            <TextBlock Name="FancyZones_InActiveColor"
+                x:Uid="FancyZones_InActiveColor"
                 Margin="{StaticResource SmallTopMargin}"
                 Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
 
             <muxc:DropDownButton Margin="0,4,0,0"
                                  IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
-                                 Padding="4,4,8,4">
+                                 Padding="4,4,8,4"
+                                 AutomationProperties.LabeledBy="{Binding ElementName=FancyZones_InActiveColor}">
                 <Border Width="48" CornerRadius="2" Height="24">
                     <Border.Background>
                         <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}"/>
@@ -240,13 +246,15 @@
                 </muxc:DropDownButton.Flyout>
             </muxc:DropDownButton>
 
-            <TextBlock x:Uid="FancyZones_BorderColor"
+            <TextBlock Name="FancyZones_BorderColor"
+                x:Uid="FancyZones_BorderColor"
                 Margin="{StaticResource SmallTopMargin}"
                 Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
 
             <muxc:DropDownButton Margin="0,4,0,0"
                                  IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
-                                 Padding="4,4,8,4">
+                                 Padding="4,4,8,4"
+                                 AutomationProperties.LabeledBy="{Binding ElementName=FancyZones_BorderColor}">
                 <Border Width="48" CornerRadius="2" Height="24">
                     <Border.Background>
                         <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}"/>
@@ -254,7 +262,7 @@
                 </Border>
                 <muxc:DropDownButton.Flyout>
                     <Flyout>
-                        <muxc:ColorPicker x:Name="FancyZones_BorderColor"
+                        <muxc:ColorPicker x:Name="FancyZones_BorderColorPicker"
                               Margin="0,6,0,0"
                               HorizontalAlignment="Left"
                               IsColorSliderVisible="True"                             
@@ -307,7 +315,7 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image Source="ms-appx:///Assets/Modules/FancyZones.png" />
+                <Image x:Uid="Fancyzones_Image" Source="ms-appx:///Assets/Modules/FancyZones.png" />
             </Border>
 
             <StackPanel x:Name="LinksPanel"