Accessibility Fix: iOS keyboard focus (#84)

IeuanWalker · Mar 16, 2022 · 23b7b96 · 23b7b96
1 parent 76d18fa
commit 23b7b96
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 24 deletions.
diff --git a/DemoApp/DemoApp.Android/Resources/Resource.designer.cs b/DemoApp/DemoApp.Android/Resources/Resource.designer.cs
diff --git a/DemoApp/DemoApp.iOS/DemoApp.iOS.csproj b/DemoApp/DemoApp.iOS/DemoApp.iOS.csproj
@@ -58,8 +58,9 @@
     <ErrorReport>prompt</ErrorReport>
     <WarningLevel>4</WarningLevel>
     <MtouchArch>ARM64</MtouchArch>
-    <CodesignKey>iPhone Developer</CodesignKey>
+    <CodesignKey>Apple Development: Ieuan Walker (R4SVVV33HW)</CodesignKey>
     <CodesignEntitlements>Entitlements.plist</CodesignEntitlements>
+    <CodesignProvision>VS: WildCard Development</CodesignProvision>
   </PropertyGroup>
   <ItemGroup>
     <Compile Include="Main.cs" />

diff --git a/DemoApp/DemoApp/Pages/BasePage.xaml b/DemoApp/DemoApp/Pages/BasePage.xaml
@@ -2,7 +2,7 @@
 <ContentPage x:Class="DemoApp.Pages.BasePage"
              xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:breadcrumb="clr-namespace:Breadcrumb;assembly=Xamarin.Forms.Breadcrumb"
+             xmlns:breadcrumb="clr-namespace:Breadcrumb;assembly=Breadcrumb"
              xmlns:icons="clr-namespace:DemoApp.Styles"
              BackgroundColor="{DynamicResource BackgroundColour}">
     <ContentPage.ToolbarItems>
@@ -12,14 +12,34 @@
     </ContentPage.ToolbarItems>
     <ContentPage.Content>
         <StackLayout>
-            <!--  Breadcrumb  -->
+            <Label Text="Production version" TextColor="{DynamicResource Text}" />
+            <breadcrumb:Breadcrumb Margin="0"
+                                   Padding="0"
+                                   BackgroundColor="Transparent"
+                                   BreadcrumbBackgroundColor="#FCFCFC"
+                                   CornerRadius="6"
+                                   FontSize="Small"
+                                   LastBreadcrumbBackgroundColor="#FCFCFC"
+                                   LastBreadcrumbCornerRadius="6"
+                                   LastBreadcrumbTextColor="#595959"
+                                   TextColor="#086c6d"
+                                   VerticalOptions="Start">
+                <breadcrumb:Breadcrumb.Separator>
+                    <FontImageSource FontFamily="{StaticResource FontAwesome}"
+                                     Glyph="{x:Static icons:IconFont.ChevronRight}"
+                                     Size="12"
+                                     Color="#086c6d" />
+                </breadcrumb:Breadcrumb.Separator>
+            </breadcrumb:Breadcrumb>
+
+            <!-- Breadcrumb -->
             <Label Text="Default" TextColor="{DynamicResource Text}" />
             <breadcrumb:Breadcrumb Padding="15"
                                    FontSize="Small"
                                    TextColor="Red"
                                    VerticalOptions="Start" />
 
-            <!--  Dynamic test  -->
+            <!-- Dynamic test -->
             <Label Text="Dynamic Tests" TextColor="{DynamicResource Text}" />
             <breadcrumb:Breadcrumb Margin="0"
                                    Padding="0"
@@ -39,7 +59,7 @@
                 </breadcrumb:Breadcrumb.Separator>
             </breadcrumb:Breadcrumb>
 
-            <!--  FontImageSource  -->
+            <!-- FontImageSource -->
             <Label Text="Icon - FontAwesome" TextColor="{DynamicResource Text}" />
             <breadcrumb:Breadcrumb Padding="15" VerticalOptions="Start">
                 <breadcrumb:Breadcrumb.Separator>
@@ -50,23 +70,23 @@
                 </breadcrumb:Breadcrumb.Separator>
             </breadcrumb:Breadcrumb>
 
-            <!--  UriImageSource  -->
+            <!-- UriImageSource -->
             <Label Text="Image - URL" TextColor="{DynamicResource Text}" />
             <breadcrumb:Breadcrumb Padding="15" VerticalOptions="Start">
                 <breadcrumb:Breadcrumb.Separator>
                     <UriImageSource Uri="https://cdn.iconscout.com/icon/free/png-256/xamarin-4-599473.png" />
                 </breadcrumb:Breadcrumb.Separator>
             </breadcrumb:Breadcrumb>
 
-            <!--  FileImageSource  -->
+            <!-- FileImageSource -->
             <Label Text="Image - Embedded" TextColor="{DynamicResource Text}" />
             <breadcrumb:Breadcrumb Padding="15" VerticalOptions="Start">
                 <breadcrumb:Breadcrumb.Separator>
                     <FileImageSource File="exampleImage.png" />
                 </breadcrumb:Breadcrumb.Separator>
             </breadcrumb:Breadcrumb>
 
-            <!--  Lee test  -->
+            <!-- Lee test -->
             <Label Text="Lee Tests" TextColor="{DynamicResource Text}" />
             <breadcrumb:Breadcrumb Margin="0"
                                    Padding="0"
@@ -92,7 +112,7 @@
                 </breadcrumb:Breadcrumb.FirstBreadCrumb>
             </breadcrumb:Breadcrumb>
 
-            <!--  Page content  -->
+            <!-- Page content -->
             <StackLayout x:Name="BaseContent"
                          HorizontalOptions="FillAndExpand"
                          VerticalOptions="FillAndExpand" />

diff --git a/Settings.XamlStyler b/Settings.XamlStyler
@@ -0,0 +1,41 @@
+{
+  "AttributesTolerance": 2,
+  "KeepFirstAttributeOnSameLine": true,
+  "MaxAttributeCharactersPerLine": 0,
+  "MaxAttributesPerLine": 1,
+  "NewlineExemptionElements": "RadialGradientBrush, GradientStop, LinearGradientBrush, ScaleTransfom, SkewTransform, RotateTransform, TranslateTransform, Trigger, Condition, Setter",
+  "SeparateByGroups": false,
+  "AttributeIndentation": 0,
+  "AttributeIndentationStyle": 1,
+  "RemoveDesignTimeReferences": false,
+  "EnableAttributeReordering": true,
+  "AttributeOrderingRuleGroups": [
+    "x:Class",
+    "xmlns, xmlns:x",
+    "xmlns:*",
+    "x:Key, Key, x:Name, Name, x:Uid, Uid, Title",
+    "Grid.Row, Grid.RowSpan, Grid.Column, Grid.ColumnSpan, Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom",
+    "Width, Height, MinWidth, MinHeight, MaxWidth, MaxHeight",
+    "Margin, Padding, HorizontalAlignment, VerticalAlignment, HorizontalContentAlignment, VerticalContentAlignment, Panel.ZIndex",
+    "*:*, *",
+    "PageSource, PageIndex, Offset, Color, TargetName, Property, Value, StartPoint, EndPoint",
+    "mc:Ignorable, d:IsDataSource, d:LayoutOverrides, d:IsStaticText",
+    "Storyboard.*, From, To, Duration"
+  ],
+  "FirstLineAttributes": "",
+  "OrderAttributesByName": true,
+  "PutEndingBracketOnNewLine": false,
+  "RemoveEndingTagOfEmptyElement": true,
+  "SpaceBeforeClosingSlash": true,
+  "RootElementLineBreakRule": 0,
+  "ReorderVSM": 2,
+  "ReorderGridChildren": false,
+  "ReorderCanvasChildren": false,
+  "ReorderSetters": 0,
+  "FormatMarkupExtension": true,
+  "NoNewLineMarkupExtensions": "x:Bind, Binding",
+  "ThicknessSeparator": 2,
+  "ThicknessAttributes": "Margin, Padding, BorderThickness, ThumbnailClipMargin",
+  "FormatOnSave": true,
+  "CommentPadding": 1
+}
diff --git a/Src/Breadcrumb.Android/Resources/Resource.designer.cs b/Src/Breadcrumb.Android/Resources/Resource.designer.cs
diff --git a/Src/Breadcrumb/Breadcrumb.xaml.cs b/Src/Breadcrumb/Breadcrumb.xaml.cs
@@ -151,7 +151,7 @@ public Breadcrumb()
                     if (!page.Equals(pages.LastOrDefault()))
                     {
                         // Create breadcrumb
-                        Frame breadCrumb1 = BreadCrumbLabelCreator(page, false, page.Equals(pages.FirstOrDefault()));
+                        PancakeView breadCrumb1 = BreadCrumbLabelCreator(page, false, page.Equals(pages.FirstOrDefault()));
 
                         // Add tap gesture
                         if (IsNavigationEnabled)
@@ -184,7 +184,7 @@ public Breadcrumb()
                     BreadCrumbContainer.ChildAdded += AnimatedStack_ChildAdded;
 
                     // Create selectedPage title label
-                    Frame breadCrumb2 = BreadCrumbLabelCreator(page, true, page.Equals(pages.FirstOrDefault()));
+                    PancakeView breadCrumb2 = BreadCrumbLabelCreator(page, true, page.Equals(pages.FirstOrDefault()));
 
                     // Move BreadCrumb of selectedPage to start the animation
                     breadCrumb2.TranslationX = Application.Current.MainPage.Width;
@@ -208,7 +208,7 @@ public Breadcrumb()
         /// <param name="page"></param>
         /// <param name="isLast"></param>
         /// <param name="isFirst"></param>
-        private Frame BreadCrumbLabelCreator(Page page, bool isLast, bool isFirst)
+        private PancakeView BreadCrumbLabelCreator(Page page, bool isLast, bool isFirst)
         {
             // Create StackLayout to contain the label within a PancakeView
             StackLayout stackLayout = new()
@@ -242,27 +242,28 @@ private Frame BreadCrumbLabelCreator(Page page, bool isLast, bool isFirst)
                 stackLayout.Children.Add(breadcrumbText);
             }
 
+
+
+            Frame accessibilityContainer = !isLast && IsNavigationEnabled ? new BreadcrumbButton() : new Frame();
+            accessibilityContainer.HasShadow = false;
+            accessibilityContainer.BackgroundColor = Color.Transparent;
+            accessibilityContainer.Padding = 10;
+            accessibilityContainer.VerticalOptions = LayoutOptions.Center;
+            accessibilityContainer.Content = stackLayout;
+
             PancakeView container = new PancakeView
             {
-                Padding = 10,
-                VerticalOptions = LayoutOptions.Center,
                 CornerRadius = isLast ? LastBreadcrumbCornerRadius : CornerRadius,
-                Content = stackLayout,
+                Content = accessibilityContainer,
                 Margin = BreadcrumbMargin
             };
             container.SetBinding(BackgroundColorProperty, new Binding(isLast ? nameof(LastBreadcrumbBackgroundColor) : nameof(BreadcrumbBackgroundColor), source: new RelativeBindingSource(RelativeBindingSourceMode.FindAncestor, typeof(Breadcrumb))));
 
 
-            Frame accessibilityContainer = !isLast && IsNavigationEnabled ? new BreadcrumbButton() : new Frame();
-            accessibilityContainer.HasShadow = false;
-            accessibilityContainer.BackgroundColor = Color.Transparent;
-            accessibilityContainer.Padding = 0;
-            accessibilityContainer.Content = container;
-
             AutomationProperties.SetIsInAccessibleTree(accessibilityContainer, true);
             AutomationProperties.SetName(accessibilityContainer, page.Title);
 
-            return accessibilityContainer;
+            return container;
         }
 
         /// <summary>