[Settings] Accessibility improvements (#12504)

* Leaving out unicode char from automationproperties.name

* Colorpicker page accesbility fixes

* Fix for toggleswitch

* Remove heading level 1 from navview items

* Fixes for redunant narrator announcements

* Added automationproperties.name to images in oobe

* Fix

Co-authored-by: Niels Laute <niels9001@hotmail.com>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml

@@ -21,7 +21,7 @@
             </TextBlock>
         </ToolTipService.ToolTip>
         <TextBox.Header>
-            <TextBlock>
+            <TextBlock AutomationProperties.Name="{x:Bind Header, Mode=OneTime}">
                     <Run Text="{x:Bind Header, Mode=OneTime}"/>
                     <Run Text="&#xE946;" FontFamily="Segoe MDL2 Assets"/>
             </TextBlock>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeAwake.xaml

@@ -15,6 +15,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+               AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeColorPicker.xaml

@@ -16,6 +16,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+                AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFancyZones.xaml

@@ -16,6 +16,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+                AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFileExplorer.xaml

@@ -15,6 +15,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+               AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml

@@ -16,6 +16,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+                AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeKBM.xaml

@@ -15,6 +15,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+               AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeOverview.xaml

@@ -14,6 +14,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+                AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobePowerRename.xaml

@@ -15,6 +15,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+                AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml

@@ -16,6 +16,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+               AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShortcutGuide.xaml

@@ -16,6 +16,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+                AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml

@@ -16,6 +16,7 @@
         </Grid.RowDefinitions>
 
         <Image Stretch="UniformToFill"
+               AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind ViewModel.PreviewImageSource}" />
 
         <ScrollViewer Grid.Row="1"

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -1383,4 +1383,7 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="Learn_More_Description.AutomationProperties.Name" xml:space="preserve">
     <value>Learn more</value>
   </data>
+    <data name="ColorPicker_ColorFormat_ToggleSwitch.AutomationProperties.Name" xml:space="preserve">
+    <value>Show format in editor</value>
+  </data>
 </root>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml

@@ -127,7 +127,7 @@
                 </ItemsControl.ItemContainerTransitions>
                 <ListView.ItemTemplate>
                     <DataTemplate>
-                        <Grid Width="466" Background="Transparent">
+                            <Grid Width="420" AutomationProperties.Name="{Binding Name}" Background="Transparent">
                             <!-- Disabled reordering by dragging
                             
                             <Interactivity:Interaction.Behaviors>
@@ -165,6 +165,7 @@
                             <ToggleSwitch IsOn="{Binding IsShown, Mode=TwoWay}"
                                           OnContent=""
                                           OffContent=""
+                                          x:Uid="ColorPicker_ColorFormat_ToggleSwitch"
                                           Grid.RowSpan="2"
                                           HorizontalAlignment="Right"
                                           Margin="0,0,-36,0"/>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml

@@ -100,42 +100,27 @@
                 <TextBlock x:Uid="General_Updates"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
+                
+                
+                
                 <StackPanel Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateUpToDateToVisibilityConverter}}">
-                    <StackPanel Orientation="Horizontal"
-                            Margin="{StaticResource SmallTopMargin}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=General_Version}">
-                        <TextBlock x:Name="General_Version_UpToDate" 
-                               x:Uid="General_Version" 
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                        <TextBlock Text="{Binding PowerToysVersion }"
-                               Margin="4,0,0,0"
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                    </StackPanel>
 
-                    <StackPanel Orientation="Horizontal"
-                            Margin="{StaticResource SmallTopMargin}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=General_VersionLastChecked}"
-                            Visibility="{Binding AutoUpdatesEnabled, Converter={StaticResource VisibleIfTrueConverter}}">
+                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
+                        <Run x:Uid="General_Version" />
+                        <Run Text="{Binding PowerToysVersion}"/>
+                    </TextBlock>
 
-                        <TextBlock x:Name="General_VersionLastChecked"
-                               x:Uid="General_VersionLastChecked"
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
+                        <Run x:Uid="General_VersionLastChecked" />
+                        <Run Text="{Binding UpdateCheckedDate, Mode=OneWay}"/>
+                    </TextBlock>
 
-                        <TextBlock Text="{Binding UpdateCheckedDate, Mode=OneWay}"
+                    <TextBlock x:Uid="General_CheckingForUpdates" Margin="{StaticResource SmallTopMargin}" Visibility="{Binding IsNewVersionDownloading, Converter={StaticResource VisibleIfTrueConverter}}"/>
+
+                    <TextBlock x:Uid="General_UpToDate"
+                               Margin="{StaticResource SmallTopMargin}"
                                Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
-                               Margin="6,0" />
-                    </StackPanel>
-
-                    <TextBlock x:Name="General_CheckingForUpdates"
-                           x:Uid="General_CheckingForUpdates"
-                           Margin="{StaticResource SmallTopMargin}"
-                           Visibility="{Binding IsNewVersionDownloading, Converter={StaticResource VisibleIfTrueConverter}}"/>
-
-                    <TextBlock x:Name="General_UpToDate"
-                           x:Uid="General_UpToDate"
-                           Margin="{StaticResource SmallTopMargin}"
-                           Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
-                           Visibility="{Binding IsNewVersionCheckedAndUpToDate, Converter={StaticResource VisibleIfTrueConverter}}"/>
+                               Visibility="{Binding IsNewVersionCheckedAndUpToDate, Converter={StaticResource VisibleIfTrueConverter}}"/>
 
                     <Button x:Uid="GeneralPage_CheckForUpdates"
                         Margin="{StaticResource SmallTopMargin}"
@@ -144,17 +129,12 @@
                         />
                 </StackPanel>
 
-                <StackPanel Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateReadyToDownloadToVisibilityConverter}}">
-                    <StackPanel Orientation="Horizontal"
-                            Margin="{StaticResource SmallTopMargin}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=General_Version}">
-                        <TextBlock x:Name="General_Version_ReadyToDownload" 
-                               x:Uid="General_Version" 
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                        <TextBlock Text="{Binding PowerToysVersion }"
-                               Margin="4,0,0,0"
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                    </StackPanel>
+                     <StackPanel Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateReadyToDownloadToVisibilityConverter}}">
+
+                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
+                        <Run x:Uid="General_Version" />
+                        <Run Text="{Binding PowerToysVersion}" />
+                    </TextBlock>
 
                     <StackPanel Orientation="Horizontal"
                             Margin="{StaticResource SmallTopMargin}"
@@ -178,16 +158,10 @@
                 </StackPanel>
 
                 <StackPanel Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateReadyToInstallToVisibilityConverter}}">
-                    <StackPanel Orientation="Horizontal"
-                            Margin="{StaticResource SmallTopMargin}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=General_Version}">
-                        <TextBlock x:Name="General_Version_ReadyToInstall" 
-                               x:Uid="General_Version" 
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                        <TextBlock Text="{Binding PowerToysVersion }"
-                               Margin="4,0,0,0"
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                    </StackPanel>
+                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
+                            <Run x:Uid="General_Version" />
+                            <Run Text="{Binding PowerToysVersion}"/>
+                    </TextBlock>
 
                     <StackPanel Orientation="Horizontal"
                             Margin="{StaticResource SmallTopMargin}"
@@ -206,17 +180,12 @@
                 </StackPanel>
 
                 <StackPanel Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateCannotDownloadToVisibilityConverter}}">
-                    <StackPanel Orientation="Horizontal"
-                            Margin="{StaticResource SmallTopMargin}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=General_Version}">
-                        <TextBlock x:Name="General_Version_Error" 
-                               x:Uid="General_Version" 
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                        <TextBlock Text="{Binding PowerToysVersion}"
-                               Margin="4,0,0,0"
-                               Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                    </StackPanel>
 
+                    <TextBlock Margin="{StaticResource SmallTopMargin}" Opacity="{Binding AutoUpdatesEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}">
+                        <Run x:Uid="General_Version"  />
+                        <Run Text="{Binding PowerToysVersion}"/>
+                    </TextBlock>
+                    
                     <StackPanel Orientation="Horizontal"
                             Margin="{StaticResource SmallTopMargin}"
                             AutomationProperties.LabeledBy="{Binding ElementName=General_Version}">
@@ -237,6 +206,8 @@
                         IsEnabled="{Binding IsDownloadAllowed}"/>
                 </StackPanel>
 
+                
+                
                 <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_AutoDownloadUpdates" 
                           Margin="{StaticResource MediumTopMargin}"
                           Visibility="{Binding Mode=TwoWay, Path=IsAdmin, Converter={StaticResource VisibleIfTrueConverter}}"

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml

@@ -255,6 +255,7 @@
                                 </StackPanel>
 
                                 <ToggleSwitch x:Uid="PowerLauncher_EnablePluginToggle"
+                                              AutomationProperties.HelpText="{x:Bind Path=Name}"
                                               x:Name="ToggleSwitch"
                                               OnContent=""
                                               OffContent=""

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml

@@ -30,61 +30,61 @@
         Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
         SelectionChanged="NavigationView_SelectionChanged">
             <winui:NavigationView.MenuItems>
-                <winui:NavigationViewItem x:Uid="Shell_General" helpers:NavHelper.NavigateTo="views:GeneralPage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_General" helpers:NavHelper.NavigateTo="views:GeneralPage">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xE713;"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_Awake" helpers:NavHelper.NavigateTo="views:AwakePage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_Awake" helpers:NavHelper.NavigateTo="views:AwakePage">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xEC32;"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
                 
-                <winui:NavigationViewItem x:Uid="Shell_ColorPicker" helpers:NavHelper.NavigateTo="views:ColorPickerPage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_ColorPicker" helpers:NavHelper.NavigateTo="views:ColorPickerPage">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xEF3C;"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_FancyZones" helpers:NavHelper.NavigateTo="views:FancyZonesPage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_FancyZones" helpers:NavHelper.NavigateTo="views:FancyZonesPage">
                     <winui:NavigationViewItem.Icon>
                         <PathIcon Data="M45,48H25.5V45H45V25.5H25.5v-3H45V3H25.5V0H48V48ZM22.5,48H3V45H22.5V3H3V0H25.5V48ZM0,48V0H3V48Z"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_PowerPreview" helpers:NavHelper.NavigateTo="views:PowerPreviewPage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_PowerPreview" helpers:NavHelper.NavigateTo="views:PowerPreviewPage">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xEC50;"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_ImageResizer" helpers:NavHelper.NavigateTo="views:ImageResizerPage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_ImageResizer" helpers:NavHelper.NavigateTo="views:ImageResizerPage">
                     <winui:NavigationViewItem.Icon>
                         <PathIcon Data="M0 768h1408v1152H0V768zm128 1024h870l-582-581-288 288v293zm1152 0v-102l-224-223-101 101 223 224h102zM128 896v421l288-287 448 447 192-191 224 224V896H128zm832 256q-26 0-45-19t-19-45q0-26 19-45t45-19q26 0 45 19t19 45q0 26-19 45t-45 19zm960-512V347l-339 338-90-90 338-339h-293V128h512v512h-128zm-768-512h256v128h-256V128zm-128 128H768V128h256v128zm-384 0H384V128h256v128zm-384 0H0V128h256v128zM128 640H0V384h128v256zm1920 128v256h-128V768h128zm-128 384h128v256h-128v-256zm0 384h128v256h-128v-256zm-384 256h256v128h-256v-128z"></PathIcon>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_KeyboardManager" helpers:NavHelper.NavigateTo="views:KeyboardManagerPage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_KeyboardManager" helpers:NavHelper.NavigateTo="views:KeyboardManagerPage">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xE765;"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_PowerRename" helpers:NavHelper.NavigateTo="views:PowerRenamePage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_PowerRename" helpers:NavHelper.NavigateTo="views:PowerRenamePage">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xE8AC;"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_PowerLauncher" helpers:NavHelper.NavigateTo="views:PowerLauncherPage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_PowerLauncher" helpers:NavHelper.NavigateTo="views:PowerLauncherPage">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xE773;"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
-                <winui:NavigationViewItem x:Uid="Shell_ShortcutGuide" helpers:NavHelper.NavigateTo="views:ShortcutGuidePage" AutomationProperties.HeadingLevel="Level1">
+                <winui:NavigationViewItem x:Uid="Shell_ShortcutGuide" helpers:NavHelper.NavigateTo="views:ShortcutGuidePage">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xEDA7;"/>
                     </winui:NavigationViewItem.Icon>