Improve accessibility (#310)

samples/LottieSamples/Scenarios/AsyncPage.xaml

@@ -74,6 +74,7 @@
                     <!--  AnimatedVisualPlayer A  -->
                     <muxc:AnimatedVisualPlayer x:Name="PlayerA"
                                                 AutoPlay="False"
+                                                AutomationProperties.Name="Lottie animation A"
                                                 PointerEntered="Players_PointerEntered"
                                                 Source="{StaticResource LightBulb}"/>
                 </Border>
@@ -84,6 +85,7 @@
                     <muxc:AnimatedVisualPlayer x:Name="PlayerB"
                                                 AutoPlay="False"
                                                 PointerEntered="Players_PointerEntered"
+                                                AutomationProperties.Name="Lottie animation B"
                                                 Source="{StaticResource LightBulb}"/>
                 </Border>
             </StackPanel>
@@ -98,8 +100,11 @@
                         <Setter Property="HorizontalAlignment" Value="Center"/>
                     </Style>
                 </Grid.Resources>
-                <TextBlock Grid.Column="0">A</TextBlock>
-                <TextBlock Grid.Column="1">B</TextBlock>
+                
+                <!-- The labels are relevant from a visual perspective as they are labeling the animations
+                     However, from a UIA perspective, those are only confusing -->
+                <TextBlock Grid.Column="0" AutomationProperties.AccessibilityView="Raw">A</TextBlock>
+                <TextBlock Grid.Column="1" AutomationProperties.AccessibilityView="Raw">B</TextBlock>
             </Grid>
 
             <!--#region OutroText-->

samples/LottieSamples/Scenarios/CodegenPage.xaml

@@ -51,7 +51,8 @@
 
             <Border Style="{StaticResource LottiePlayer}">
                 <!--  AnimatedVisualPlayer with AutoPlay  -->
-                <muxc:AnimatedVisualPlayer x:Name="Codegen_Player">
+                <muxc:AnimatedVisualPlayer x:Name="Codegen_Player"
+                                           AutomationProperties.Name="Lottie animation">
                     <!--  Codegen source with C# class: AnimatedVisuals/LottieLogo1.cs  -->
                     <animatedvisuals:LottieLogo1 />
                 </muxc:AnimatedVisualPlayer>

samples/LottieSamples/Scenarios/FallbackPage.xaml

@@ -29,7 +29,8 @@
             <Border Style="{StaticResource LottiePlayer}">
 
                 <!--  AnimatedVisualPlayer  -->
-                <muxc:AnimatedVisualPlayer x:Name="Fallback_Player">
+                <muxc:AnimatedVisualPlayer x:Name="Fallback_Player"
+                                           AutomationProperties.Name="Lottie animation">
                     <!--  LottieVisualSource with invalid UriSource to cause fallback  -->
                     <lottie:LottieVisualSource x:Name="Json_Source"
                                                UriSource="http://dots.microsoft.com/notarealfile.json" />
@@ -43,7 +44,8 @@
                                 Static Image for Fallback.
                                 Because this is in a DataTemplate, the Image is only instantiated when in the fallback case.
                             -->
-                            <Image Source="/Assets/LottieLogo1.png" />
+                            <Image Source="/Assets/LottieLogo1.png"
+                                   AutomationProperties.Name="Fallback image for animation"/>
                         </DataTemplate>
                     </muxc:AnimatedVisualPlayer.FallbackContent>
                 </muxc:AnimatedVisualPlayer>

samples/LottieSamples/Scenarios/JsonPage.xaml

@@ -43,7 +43,8 @@
 
             <Border Style="{StaticResource LottiePlayer}">
                 <!--  AnimatedVisualPlayer with AutoPlay  -->
-                <muxc:AnimatedVisualPlayer x:Name="Json_Player">
+                <muxc:AnimatedVisualPlayer x:Name="Json_Player"
+                                           AutomationProperties.Name="Lottie animation">
                     <!--  LottieVisualSource that parses a JSON Uri at run-time  -->
                     <lottie:LottieVisualSource x:Name="Json_Source"
                                                UriSource="ms-appx:///Assets/LottieLogo1.json" />

samples/LottieSamples/Scenarios/ModifyPage.xaml

@@ -35,7 +35,8 @@
             <!--#endregion-->
 
             <Border Style="{StaticResource LottiePlayer}">
-                <muxc:AnimatedVisualPlayer x:Name="Modified_Player">
+                <muxc:AnimatedVisualPlayer x:Name="Modified_Player"
+                                           AutomationProperties.Name="Lottie animation">
                     <!--
                         Codegen Source that has been generated from the modified LottieLogo1_Modified.json to dynamically
                         update color values defined in the After Effects file.

samples/LottieSamples/Scenarios/PlaybackPage.xaml

@@ -27,7 +27,8 @@
             <Border Style="{StaticResource LottiePlayer}">
                 <!--  AnimatedVisualPlayer  -->
                 <muxc:AnimatedVisualPlayer x:Name="Playback_Player"
-                                            AutoPlay="False">
+                                           AutoPlay="False"
+                                           AutomationProperties.Name="Lottie animation">
                     <!--  Codegen LottieVisualSource  -->
                     <animatedvisuals:LottieLogo1 />
                 </muxc:AnimatedVisualPlayer>
@@ -53,12 +54,14 @@
                 <!--  Play  -->
                 <Button x:Name="PlayButton"
                         Grid.Column="0"
+                        AutomationProperties.Name="Play animation"
                         Click="PlayButton_Click">
                     <SymbolIcon Symbol="Play" />
                 </Button>
                 <!--  Pause  -->
                 <ToggleButton x:Name="PauseButton"
                               Grid.Column="1"
+                              AutomationProperties.Name="Pause animation"
                               Checked="PauseButton_Checked"
                               IsThreeState="False"
                               Unchecked="PauseButton_Unchecked">
@@ -67,12 +70,14 @@
                 <!--  Resume  -->
                 <Button x:Name="StopButton"
                         Grid.Column="2"
+                        AutomationProperties.Name="Stop animation"
                         Click="StopButton_Click">
                     <SymbolIcon Symbol="Stop" />
                 </Button>
                 <!--  Reverse  -->
                 <Button x:Name="ReverseButton"
                         Grid.Column="3"
+                        AutomationProperties.Name="Play animation in reverse"
                         Click="ReverseButton_Click">
                     <SymbolIcon Symbol="Previous" />
                 </Button>

samples/LottieSamples/Scenarios/ProgressPage.xaml

@@ -28,7 +28,8 @@
             <Border Style="{StaticResource LottiePlayer}">
                 <!--  AnimatedVisualPlayer  -->
                 <muxc:AnimatedVisualPlayer x:Name="Progress_Player"
-                                            AutoPlay="False">
+                                           AutomationProperties.Name="Lottie animation"
+                                           AutoPlay="False">
                     <!--
                         LottieVisualSource that parses a JSON Uri at run-time
                         NOTE: The UriSource is set asynchronously in code-behind
@@ -56,11 +57,12 @@
                 <!--  Progress Slider: Scrub animation frames  -->
                 <Grid Grid.Column="1">
                     <StackPanel>
-                        <TextBlock Margin="40,20,0,5">Progress Slider</TextBlock>
+                        <TextBlock x:Name="ProgressSliderLabel" Margin="40,20,0,5">Progress Slider</TextBlock>
                         <Slider x:Name="ProgressSlider"
                                 Grid.Column="1"
                                 Maximum="1"
                                 Minimum="0"
+                                AutomationProperties.LabeledBy="{x:Bind ProgressSliderLabel}"
                                 StepFrequency="0.01"
                                 ValueChanged="ProgressSlider_ValueChanged" />
                     </StackPanel>

samples/LottieSamples/Scenarios/SegmentPage.xaml

@@ -55,6 +55,7 @@
                 <!--  AnimatedVisualPlayer with Pointer Event Handlers  -->
                 <muxc:AnimatedVisualPlayer x:Name="Segments_Player"
                                             AutoPlay="False"
+                                            AutomationProperties.Name="Lottie animation"
                                             PointerEntered="Segments_Player_PointerEntered"
                                             PointerExited="Segments_Player_PointerExited"
                                             PointerPressed="Segments_Player_PointerPressed">