Fix WPF Gallery Narrator accessibility issues (Colors, Icons, User Dashboard)

Sample Applications/WPFGallery/Controls/IconDataField.xaml

@@ -0,0 +1,56 @@
+<UserControl x:Class="WPFGallery.Controls.IconDataField"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             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"
+             mc:Ignorable="d"
+             x:Name="Root"
+             Focusable="False"
+             Margin="0,0,0,12">
+
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="Auto" />
+        </Grid.ColumnDefinitions>
+
+        <!--  The value is shown by a TextBlock placed directly in the control's
+              content (not inside a ControlTemplate), so it is exposed to UI
+              Automation as real content and reachable by Narrator scan mode.  -->
+        <TextBlock Grid.Column="0"
+                   VerticalAlignment="Center"
+                   MinHeight="32"
+                   Padding="0,6"
+                   FontSize="14"
+                   Opacity="0.7"
+                   Foreground="{DynamicResource TextFillColorPrimaryBrush}"
+                   Text="{Binding Value, ElementName=Root}"
+                   TextWrapping="Wrap" />
+
+        <Button Grid.Column="1"
+                Padding="8"
+                FocusManager.IsFocusScope="True"
+                Click="CopyButton_Click"
+                AutomationProperties.Name="{Binding Label, ElementName=Root, StringFormat='{}Copy {0} to clipboard'}"
+                ToolTipService.ToolTip="Copy to clipboard">
+            <Grid>
+                <TextBlock x:Name="CopyGlyphTextBlock" FontFamily="{StaticResource SymbolThemeFontFamily}" Text="&#xE8C8;" />
+                <TextBlock x:Name="SuccessGlyphTextBlock" FontFamily="{StaticResource SymbolThemeFontFamily}" Text="&#xE73E;" Opacity="0" />
+            </Grid>
+            <Button.Triggers>
+                <EventTrigger RoutedEvent="Button.Click">
+                    <EventTrigger.Actions>
+                        <BeginStoryboard>
+                            <Storyboard BeginTime="00:00:00">
+                                <DoubleAnimation Duration="0:0:0.333" Storyboard.TargetName="CopyGlyphTextBlock" Storyboard.TargetProperty="Opacity" To="0" />
+                                <DoubleAnimation Duration="0:0:0.666" BeginTime="0:0:0.333" Storyboard.TargetName="SuccessGlyphTextBlock" Storyboard.TargetProperty="Opacity" To="1" />
+                                <DoubleAnimation Storyboard.TargetName="SuccessGlyphTextBlock" BeginTime="0:0:2" Duration="0:0:0.01" Storyboard.TargetProperty="Opacity" To="0" />
+                                <DoubleAnimation Storyboard.TargetName="CopyGlyphTextBlock" BeginTime="0:0:2.1" Duration="0:0:0.01" Storyboard.TargetProperty="Opacity" To="1" />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger.Actions>
+                </EventTrigger>
+            </Button.Triggers>
+        </Button>
+    </Grid>
+</UserControl>

Sample Applications/WPFGallery/Controls/IconDataField.xaml.cs

@@ -0,0 +1,63 @@
+using System.Windows.Automation;
+using System.Windows.Automation.Peers;
+
+namespace WPFGallery.Controls
+{
+    /// <summary>
+    /// Interaction logic for IconDataField.xaml.
+    /// Displays a single read-only icon metadata value (e.g. icon name, Unicode
+    /// code point or glyph) together with a button that copies the value to the
+    /// clipboard. The value is rendered by a TextBlock that lives in the
+    /// control's content tree, so it is exposed to UI Automation as content and
+    /// is reachable by Narrator scan mode.
+    /// </summary>
+    public partial class IconDataField : UserControl
+    {
+        public IconDataField()
+        {
+            InitializeComponent();
+        }
+
+        public string Value
+        {
+            get { return (string)GetValue(ValueProperty); }
+            set { SetValue(ValueProperty, value); }
+        }
+
+        public static readonly DependencyProperty ValueProperty =
+            DependencyProperty.Register(nameof(Value), typeof(string), typeof(IconDataField), new PropertyMetadata(string.Empty));
+
+        public string Label
+        {
+            get { return (string)GetValue(LabelProperty); }
+            set { SetValue(LabelProperty, value); }
+        }
+
+        public static readonly DependencyProperty LabelProperty =
+            DependencyProperty.Register(nameof(Label), typeof(string), typeof(IconDataField), new PropertyMetadata(string.Empty));
+
+        private void CopyButton_Click(object sender, RoutedEventArgs e)
+        {
+            if (string.IsNullOrEmpty(Value))
+            {
+                return;
+            }
+
+            try
+            {
+                Clipboard.SetText(Value);
+                AutomationPeer peer = UIElementAutomationPeer.CreatePeerForElement(this);
+                peer?.RaiseNotificationEvent(
+                    AutomationNotificationKind.Other,
+                    AutomationNotificationProcessing.ImportantMostRecent,
+                    $"{Label} Copied",
+                    "ButtonClickedActivity"
+                );
+            }
+            catch (Exception ex)
+            {
+                MessageBox.Show("Error copying to clipboard: " + ex.Message);
+            }
+        }
+    }
+}

Sample Applications/WPFGallery/Views/DesignGuidance/ColorsPage.xaml

@@ -5,7 +5,6 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
       xmlns:local="clr-namespace:WPFGallery.Views"
       xmlns:controls="clr-namespace:WPFGallery.Controls"
-      xmlns:sys="clr-namespace:System;assembly=mscorlib"
       mc:Ignorable="d" 
       Foreground="{DynamicResource TextFillColorPrimaryBrush}"
       d:DesignHeight="450" d:DesignWidth="800"
@@ -36,12 +35,12 @@
         </TextBlock>
 
           <ComboBox x:Name="PageSelector" SelectionChanged="OnSelectionChanged" Loaded="OnLoaded" Width="200" AutomationProperties.Name="Page Selector">
-            <sys:String>Text</sys:String>
-            <sys:String>Fill</sys:String>
-            <sys:String>Stroke</sys:String>
-            <sys:String>Background</sys:String>
-            <sys:String>Signal</sys:String>
-            <sys:String>HighContrast</sys:String>
+            <ComboBoxItem Content="Text" AutomationProperties.Name="Text" />
+            <ComboBoxItem Content="Fill" AutomationProperties.Name="Fill" />
+            <ComboBoxItem Content="Stroke" AutomationProperties.Name="Stroke" />
+            <ComboBoxItem Content="Background" AutomationProperties.Name="Background" />
+            <ComboBoxItem Content="Signal" AutomationProperties.Name="Signal" />
+            <ComboBoxItem Content="HighContrast" AutomationProperties.Name="HighContrast" />
           </ComboBox>
 
           <Frame x:Name="ColorSubpageNavigationFrame" />

Sample Applications/WPFGallery/Views/DesignGuidance/ColorsPage.xaml.cs

@@ -1,4 +1,4 @@
-using System.Windows.Documents;
+using System.Windows.Documents;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
 using WPFGallery.ViewModels;
@@ -46,6 +46,16 @@ private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
         private void OnLoaded(object sender, RoutedEventArgs e)
         {
             PageSelector.SelectedItem = PageSelector.Items[0];
+
+            // A ComboBox builds its item containers lazily, only when its drop-down
+            // is first opened. Until then there are no container automation peers, so
+            // WPF raises no UI Automation selection event when the selection changes
+            // via the arrow keys on the collapsed control and Narrator stays silent.
+            // Open and immediately close the drop-down once to realize the containers
+            // up front (PopupAnimation is None, so this is not visible). The containers
+            // persist after closing, so the native selection event then fires correctly.
+            PageSelector.IsDropDownOpen = true;
+            PageSelector.IsDropDownOpen = false;
         }
     }
 }

Sample Applications/WPFGallery/Views/DesignGuidance/IconsPage.xaml

@@ -18,61 +18,6 @@
     </i:Interaction.Triggers>
 
     <Page.Resources>
-        <Style x:Key="CodeValuePresenterStyle" TargetType="TextBlock">
-            <Setter Property="MinHeight" Value="32" />
-            <Setter Property="Padding" Value="0 0 0 4" />
-            <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
-            <Setter Property="Opacity" Value="0.7"/>
-            <Setter Property="Margin" Value="0,4,0,4" />
-            <Setter Property="FontSize" Value="14"/>
-        </Style>
-
-        <Style x:Key="IconData" TargetType="{x:Type ContentControl}">
-            <Setter Property="Margin" Value="0,0,0,12" />
-            <Setter Property="Focusable" Value="False"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="{x:Type ContentControl}">
-                        <Grid >
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
-                            </Grid.ColumnDefinitions>
-
-                            <TextBlock Padding="0,6" Grid.Column="0" VerticalAlignment="Center" Text="{TemplateBinding Content}" Style="{StaticResource CodeValuePresenterStyle}" TextWrapping="Wrap"/>
-                            <Button Grid.Column="1" 
-                                    Padding="8" 
-                                    FocusManager.IsFocusScope="True" 
-                                    Command="ApplicationCommands.Copy"
-                                    AutomationProperties.Name="{Binding Tag, StringFormat='{}Copy {0} to clipboard', RelativeSource={RelativeSource Mode=TemplatedParent}}"
-                                    ToolTipService.ToolTip="Copy to clipboard"
-                                    CommandParameter="{TemplateBinding Content}"
-                                    CommandTarget="{Binding RelativeSource={RelativeSource AncestorType=Page}}">
-                                <Grid>
-                                    <TextBlock x:Name="CopyGlyphTextBlock" FontFamily="{StaticResource SymbolThemeFontFamily}" Text="&#xE8C8;"/>
-                                    <TextBlock x:Name="SuccessGlyphTextBlock" FontFamily="{StaticResource SymbolThemeFontFamily}" Text="&#xE73E;" Opacity="0" />
-                                </Grid>
-                                <Button.Triggers>
-                                    <EventTrigger RoutedEvent="Button.Click">
-                                        <EventTrigger.Actions>
-                                            <BeginStoryboard>
-                                                <Storyboard BeginTime="00:00:00">
-                                                    <DoubleAnimation Duration="0:0:0.333" Storyboard.TargetName="CopyGlyphTextBlock" Storyboard.TargetProperty="Opacity" To="0" />
-                                                    <DoubleAnimation Duration="0:0:0.666" BeginTime="0:0:0.333" Storyboard.TargetName="SuccessGlyphTextBlock" Storyboard.TargetProperty="Opacity" To="1" />
-                                                    <DoubleAnimation Storyboard.TargetName="SuccessGlyphTextBlock" BeginTime="0:0:2" Duration="0:0:0.01" Storyboard.TargetProperty="Opacity" To="0" />
-                                                    <DoubleAnimation Storyboard.TargetName="CopyGlyphTextBlock" BeginTime="0:0:2.1" Duration="0:0:0.01" Storyboard.TargetProperty="Opacity" To="1" />
-                                                </Storyboard>
-                                            </BeginStoryboard>
-                                        </EventTrigger.Actions>
-                                    </EventTrigger>
-                                </Button.Triggers>
-                            </Button>
-                        </Grid>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-
         <Style x:Key="IconTagChipButtonStyle" TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
             <Setter Property="Cursor" Value="Hand" />
             <Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
@@ -298,13 +243,13 @@
                         <TextBlock Text="{Binding ViewModel.SelectedIcon.Character}" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="50" Margin="0,12,0,32" 
                                    AutomationProperties.Name="{Binding ViewModel.SelectedIcon.Name, StringFormat='{}{0} Icon'}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                         <TextBlock Text="Icon Name"/>
-                        <ContentControl Style="{StaticResource IconData}" Content="{Binding ViewModel.SelectedIcon.Name}" Tag="Icon Name"/>
+                        <controls:IconDataField Value="{Binding ViewModel.SelectedIcon.Name}" Label="Icon Name"/>
                         <TextBlock Text="Unicode point"/>
-                        <ContentControl Style="{StaticResource IconData}" Content="{Binding ViewModel.SelectedIcon.Code}" Tag="Unicode Point"/>
+                        <controls:IconDataField Value="{Binding ViewModel.SelectedIcon.Code}" Label="Unicode Point"/>
                         <TextBlock Text="Text glyph"/>
-                        <ContentControl Style="{StaticResource IconData}" Content="{Binding ViewModel.SelectedIcon.TextGlyph}" Tag="Text Glyph"/>
+                        <controls:IconDataField Value="{Binding ViewModel.SelectedIcon.TextGlyph}" Label="Text Glyph"/>
                         <TextBlock Text="Code glyph"/>
-                        <ContentControl Style="{StaticResource IconData}" Content="{Binding ViewModel.SelectedIcon.CodeGlyph}" Tag="Code Glyph"/>
+                        <controls:IconDataField Value="{Binding ViewModel.SelectedIcon.CodeGlyph}" Label="Code Glyph"/>
                         <TextBlock Text="Tags"
                                     Visibility="{Binding ElementName=TagsItemsControl, Path=HasItems, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                         <ItemsControl x:Name="TagsItemsControl"
@@ -332,7 +277,7 @@
                         </ItemsControl>
                         <TextBlock Text="XAML"/>
                         <TextBlock x:Name="XAMLCode" Text="{Binding ViewModel.SelectedIcon.TextGlyph, StringFormat='&lt;TextBlock FontFamily=&#x22;{{StaticResource SymbolThemeFontFamily}}&#x22; Text=&#x22;{0}&#x22;/&gt;'}" Visibility="Collapsed"/>
-                        <ContentControl Style="{StaticResource IconData}" Content="{Binding ElementName=XAMLCode, Path=Text}" Tag="XAML Code"/>
+                        <controls:IconDataField Value="{Binding ElementName=XAMLCode, Path=Text}" Label="XAML Code"/>
                     </StackPanel>
                 </ScrollViewer>
             </Grid>

Sample Applications/WPFGallery/Views/DesignGuidance/IconsPage.xaml.cs

@@ -1,7 +1,6 @@
-using System.Windows.Documents;
+using System.Windows.Documents;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
-using WPFGallery.Controls;
 using WPFGallery.ViewModels;
 
 namespace WPFGallery.Views
@@ -11,10 +10,6 @@ namespace WPFGallery.Views
     /// </summary>
     public partial class IconsPage : Page
     {
-        static IconsPage()
-        {
-            CommandManager.RegisterClassCommandBinding(typeof(IconsPage), new CommandBinding(ApplicationCommands.Copy, Copy_Content));
-        }
         public IconsPage(IconsPageViewModel viewModel)
         {
             InitializeComponent();
@@ -24,21 +19,6 @@ public IconsPage(IconsPageViewModel viewModel)
 
         public IconsPageViewModel ViewModel { get; }
 
-        public static void Copy_Content(object sender, RoutedEventArgs e)
-        {
-            if (!string.IsNullOrEmpty(((ExecutedRoutedEventArgs)e).Parameter.ToString()))
-            {
-                try
-                {
-                    Clipboard.SetText(((ExecutedRoutedEventArgs)e).Parameter.ToString());
-                }
-                catch (Exception ex)
-                {
-                    MessageBox.Show("Error copying to clipboard: " + ex.Message);
-                }
-            }
-        }
-
         private void IconsSearchBox_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
         {
             if (IconsSearchBox.Text.Length > 0)

Sample Applications/WPFGallery/Views/Samples/UserDashboardPage.xaml

@@ -189,7 +189,7 @@
                         </Grid>
                         <Slider
                             Margin="0,5,0,15"
-                            AutomationProperties.Name="Age"
+                            AutomationProperties.Name="{Binding ViewModel.EditableUser.Age, StringFormat='Age {0} years'}"
                             Maximum="62"
                             Minimum="21"
                             IsSnapToTickEnabled="True"