Port Pull request #895 (a11y fixes)

XamlControlsGallery/ConnectedAnimationPages/CardPage.xaml

@@ -1,4 +1,4 @@
-<Page
+<Page
     x:Class="AppUIBasics.ConnectedAnimationPages.CardPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -17,16 +17,16 @@
             </GridView.ItemContainerStyle>
             <GridView.ItemTemplate>
                 <DataTemplate>
-                    <Grid x:Name="connectedElement" Height="250" Width="190">
+                    <Grid x:Name="connectedElement" Height="250" Width="190" AutomationProperties.Name="{Binding}">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="*" />
                         </Grid.RowDefinitions>
                         <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemAccentColor}" Height="100">
-                            <TextBlock Text="Header" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{ThemeResource TitleTextBlockStyle}" />
+                            <TextBlock Text="Item" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{ThemeResource TitleTextBlockStyle}" />
                         </Grid>
                         <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" Grid.Row="1">
-                            <TextBlock Text="Content" Margin="12" />
+                            <TextBlock Text="{Binding}" Margin="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                         </Grid>
                     </Grid>
                 </DataTemplate>

XamlControlsGallery/ConnectedAnimationPages/CollectionPage.xaml.cs

@@ -42,6 +42,9 @@ private async void collection_Loaded(object sender, RoutedEventArgs e)
 
                     await collection.TryStartConnectedAnimationAsync(animation, _storeditem, "connectedElement");
                 }
+
+                // Set focus on the list
+                collection.Focus(FocusState.Programmatic);
             }
         }
 

XamlControlsGallery/ConnectedAnimationPages/DetailedInfoPage.xaml

@@ -1,4 +1,4 @@
-<Page
+<Page
     x:Class="AppUIBasics.ConnectedAnimationPages.DetailedInfoPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -13,7 +13,7 @@
         </Grid.RowDefinitions>
 
         <Grid x:Name="headerBackground" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemControlAcrylicElementBrush}">
-            <Button Content="Go Back" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{ThemeResource SystemAccentColor}" Click="BackButton_Click" />
+            <Button x:Name="GoBackButton" Content="Go Back" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{ThemeResource SystemAccentColor}" Click="BackButton_Click" />
         </Grid>
 
         <Grid x:Name="headerContent" Margin="20,52,20,20">

XamlControlsGallery/ConnectedAnimationPages/DetailedInfoPage.xaml.cs

@@ -12,6 +12,13 @@ public sealed partial class DetailedInfoPage : Page
         public DetailedInfoPage()
         {
             this.InitializeComponent();
+            GoBackButton.Loaded += GoBackButton_Loaded;
+        }
+
+        private void GoBackButton_Loaded(object sender, RoutedEventArgs e)
+        {
+            // When we land in page, put focus on the back button
+            GoBackButton.Focus(FocusState.Programmatic);
         }
 
         protected override void OnNavigatedTo(NavigationEventArgs e)

XamlControlsGallery/ControlPages/ItemsRepeaterPage.xaml

@@ -30,15 +30,15 @@
         </DataTemplate>
 
         <DataTemplate x:Key="NormalItemTemplate" x:DataType="x:Int32">
-            <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemChromeLowColor}">
-                <TextBlock Text="{x:Bind}"/>
-            </Button>
+            <Border Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
+                <TextBlock Text="{x:Bind}" HorizontalAlignment="Center" VerticalAlignment="Center" />
+            </Border>
         </DataTemplate>
 
         <DataTemplate x:Key="AccentItemTemplate" x:DataType="x:Int32">
-            <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemAccentColor}">
-                <TextBlock Text="{x:Bind}"/>
-            </Button>
+            <Border  Background="{ThemeResource SystemControlBackgroundAccentBrush}" >
+                <TextBlock Text="{x:Bind}"  HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"/>
+            </Border>
         </DataTemplate>
 
         <DataTemplate x:Key="StringDataTemplate" x:DataType="x:String">
@@ -241,8 +241,10 @@ the following attributes: Height, MaxHeight, Length, MaxLength, Diameter, and Ma
                               Grid.Column="0"
                               Height="175"
                               Width="250">
-                    <ItemsRepeater x:Name="animatedScrollRepeater">
-                            <DataTemplate x:DataType="x:String">
+                    <ItemsRepeater x:Name="animatedScrollRepeater"
+                        GettingFocus="OnAnimatedScrollRepeaterGettingFocus"
+                        KeyDown="OnAnimatedScrollRepeaterKeyDown">
+                        <DataTemplate x:DataType="x:String">
                             <Button Content="{x:Bind}"
                                         Background="{x:Bind}"
                                         Click="OnAnimatedItemClicked"

XamlControlsGallery/ControlPages/ItemsRepeaterPage.xaml.cs

@@ -10,6 +10,7 @@
 using Microsoft.UI.Xaml.Automation.Peers;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Hosting;
+using Microsoft.UI.Xaml.Input;
 
 namespace AppUIBasics.ControlPages
 {
@@ -26,6 +27,7 @@ public sealed partial class ItemsRepeaterPage : ItemsPageBase
         private double AnimatedBtnHeight;
         private Thickness AnimatedBtnMargin;
         private Button LastSelectedColorButton;
+        private int PreviouslyFocusedAnimatedScrollRepeaterIndex = -1;
 
         public ItemsRepeaterPage()
         {
@@ -162,7 +164,7 @@ private void RadioBtn_Click(object sender, SelectionChangedEventArgs e)
         {
             string itemTemplateKey = string.Empty;
             var selected = (sender as Microsoft.UI.Xaml.Controls.RadioButtons).SelectedItem;
-            if(selected == null)
+            if (selected == null)
             {
                 // No point in continuing if selected element is null
                 return;
@@ -253,12 +255,29 @@ private void LayoutBtn_Click(object sender, RoutedEventArgs e)
         private void OnAnimatedItemGotFocus(object sender, RoutedEventArgs e)
         {
             var item = sender as FrameworkElement;
+
+            // Store the last focused Index so we can land back on it when focus leaves
+            // and comes back to the repeater.
+            PreviouslyFocusedAnimatedScrollRepeaterIndex = animatedScrollRepeater.GetElementIndex(sender as UIElement);
+
             item.StartBringIntoView(new BringIntoViewOptions()
             {
                 VerticalAlignmentRatio = 0.5,
                 AnimationDesired = true,
             });
         }
+        private void OnAnimatedScrollRepeaterGettingFocus(UIElement sender, GettingFocusEventArgs args)
+        {
+            // If we have a previously focused index and focus moving from outside the repeater to inside,
+            // then we can pick the previously focused index and land on that item again.
+            var lastFocus = args.OldFocusedElement as UIElement;
+            if (PreviouslyFocusedAnimatedScrollRepeaterIndex != -1 &&
+                lastFocus != null && animatedScrollRepeater.GetElementIndex(lastFocus) == -1)
+            {
+                var item = animatedScrollRepeater.TryGetElement(PreviouslyFocusedAnimatedScrollRepeaterIndex);
+                args.NewFocusedElement = item;
+            }
+        }
 
         private void OnAnimatedItemClicked(object sender, RoutedEventArgs e)
         {
@@ -412,6 +431,31 @@ private void UpdateSortAndFilter()
 
             peer.RaiseNotificationEvent(AutomationNotificationKind.Other, AutomationNotificationProcessing.ImportantMostRecent, $"Filtered recipes, {sortedFilteredTypes.Count()} results.", "RecipesFilteredNotificationActivityId");
         }
+
+        private void OnAnimatedScrollRepeaterKeyDown(object sender, KeyRoutedEventArgs e)
+        {
+            if (e.Handled != true)
+            {
+                var targetIndex = -1;
+                if (e.Key == Windows.System.VirtualKey.Home)
+                {
+                    targetIndex = PreviouslyFocusedAnimatedScrollRepeaterIndex != 0 ? 0 : -1;
+                }
+                else if (e.Key == Windows.System.VirtualKey.End)
+                {
+                    targetIndex = PreviouslyFocusedAnimatedScrollRepeaterIndex != animatedScrollRepeater.ItemsSourceView.Count - 1 ?
+                        animatedScrollRepeater.ItemsSourceView.Count - 1 : -1;
+                }
+
+                if (targetIndex != -1)
+                {
+                    var element = animatedScrollRepeater.GetOrCreateElement(targetIndex);
+                    element.StartBringIntoView();
+                    (element as Control).Focus(FocusState.Programmatic);
+                    e.Handled = true;
+                }
+            }
+        }
     }
 
     public class NestedCategory

XamlControlsGallery/ItemsPageBase.cs

@@ -1,4 +1,4 @@
-//*********************************************************
+//*********************************************************
 //
 // Copyright (c) Microsoft. All rights reserved.
 // THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF