From c04400e7dff18c5f06785c359cf7676e1b650b7a Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Thu, 17 Apr 2025 15:51:40 +0200
Subject: [PATCH] [CmdPal] A11y improvements (#38840)

This PR introduces the following changes:

- Adding the right a11y labels - as a result, Accesibility Insights is no longer flagging any errors: https://github.com/microsoft/PowerToys/issues/38395
- Removing and tweaking a few animations, addressing: https://github.com/microsoft/PowerToys/issues/38438
- Localization improvements
---
 .../Controls/CommandBar.xaml                  | 39 ++---------
 .../Microsoft.CmdPal.UI/Controls/Tag.xaml     |  2 +
 .../ExtViews/ListPage.xaml                    | 24 +++----
 .../Microsoft.CmdPal.UI/Pages/ShellPage.xaml  | 64 ++++++++++++-------
 .../Strings/en-us/Resources.resw              | 12 +++-
 5 files changed, 69 insertions(+), 72 deletions(-)

diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
index 4a692fcc20..38ea017125 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
@@ -36,7 +36,7 @@
 
             <!--  Template for actions in the mode actions dropdown button  -->
             <DataTemplate x:Key="ContextMenuViewModelTemplate" x:DataType="viewmodels:CommandContextItemViewModel">
-                <Grid>
+                <Grid AutomationProperties.Name="{x:Bind Title, Mode=OneWay}">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="32" />
                         <ColumnDefinition Width="*" />
@@ -63,27 +63,6 @@
                         Text="{x:Bind RequestedShortcut, Mode=OneWay, Converter={StaticResource KeyChordToStringConverter}}" />
                 </Grid>
             </DataTemplate>
-
-            <animations:ImplicitAnimationSet x:Name="ShowAnimations">
-                <animations:OpacityAnimation
-                    From="0"
-                    To="1.0"
-                    Duration="0:0:0.340" />
-                <animations:ScaleAnimation
-                    From="0.85"
-                    To="1"
-                    Duration="0:0:0.350" />
-            </animations:ImplicitAnimationSet>
-            <animations:ImplicitAnimationSet x:Name="HideAnimations">
-                <animations:OpacityAnimation
-                    From="1.0"
-                    To="0"
-                    Duration="0:0:0.240" />
-                <animations:ScaleAnimation
-                    From="1"
-                    To="0.85"
-                    Duration="0:0:0.350" />
-            </animations:ImplicitAnimationSet>
         </ResourceDictionary>
     </UserControl.Resources>
 
@@ -135,9 +114,6 @@
         <Button
             x:Name="SettingsIconButton"
             x:Uid="SettingsButton"
-            animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
-            animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
-            ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
             Style="{StaticResource SubtleButtonStyle}"
             Tapped="SettingsIcon_Tapped"
             Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
@@ -167,10 +143,8 @@
             <Button
                 x:Name="PrimaryButton"
                 Padding="6,4,4,4"
-                animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
-                animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
-                ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                 x:Load="{x:Bind IsLoaded, Mode=OneWay}"
+                AutomationProperties.Name="{x:Bind ViewModel.PrimaryCommand.Name, Mode=OneWay}"
                 Background="Transparent"
                 Style="{StaticResource SubtleButtonStyle}"
                 Tapped="PrimaryButton_Tapped"
@@ -198,10 +172,8 @@
             <Button
                 x:Name="SecondaryButton"
                 Padding="6,4,4,4"
-                animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
-                animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
-                ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                 x:Load="{x:Bind IsLoaded, Mode=OneWay}"
+                AutomationProperties.Name="{x:Bind ViewModel.SecondaryCommand.Name, Mode=OneWay}"
                 Style="{StaticResource SubtleButtonStyle}"
                 Tapped="SecondaryButton_Tapped"
                 Visibility="{x:Bind ViewModel.HasSecondaryCommand, Mode=OneWay}">
@@ -245,13 +217,10 @@
                 x:Name="MoreCommandsButton"
                 x:Uid="MoreCommandsButton"
                 Padding="4"
-                animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
-                animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
-                ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                 Content="{ui:FontIcon Glyph=&#xE712;,
                                       FontSize=16}"
                 Style="{StaticResource SubtleButtonStyle}"
-                ToolTipService.ToolTip="Ctrl+k"
+                ToolTipService.ToolTip="Ctrl+K"
                 Visibility="{x:Bind ViewModel.ShouldShowContextMenu, Mode=OneWay}">
                 <Button.Flyout>
                     <Flyout Placement="TopEdgeAlignedRight">
diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml
index 54f3c69b23..1a522ebdc6 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml
@@ -38,6 +38,7 @@
             <Setter Property="IsTabStop" Value="False" />
             <Setter Property="HorizontalAlignment" Value="Center" />
             <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="AutomationProperties.AutomationControlType" Value="Custom" />
             <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
             <Setter Property="Padding" Value="{ThemeResource TagPadding}" />
             <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
@@ -56,6 +57,7 @@
                             Padding="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                            AutomationProperties.Name="{TemplateBinding Text}"
                             Background="{TemplateBinding Background}"
                             BackgroundSizing="{TemplateBinding BackgroundSizing}"
                             BorderBrush="{TemplateBinding BorderBrush}"
diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
index 395bd0ebe6..2a03983e1e 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
@@ -28,21 +28,22 @@
             NotEmptyValue="Visible" />
 
         <DataTemplate x:Key="TagTemplate" x:DataType="viewmodels:TagViewModel">
-            <ItemContainer>
-                <cpcontrols:Tag
-                    BackgroundColor="{x:Bind Background, Mode=OneWay}"
-                    FontSize="12"
-                    ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
-                    Icon="{x:Bind Icon, Mode=OneWay}"
-                    Text="{x:Bind Text, Mode=OneWay}"
-                    ToolTipService.ToolTip="{x:Bind ToolTip, Mode=OneWay}" />
-            </ItemContainer>
+            <cpcontrols:Tag
+                AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
+                BackgroundColor="{x:Bind Background, Mode=OneWay}"
+                FontSize="12"
+                ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
+                Icon="{x:Bind Icon, Mode=OneWay}"
+                Text="{x:Bind Text, Mode=OneWay}"
+                ToolTipService.ToolTip="{x:Bind ToolTip, Mode=OneWay}" />
         </DataTemplate>
 
         <!--  https://learn.microsoft.com/windows/apps/design/controls/itemsview#specify-the-look-of-the-items  -->
         <DataTemplate x:Key="ListItemViewModelTemplate" x:DataType="viewmodels:ListItemViewModel">
-
-            <Grid Padding="0,12,0,12" ColumnSpacing="12">
+            <Grid
+                Padding="0,12,0,12"
+                AutomationProperties.Name="{x:Bind Title, Mode=OneWay}"
+                ColumnSpacing="12">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="28" />
                     <ColumnDefinition Width="*" />
@@ -55,6 +56,7 @@
                     Width="20"
                     Height="20"
                     Margin="4,0,4,0"
+                    AutomationProperties.AccessibilityView="Raw"
                     Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                     SourceKey="{x:Bind Icon, Mode=OneWay}"
                     SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
index e8ee5b27bb..b45f685986 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
@@ -41,6 +41,7 @@
             <DataTemplate x:Key="TagTemplate" x:DataType="viewModels:TagViewModel">
                 <cpcontrols:Tag
                     HorizontalAlignment="Left"
+                    AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
                     BackgroundColor="{x:Bind Background, Mode=OneWay}"
                     FontSize="12"
                     ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
@@ -147,27 +148,36 @@
                         Visibility="{x:Bind ViewModel.CurrentPage.IsNested, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
                         <animations:Implicit.ShowAnimations>
                             <animations:OpacityAnimation
+                                EasingMode="EaseIn"
+                                EasingType="Cubic"
                                 From="0"
                                 To="1.0"
-                                Duration="0:0:0.340" />
+                                Duration="0:0:0.187" />
                             <animations:ScaleAnimation
+                                EasingMode="EaseIn"
+                                EasingType="Cubic"
                                 From="0.5"
                                 To="1"
-                                Duration="0:0:0.350" />
+                                Duration="0:0:0.187" />
                         </animations:Implicit.ShowAnimations>
                         <animations:Implicit.HideAnimations>
                             <animations:OpacityAnimation
+                                EasingMode="EaseOut"
+                                EasingType="Cubic"
                                 From="1.0"
                                 To="0"
-                                Duration="0:0:0.240" />
+                                Duration="0:0:0.187" />
                             <animations:ScaleAnimation
+                                EasingMode="EaseOut"
+                                EasingType="Cubic"
                                 From="1"
                                 To="0.5"
-                                Duration="0:0:0.350" />
+                                Duration="0:0:0.187" />
                         </animations:Implicit.HideAnimations>
                     </Image>
                     <Button
                         x:Name="BackButton"
+                        x:Uid="BackButton"
                         Margin="4,0,4,0"
                         Padding="4"
                         HorizontalAlignment="Center"
@@ -178,35 +188,42 @@
                         FontSize="16"
                         Style="{StaticResource SubtleButtonStyle}"
                         Tapped="BackButton_Tapped"
-                        ToolTipService.ToolTip="Back"
                         Visibility="{x:Bind ViewModel.CurrentPage.IsNested, Mode=OneWay}">
                         <animations:Implicit.ShowAnimations>
                             <animations:OpacityAnimation
+                                EasingMode="EaseIn"
+                                EasingType="Cubic"
                                 From="0"
                                 To="1.0"
-                                Duration="0:0:0.340" />
+                                Duration="0:0:0.333" />
                             <animations:ScaleAnimation
                                 From="0.5"
                                 To="1"
-                                Duration="0:0:0.350" />
+                                Duration="0:0:0.333" />
                             <animations:TranslationAnimation
                                 From="16,0,0"
                                 To="0,0,0"
-                                Duration="0:0:0.350" />
+                                Duration="0:0:0.333" />
                         </animations:Implicit.ShowAnimations>
                         <animations:Implicit.HideAnimations>
                             <animations:OpacityAnimation
+                                EasingMode="EaseOut"
+                                EasingType="Cubic"
                                 From="1.0"
                                 To="0"
-                                Duration="0:0:0.340" />
+                                Duration="0:0:0.333" />
                             <animations:ScaleAnimation
+                                EasingMode="EaseOut"
+                                EasingType="Cubic"
                                 From="1"
                                 To="0.5"
-                                Duration="0:0:0.350" />
+                                Duration="0:0:0.333" />
                             <animations:TranslationAnimation
+                                EasingMode="EaseOut"
+                                EasingType="Cubic"
                                 From="0,0,0"
                                 To="16,0,0"
-                                Duration="0:0:0.350" />
+                                Duration="0:0:0.187" />
                         </animations:Implicit.HideAnimations>
                     </Button>
                     <cpcontrols:IconBox
@@ -223,29 +240,29 @@
                             <animations:OpacityAnimation
                                 From="0"
                                 To="1.0"
-                                Duration="0:0:0.450" />
+                                Duration="0:0:0.333" />
                             <animations:ScaleAnimation
                                 From="0.8"
                                 To="1"
-                                Duration="0:0:0.500" />
+                                Duration="0:0:0.333" />
                             <animations:TranslationAnimation
                                 From="8,0,0"
                                 To="0,0,0"
-                                Duration="0:0:0.400" />
+                                Duration="0:0:0.187" />
                         </animations:Implicit.ShowAnimations>
                         <animations:Implicit.HideAnimations>
                             <animations:OpacityAnimation
                                 From="1.0"
                                 To="0"
-                                Duration="0:0:0.340" />
+                                Duration="0:0:0.333" />
                             <animations:ScaleAnimation
                                 From="1"
                                 To="0.8"
-                                Duration="0:0:0.350" />
+                                Duration="0:0:0.333" />
                             <animations:TranslationAnimation
                                 From="0,0,0"
                                 To="8,0,0"
-                                Duration="0:0:0.350" />
+                                Duration="0:0:0.187" />
                         </animations:Implicit.HideAnimations>
                     </cpcontrols:IconBox>
                 </StackPanel>
@@ -272,13 +289,13 @@
                     <animations:OpacityAnimation
                         From="0"
                         To="1.0"
-                        Duration="0:0:0.340" />
+                        Duration="0:0:0.333" />
                 </animations:Implicit.ShowAnimations>
                 <animations:Implicit.HideAnimations>
                     <animations:OpacityAnimation
                         From="1.0"
                         To="0"
-                        Duration="0:0:0.340" />
+                        Duration="0:0:0.333" />
                 </animations:Implicit.HideAnimations>
             </ProgressBar>
 
@@ -313,21 +330,21 @@
                         <animations:OpacityAnimation
                             From="0"
                             To="1.0"
-                            Duration="0:0:0.270" />
+                            Duration="0:0:0.187" />
                         <animations:TranslationAnimation
                             From="24,0,0"
                             To="0,0,0"
-                            Duration="0:0:0.280" />
+                            Duration="0:0:0.187" />
                     </animations:Implicit.ShowAnimations>
                     <animations:Implicit.HideAnimations>
                         <animations:OpacityAnimation
                             From="1.0"
                             To="0"
-                            Duration="0:0:0.180" />
+                            Duration="0:0:0.187" />
                         <animations:TranslationAnimation
                             From="0,0,0"
                             To="24,0,0"
-                            Duration="0:0:0.220" />
+                            Duration="0:0:0.187" />
                     </animations:Implicit.HideAnimations>
                     <Grid Margin="12">
                         <Grid.RowDefinitions>
@@ -343,6 +360,7 @@
                             MinHeight="64"
                             MaxHeight="96"
                             HorizontalAlignment="Center"
+                            AutomationProperties.AccessibilityView="Raw"
                             SourceKey="{x:Bind ViewModel.Details.HeroImage, Mode=OneWay}"
                             SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}"
                             Visibility="{x:Bind HasHeroImage, Mode=OneWay}" />
diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw b/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw
index 642b3dcc11..9ffc14002b 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw
@@ -379,9 +379,6 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
   <data name="Settings_GeneralPage_NavigationViewItem_Extensions.Content" xml:space="preserve">
     <value>Extensions</value>
   </data>
-  <data name="MoreCommandsButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
-    <value>More commands</value>
-  </data>
   <data name="SettingsButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
     <value>Open Command Palette settings</value>
   </data>
@@ -397,4 +394,13 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
   <data name="Settings_GeneralPage_ShowSystemTrayIcon_SettingsCard.Description" xml:space="preserve">
     <value>Choose if Command Palette is visible in the system tray</value>
   </data>
+  <data name="BackButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Back</value>
+  </data>
+  <data name="BackButton.[using:Microsoft.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
+    <value>Back</value>
+  </data>
+  <data name="MoreCommandsButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>More</value>
+  </data>
 </root>
\ No newline at end of file