fixing a few a11y issues

tola9999 · Apr 5, 2022 · 0285e4a · 0285e4a
1 parent e97be1e
commit 0285e4a
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 28 deletions.
diff --git a/XamlControlsGallery/ConnectedAnimationPages/CardPage.xaml b/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>

diff --git a/XamlControlsGallery/ConnectedAnimationPages/CardPage.xaml.cs b/XamlControlsGallery/ConnectedAnimationPages/CardPage.xaml.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;

diff --git a/XamlControlsGallery/ConnectedAnimationPages/CollectionPage.xaml.cs b/XamlControlsGallery/ConnectedAnimationPages/CollectionPage.xaml.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Media.Animation;
@@ -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);
             }
         }
 

diff --git a/XamlControlsGallery/ConnectedAnimationPages/DetailedInfoPage.xaml b/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">

diff --git a/XamlControlsGallery/ConnectedAnimationPages/DetailedInfoPage.xaml.cs b/XamlControlsGallery/ConnectedAnimationPages/DetailedInfoPage.xaml.cs
@@ -1,4 +1,4 @@
-using Windows.UI.Xaml;
+using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Navigation;
 using AppUIBasics.ControlPages;
@@ -12,8 +12,15 @@ 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)
         {
             base.OnNavigatedTo(e);
@@ -25,8 +32,8 @@ protected override void OnNavigatedTo(NavigationEventArgs e)
             if (imageAnimation != null)
             {
                 // Connected animation + coordinated animation
-                imageAnimation.TryStart(detailedImage, new UIElement[] { coordinatedPanel });
-
+                imageAnimation.TryStart(detailedImage, new UIElement[] { coordinatedPanel });
+
             }
         }
 

diff --git a/XamlControlsGallery/ControlPages/ItemsRepeaterPage.xaml b/XamlControlsGallery/ControlPages/ItemsRepeaterPage.xaml
@@ -31,15 +31,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">
@@ -243,8 +243,10 @@ the following attributes: Height, MaxHeight, Length, MaxLength, Diameter, and Ma
                               Grid.Column="0"
                               Height="175"
                               Width="250">
-                    <muxc:ItemsRepeater x:Name="animatedScrollRepeater">
-                            <DataTemplate x:DataType="x:String">
+                    <muxc:ItemsRepeater x:Name="animatedScrollRepeater"
+                                        GettingFocus="OnAnimatedScrollRepeaterGettingFocus"
+                                        KeyDown="OnAnimatedScrollRepeaterKeyDown">
+                        <DataTemplate x:DataType="x:String">
                             <Button Content="{x:Bind}"
                                         Background="{x:Bind}"
                                         Click="OnAnimatedItemClicked"

diff --git a/XamlControlsGallery/ControlPages/ItemsRepeaterPage.xaml.cs b/XamlControlsGallery/ControlPages/ItemsRepeaterPage.xaml.cs
@@ -26,6 +26,7 @@ public sealed partial class ItemsRepeaterPage : ItemsPageBase
         private double AnimatedBtnHeight;
         private Thickness AnimatedBtnMargin;
         private Button LastSelectedColorButton;
+        private int PreviouslyFocusedAnimatedScrollRepeaterIndex = -1;
 
         public ItemsRepeaterPage()
         {
@@ -162,7 +163,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;
@@ -244,11 +245,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, Windows.UI.Xaml.Input.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)
@@ -402,7 +421,32 @@ private void UpdateSortAndFilter()
             var peer = FrameworkElementAutomationPeer.FromElement(VariedImageSizeRepeater);
 
             peer.RaiseNotificationEvent(AutomationNotificationKind.Other, AutomationNotificationProcessing.ImportantMostRecent, $"Filtered recipes, {sortedFilteredTypes.Count()} results.", "RecipesFilteredNotificationActivityId");
-        }
+        }
+
+        private void OnAnimatedScrollRepeaterKeyDown(object sender, Windows.UI.Xaml.Input.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
@@ -416,7 +460,6 @@ public NestedCategory(string catName, ObservableCollection<string> catItems)
         }
     }
 
-
     public class MyDataTemplateSelector : DataTemplateSelector
     {
         public DataTemplate Normal { get; set; }

diff --git a/XamlControlsGallery/ItemsPageBase.cs b/XamlControlsGallery/ItemsPageBase.cs
@@ -77,7 +77,7 @@ protected void OnItemGridViewKeyDown(object sender, KeyRoutedEventArgs e)
             }
         }
 
-        protected async void OnItemGridViewLoaded(object sender, RoutedEventArgs e)
+        protected void OnItemGridViewLoaded(object sender, RoutedEventArgs e)
         {
             if (_itemId != null)
             {

diff --git a/XamlControlsGallery/Navigation/NavigationRootPage.xaml.cs b/XamlControlsGallery/Navigation/NavigationRootPage.xaml.cs
@@ -384,7 +384,6 @@ private void OnControlsSearchBoxQuerySubmitted(AutoSuggestBox sender, AutoSugges
             {
                 var infoDataItem = args.ChosenSuggestion as ControlInfoDataItem;
                 var itemId = infoDataItem.UniqueId;
-                bool changedSelection = false;
                 EnsureItemIsVisibleInNavigation(infoDataItem.Title);
                 NavigationRootPage.RootFrame.Navigate(typeof(ItemPage), itemId);
             }

diff --git a/XamlControlsGallery/TabViewPages/TabViewWindowingSamplePage.xaml.cs b/XamlControlsGallery/TabViewPages/TabViewWindowingSamplePage.xaml.cs
@@ -121,7 +121,7 @@ public void AddTabToTabs(TabViewItem tab)
         }
 
         // Create a new Window once the Tab is dragged outside.
-        private async void Tabs_TabDroppedOutside(TabView sender, TabViewTabDroppedOutsideEventArgs args)
+        private void Tabs_TabDroppedOutside(TabView sender, TabViewTabDroppedOutsideEventArgs args)
         {
             MoveTabToNewWindow(args.Tab);
         }
@@ -163,7 +163,7 @@ private void Tabs_TabDragStarting(TabView sender, TabViewTabDragStartingEventArg
             args.Data.RequestedOperation = DataPackageOperation.Move;
         }
 
-        private async void Tabs_TabStripDrop(object sender, DragEventArgs e)
+        private void Tabs_TabStripDrop(object sender, DragEventArgs e)
         {
             // This event is called when we're dragging between different TabViews
             // It is responsible for handling the drop of the item into the second TabView