[ColorPicker] Accessibility improvements (#12476)

* Set name to listview

* More fixes

* Narrator improvements

* Tab order

* Color order

* Color label fix

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

src/modules/colorPicker/ColorPickerUI/Controls/ColorFormatControl.xaml

@@ -3,7 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:p="clr-namespace:ColorPicker.Properties"
+             xmlns:p="clr-namespace:ColorPicker.Properties" xmlns:ui="http://schemas.modernwpf.com/2019"
              mc:Ignorable="d">
 
     <Border x:Name="MainBorder"
@@ -38,7 +38,7 @@
                        IsReadOnly="True"
                        VerticalAlignment="Center"
                        Padding="8"
-                     AutomationProperties.LabeledBy="{Binding ElementName=FormatNameTextBlock, Path=Text}"
+                       AutomationProperties.Name="{x:Static p:Resources.Color_Code}"
                      />
 
             <Button x:Name="CopyToClipboardButton"
@@ -52,8 +52,11 @@
                     AutomationProperties.HelpText="{Binding ElementName=ColorTextRepresentationTextBlock, Path=Text}"
                     FontSize="12"
                     Style="{StaticResource DefaultButtonStyle}"
-                    FontFamily="Segoe MDL2 Assets"
-                    Content="&#xE16F;" />
+                    FontFamily="Segoe MDL2 Assets">
+                <Button.Content>
+                    <TextBlock Text="&#xE16F;" AutomationProperties.Name="{x:Static p:Resources.Copy_to_clipboard}" />
+                </Button.Content>
+            </Button>
         </Grid>
         <Border.Effect>
             <DropShadowEffect BlurRadius="6" Opacity="0.24" ShadowDepth="1" />

src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml

@@ -8,9 +8,9 @@
              xmlns:ui="http://schemas.modernwpf.com/2019"
              mc:Ignorable="d"
              TabIndex="3"
+             AutomationProperties.Name="{x:Static p:Resources.Color_Palette}"
              FocusManager.IsFocusScope="True"
-             KeyboardNavigation.TabNavigation="Once"
-             >
+             KeyboardNavigation.TabNavigation="Once">
     <UserControl.Resources>
 
         <Style TargetType="Thumb"
@@ -252,7 +252,7 @@
                     ui:ControlHelper.CornerRadius="2,0,0,2"
                     Background="LightPink"
                     Click="ColorVariationButton_Click"
-                    AutomationProperties.Name="Color shade 1"
+                    AutomationProperties.Name="{x:Static p:Resources.Lightest_color}"
                     Style="{DynamicResource ColorShadeButtonStyle}"
                     ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
             <Button x:Name="colorVariation2Button"
@@ -260,7 +260,7 @@
                     ui:ControlHelper.CornerRadius="0"
                     Background="LightPink"
                     Click="ColorVariationButton_Click"
-                    AutomationProperties.Name="Color shade 2"
+                    AutomationProperties.Name="{x:Static p:Resources.Lighter_color}"
                     Style="{DynamicResource ColorShadeButtonStyle}"
                     ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
             <Button x:Name="colorVariation3Button"
@@ -268,7 +268,7 @@
                     ui:ControlHelper.CornerRadius="0"
                     Background="LightPink"
                     Click="ColorVariationButton_Click"
-                    AutomationProperties.Name="Color shade 3"
+                    AutomationProperties.Name="{x:Static p:Resources.Darker_color}"
                     Style="{DynamicResource ColorShadeButtonStyle}"
                     ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
             <Button x:Name="colorVariation4Button"
@@ -276,7 +276,7 @@
                     ui:ControlHelper.CornerRadius="0,2,2,0"
                     Background="LightPink"
                     Click="ColorVariationButton_Click"
-                    AutomationProperties.Name="Color shade 5"
+                    AutomationProperties.Name="{x:Static p:Resources.Darkest_color}"
                     Style="{DynamicResource ColorShadeButtonStyle}"
                     ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
 

src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml.cs

@@ -6,6 +6,7 @@ using System;
 using System.Globalization;
 using System.Text.RegularExpressions;
 using System.Windows;
+using System.Windows.Automation.Peers;
 using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Media;
@@ -41,6 +42,11 @@ namespace ColorPicker.Controls
             UpdateHueGradient(1, 1);
         }
 
+        protected override AutomationPeer OnCreateAutomationPeer()
+        {
+            return new ColorPickerAutomationPeer(this);
+        }
+
         public Color SelectedColor
         {
             get { return (Color)GetValue(SelectedColorProperty); }
@@ -372,4 +378,19 @@ namespace ColorPicker.Controls
             (sender as System.Windows.Controls.TextBox).SelectAll();
         }
     }
+
+#pragma warning disable SA1402 // File may only contain a single type
+    public class ColorPickerAutomationPeer : UserControlAutomationPeer
+#pragma warning restore SA1402 // File may only contain a single type
+    {
+        public ColorPickerAutomationPeer(ColorPickerControl owner)
+            : base(owner)
+        {
+        }
+
+        protected override string GetLocalizedControlTypeCore()
+        {
+            return ColorPicker.Properties.Resources.Color_Picker_Control;
+        }
+    }
 }

src/modules/colorPicker/ColorPickerUI/Properties/Resources.Designer.cs

@@ -78,6 +78,42 @@ namespace ColorPicker.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Color code.
+        /// </summary>
+        public static string Color_Code {
+            get {
+                return ResourceManager.GetString("Color_Code", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Color history.
+        /// </summary>
+        public static string Color_History {
+            get {
+                return ResourceManager.GetString("Color_History", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Color palette.
+        /// </summary>
+        public static string Color_Palette {
+            get {
+                return ResourceManager.GetString("Color_Palette", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Color picker control.
+        /// </summary>
+        public static string Color_Picker_Control {
+            get {
+                return ResourceManager.GetString("Color_Picker_Control", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Copied to clipboard.
         /// </summary>
@@ -105,6 +141,24 @@ namespace ColorPicker.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Color dark 1.
+        /// </summary>
+        public static string Darker_color {
+            get {
+                return ResourceManager.GetString("Darker_color", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Color dark 2.
+        /// </summary>
+        public static string Darkest_color {
+            get {
+                return ResourceManager.GetString("Darkest_color", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Green value.
         /// </summary>
@@ -132,6 +186,24 @@ namespace ColorPicker.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Color light 1.
+        /// </summary>
+        public static string Lighter_color {
+            get {
+                return ResourceManager.GetString("Lighter_color", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Color light 2.
+        /// </summary>
+        public static string Lightest_color {
+            get {
+                return ResourceManager.GetString("Lightest color", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Press the Color Picker icon to capture a color from your screen..
         /// </summary>

src/modules/colorPicker/ColorPickerUI/Properties/Resources.resx

@@ -364,4 +364,28 @@
   <data name="Select_color" xml:space="preserve">
     <value>Select color</value>
   </data>
+  <data name="Color_Code" xml:space="preserve">
+    <value>Color code</value>
+  </data>
+  <data name="Color_History" xml:space="preserve">
+    <value>Color history</value>
+  </data>
+  <data name="Color_Palette" xml:space="preserve">
+    <value>Color palette</value>
+  </data>
+  <data name="Color_Picker_Control" xml:space="preserve">
+    <value>Color picker control</value>
+  </data>
+  <data name="Darker_color" xml:space="preserve">
+    <value>Color dark 1</value>
+  </data>
+  <data name="Darkest_color" xml:space="preserve">
+    <value>Color dark 2</value>
+  </data>
+  <data name="Lighter_color" xml:space="preserve">
+    <value>Color light 1</value>
+  </data>
+  <data name="Lightest color" xml:space="preserve">
+    <value>Color light 2</value>
+  </data>
 </root>

src/modules/colorPicker/ColorPickerUI/Views/ColorEditorView.xaml

@@ -25,6 +25,7 @@
                          Padding="0"
                          TabIndex="2"
                          Width="64"
+                         AutomationProperties.Name="{x:Static p:Resources.Color_History}"
                          HorizontalAlignment="Center"
                          ui:FocusVisualHelper.UseSystemFocusVisuals="True"
                          ItemsSource="{Binding ColorsHistory}"
@@ -96,13 +97,16 @@
             <Button Width="64"
                     Height="32"
                     TabIndex="0"
-                    Content="&#xEF3C;"
                     Command="{Binding OpenColorPickerCommand}"
                     Background="Transparent"
                     FontFamily="Segoe MDL2 Assets"
                     ui:FocusVisualHelper.FocusVisualMargin="-1"
                     ToolTipService.ToolTip="{x:Static p:Resources.Pick_color}"
-                    AutomationProperties.Name="{x:Static p:Resources.Pick_color}"/>
+                    AutomationProperties.Name="{x:Static p:Resources.Pick_color}">
+                <Button.Content>
+                    <TextBlock Text="&#xEF3C;" AutomationProperties.Name="{x:Static p:Resources.Pick_color}" />
+                </Button.Content>
+            </Button>
         </Grid>
 
 
@@ -115,7 +119,7 @@
                     <ItemsControl IsTabStop="False"
                                   TabIndex="4"
                                   FocusManager.IsFocusScope="True"
-                                  KeyboardNavigation.TabNavigation="Once"   
+                                  KeyboardNavigation.TabNavigation="Continue"
                                   ItemsSource="{Binding ColorRepresentations}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>