From 392ca87dabe7cd3b140d28518be6445b2330aefa Mon Sep 17 00:00:00 2001
From: Alekhya <reddykalekhya@gmail.com>
Date: Mon, 24 Aug 2020 10:48:45 -0700
Subject: [PATCH] Fix Accessibility issues of the shortcut guide settings page
 (#6091)

* set the labeled by property of number box to point to the textblock heading so that 'Press duration before showing (ms)' string is read when the number box is highlighted

* Added comments on the accessibility issues that are dependent on the winui radiobuttons control

* Added information to the shortcut guide image on the right, it previously said only the word graphic
---
 .../Strings/en-us/Resources.resw              |  3 +++
 .../Views/ShortcutGuidePage.xaml              | 20 ++++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

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 bbc7713475..91a4597cb1 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
@@ -648,6 +648,9 @@
   <data name="About_ShortcutGuide.Text" xml:space="preserve">
     <value>About Shortcut Guide</value>
   </data>
+  <data name="Shortcut_Guide_Image.AutomationProperties.Name" xml:space="preserve">
+    <value>Shortcut Guide</value>
+  </data>
   <data name="General_Repository.Text" xml:space="preserve">
     <value>GitHub repository</value>
   </data>
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
index 6df946513a..07a217e754 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
@@ -56,7 +56,8 @@
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
 
-            <TextBlock x:Uid="ShortcutGuide_PressTime"
+            <TextBlock Name="ShortcutGuide_PressTime"
+                x:Uid="ShortcutGuide_PressTime"
                 Margin="{StaticResource SmallTopMargin}"
                 Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
 
@@ -68,7 +69,8 @@
                             Value="{x:Bind Mode=TwoWay, Path=ViewModel.PressTime}"
                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}" 
                             SmallChange="50" 
-                            LargeChange="100"/>
+                            LargeChange="100"
+                            AutomationProperties.LabeledBy="{Binding ElementName=ShortcutGuide_PressTime}"/>
 
             <StackPanel Orientation="Horizontal" Margin="{StaticResource MediumTopMargin}" Spacing="12">
                 <Slider x:Uid="ShortcutGuide_OverlayOpacity"
@@ -89,14 +91,18 @@
                     Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
             </StackPanel>
 
-            <TextBlock x:Uid="ShortcutGuide_Theme"
+            <!-- We cannot navigate to all the radio buttons using the arrow keys because of an XYNavigation issue in the RadioButtons control.
+            The screen reader does not read the heading when we tab into a radio button, even though the LabeledBy automation property is set.
+            Link to the issue in the winui repository - https://github.com/microsoft/microsoft-ui-xaml/issues/3156 -->
+            <TextBlock Name="ShortcutGuide_Theme"
+                x:Uid="ShortcutGuide_Theme"
                 Margin="{StaticResource SmallTopMargin}"
                 Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
-
             <muxc:RadioButtons IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                                SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}"
-                               Margin="{StaticResource HeaderTextTopMargin}">
-                <RadioButton x:Uid="GeneralPage_Radio_Theme_Dark"/>
+                               Margin="{StaticResource HeaderTextTopMargin}"
+                               AutomationProperties.LabeledBy="{Binding ElementName=ShortcutGuide_Theme}">
+                <RadioButton x:Uid="GeneralPage_Radio_Theme_Dark" />
                 <RadioButton x:Uid="GeneralPage_Radio_Theme_Light" />
                 <RadioButton x:Uid="GeneralPage_Radio_Theme_Default"/>
             </muxc:RadioButtons>
@@ -124,7 +130,7 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image Source="ms-appx:///Assets/Modules/ShortcutGuide.png" />
+                <Image x:Uid="Shortcut_Guide_Image" Source="ms-appx:///Assets/Modules/ShortcutGuide.png" />
             </Border>
 
             <StackPanel x:Name="LinksPanel"