From ea471b074973b19f10e6479cd43834fb2a63d1a1 Mon Sep 17 00:00:00 2001
From: Federico Maccaroni <fedemkr@gmail.com>
Date: Thu, 17 Feb 2022 19:34:22 -0300
Subject: [PATCH] Fixed some Large Font Accessibility issues on Vault and Send
 screens for Icons Display #1774 (#1785)

---
 src/Android/Services/DeviceActionService.cs   |  6 +++++
 src/App/Abstractions/IDeviceActionService.cs  |  1 +
 .../CipherViewCell/CipherViewCell.xaml        | 23 +++++++++++--------
 .../CipherViewCell/CipherViewCell.xaml.cs     |  5 ++++
 src/App/Controls/IconLabel.cs                 |  2 ++
 .../Controls/SendViewCell/SendViewCell.xaml   |  3 ++-
 .../SendViewCell/SendViewCell.xaml.cs         |  5 ++++
 .../SendGroupingsPage/SendGroupingsPage.xaml  |  3 ++-
 .../Vault/GroupingsPage/GroupingsPage.xaml    |  3 ++-
 src/App/Styles/Base.xaml                      |  4 ++--
 src/iOS.Core/Renderers/CustomLabelRenderer.cs | 14 +++++++++--
 src/iOS.Core/Services/DeviceActionService.cs  |  7 ++++++
 .../Utilities/FontElementExtensions.cs        | 21 +++++++++++++++++
 src/iOS.Core/iOS.Core.csproj                  |  1 +
 14 files changed, 81 insertions(+), 17 deletions(-)
 create mode 100644 src/iOS.Core/Utilities/FontElementExtensions.cs

diff --git a/src/Android/Services/DeviceActionService.cs b/src/Android/Services/DeviceActionService.cs
index c83689c97..c0e5a79e1 100644
--- a/src/Android/Services/DeviceActionService.cs
+++ b/src/Android/Services/DeviceActionService.cs
@@ -938,5 +938,11 @@ namespace Bit.Droid.Services
                 Context.ClipboardService) as Android.Content.ClipboardManager;
             clipboardManager.PrimaryClip = ClipData.NewPlainText("bitwarden", text);
         }
+
+        public float GetSystemFontSizeScale()
+        {
+            var activity = CrossCurrentActivity.Current?.Activity as MainActivity;
+            return activity?.Resources?.Configuration?.FontScale ?? 1;
+        }
     }
 }
diff --git a/src/App/Abstractions/IDeviceActionService.cs b/src/App/Abstractions/IDeviceActionService.cs
index e9d2b7dfb..ea54a7b44 100644
--- a/src/App/Abstractions/IDeviceActionService.cs
+++ b/src/App/Abstractions/IDeviceActionService.cs
@@ -45,5 +45,6 @@ namespace Bit.App.Abstractions
         long GetActiveTime();
         void CloseMainApp();
         bool SupportsFido2();
+        float GetSystemFontSizeScale();
     }
 }
diff --git a/src/App/Controls/CipherViewCell/CipherViewCell.xaml b/src/App/Controls/CipherViewCell/CipherViewCell.xaml
index 9f2d6d2f4..2ed40b071 100644
--- a/src/App/Controls/CipherViewCell/CipherViewCell.xaml
+++ b/src/App/Controls/CipherViewCell/CipherViewCell.xaml
@@ -12,10 +12,10 @@
     x:DataType="controls:CipherViewCellViewModel">
 
     <Grid.Resources>
-          <u:IconGlyphConverter x:Key="iconGlyphConverter"/>
-          <u:IconImageConverter x:Key="iconImageConverter"/>
-          <u:InverseBoolConverter x:Key="inverseBool" />
-          <u:StringHasValueConverter x:Key="stringHasValueConverter" />
+        <u:IconGlyphConverter x:Key="iconGlyphConverter"/>
+        <u:IconImageConverter x:Key="iconImageConverter"/>
+        <u:InverseBoolConverter x:Key="inverseBool" />
+        <u:StringHasValueConverter x:Key="stringHasValueConverter" />
     </Grid.Resources>
 
     <Grid.RowDefinitions>
@@ -23,7 +23,7 @@
     </Grid.RowDefinitions>
 
     <Grid.ColumnDefinitions>
-        <ColumnDefinition Width="40" />
+        <ColumnDefinition Width="40" x:Name="_iconColumn" />
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="60" />
     </Grid.ColumnDefinitions>
@@ -35,6 +35,7 @@
         StyleClass="list-icon, list-icon-platform"
         IsVisible="{Binding ShowIconImage, Converter={StaticResource inverseBool}}"
         Text="{Binding Cipher, Converter={StaticResource iconGlyphConverter}}"
+        ShouldUpdateFontSizeDynamicallyForAccesibility="True"
         AutomationProperties.IsInAccessibleTree="False" />
 
     <ff:CachedImage
@@ -42,10 +43,12 @@
         BitmapOptimizations="True"
         ErrorPlaceholder="login.png"
         LoadingPlaceholder="login.png"
-        HorizontalOptions="Center"
-        VerticalOptions="Center"
-        WidthRequest="22"
-        HeightRequest="22"
+        HorizontalOptions="Fill"
+        VerticalOptions="Fill"
+        Margin="9"
+        MinimumWidthRequest="22"
+        MinimumHeightRequest="22"
+        Aspect="AspectFit"
         IsVisible="{Binding ShowIconImage}"
         Source="{Binding IconImageSource, Mode=OneTime}"
         AutomationProperties.IsInAccessibleTree="False" />
@@ -112,4 +115,4 @@
         AutomationProperties.IsInAccessibleTree="True"
         AutomationProperties.Name="{u:I18n Options}" />
 
-</controls:ExtendedGrid>
+</controls:ExtendedGrid>
\ No newline at end of file
diff --git a/src/App/Controls/CipherViewCell/CipherViewCell.xaml.cs b/src/App/Controls/CipherViewCell/CipherViewCell.xaml.cs
index 54b87c1e7..98f0805b6 100644
--- a/src/App/Controls/CipherViewCell/CipherViewCell.xaml.cs
+++ b/src/App/Controls/CipherViewCell/CipherViewCell.xaml.cs
@@ -1,5 +1,7 @@
 using System;
+using Bit.App.Abstractions;
 using Bit.Core.Models.View;
+using Bit.Core.Utilities;
 using Xamarin.Forms;
 
 namespace Bit.App.Controls
@@ -18,6 +20,9 @@ namespace Bit.App.Controls
         public CipherViewCell()
         {
             InitializeComponent();
+
+            var deviceActionService = ServiceContainer.Resolve<IDeviceActionService>("deviceActionService");
+            _iconColumn.Width = new GridLength(40 * deviceActionService.GetSystemFontSizeScale(), GridUnitType.Absolute);
         }
 
         public bool? WebsiteIconsEnabled
diff --git a/src/App/Controls/IconLabel.cs b/src/App/Controls/IconLabel.cs
index 79310f936..fce9159f6 100644
--- a/src/App/Controls/IconLabel.cs
+++ b/src/App/Controls/IconLabel.cs
@@ -4,6 +4,8 @@ namespace Bit.App.Controls
 {
     public class IconLabel : Label
     {
+        public bool ShouldUpdateFontSizeDynamicallyForAccesibility { get; set; }
+
         public IconLabel()
         {
             switch (Device.RuntimePlatform)
diff --git a/src/App/Controls/SendViewCell/SendViewCell.xaml b/src/App/Controls/SendViewCell/SendViewCell.xaml
index 2db1a40ce..527e731e6 100644
--- a/src/App/Controls/SendViewCell/SendViewCell.xaml
+++ b/src/App/Controls/SendViewCell/SendViewCell.xaml
@@ -19,7 +19,7 @@
     </Grid.RowDefinitions>
 
     <Grid.ColumnDefinitions>
-        <ColumnDefinition Width="40" />
+        <ColumnDefinition Width="40" x:Name="_iconColumn" />
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="60" />
     </Grid.ColumnDefinitions>
@@ -31,6 +31,7 @@
         VerticalOptions="Center"
         StyleClass="list-icon, list-icon-platform"
         Text="{Binding Send, Converter={StaticResource sendIconGlyphConverter}}"
+        ShouldUpdateFontSizeDynamicallyForAccesibility="True"
         AutomationProperties.IsInAccessibleTree="False" />
 
     <Grid RowSpacing="0" ColumnSpacing="0" Grid.Row="0" Grid.Column="1" VerticalOptions="Center" Padding="0, 7">
diff --git a/src/App/Controls/SendViewCell/SendViewCell.xaml.cs b/src/App/Controls/SendViewCell/SendViewCell.xaml.cs
index afa7c4922..0b01c1004 100644
--- a/src/App/Controls/SendViewCell/SendViewCell.xaml.cs
+++ b/src/App/Controls/SendViewCell/SendViewCell.xaml.cs
@@ -1,5 +1,7 @@
 using System;
+using Bit.App.Abstractions;
 using Bit.Core.Models.View;
+using Bit.Core.Utilities;
 using Xamarin.Forms;
 
 namespace Bit.App.Controls
@@ -18,6 +20,9 @@ namespace Bit.App.Controls
         public SendViewCell()
         {
             InitializeComponent();
+
+            var deviceActionService = ServiceContainer.Resolve<IDeviceActionService>("deviceActionService");
+            _iconColumn.Width = new GridLength(40 * deviceActionService.GetSystemFontSizeScale(), GridUnitType.Absolute);
         }
 
         public SendView Send
diff --git a/src/App/Pages/Send/SendGroupingsPage/SendGroupingsPage.xaml b/src/App/Pages/Send/SendGroupingsPage/SendGroupingsPage.xaml
index c83b6ad10..2c6905d25 100644
--- a/src/App/Pages/Send/SendGroupingsPage/SendGroupingsPage.xaml
+++ b/src/App/Pages/Send/SendGroupingsPage/SendGroupingsPage.xaml
@@ -54,7 +54,8 @@
                     <controls:IconLabel Text="{Binding Icon, Mode=OneWay}"
                                       HorizontalOptions="Start"
                                       VerticalOptions="Center"
-                                      StyleClass="list-icon, list-icon-platform">
+                                      StyleClass="list-icon, list-icon-platform"
+                                      ShouldUpdateFontSizeDynamicallyForAccesibility="True">
                         <controls:IconLabel.Effects>
                             <effects:FixedSizeEffect />
                         </controls:IconLabel.Effects>
diff --git a/src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml b/src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml
index cd9a3332a..3284050ae 100644
--- a/src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml
+++ b/src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml
@@ -50,7 +50,8 @@
                     <controls:IconLabel Text="{Binding Icon, Mode=OneWay}"
                                       HorizontalOptions="Start"
                                       VerticalOptions="Center"
-                                      StyleClass="list-icon, list-icon-platform">
+                                      StyleClass="list-icon, list-icon-platform"
+                                      ShouldUpdateFontSizeDynamicallyForAccesibility="True">
                         <controls:IconLabel.Effects>
                             <effects:FixedSizeEffect />
                         </controls:IconLabel.Effects>
diff --git a/src/App/Styles/Base.xaml b/src/App/Styles/Base.xaml
index bee9af4dc..e468b03a9 100644
--- a/src/App/Styles/Base.xaml
+++ b/src/App/Styles/Base.xaml
@@ -239,9 +239,9 @@
     <Style TargetType="Label"
            Class="list-icon"
            ApplyToDerivedTypes="True">
-        <Setter Property="WidthRequest"
+        <Setter Property="MinimumWidthRequest"
                 Value="26" />
-        <Setter Property="HeightRequest"
+        <Setter Property="MinimumHeightRequest"
                 Value="26" />
         <Setter Property="HorizontalTextAlignment"
                 Value="Center" />
diff --git a/src/iOS.Core/Renderers/CustomLabelRenderer.cs b/src/iOS.Core/Renderers/CustomLabelRenderer.cs
index 19db3c40e..f1ddc7e9e 100644
--- a/src/iOS.Core/Renderers/CustomLabelRenderer.cs
+++ b/src/iOS.Core/Renderers/CustomLabelRenderer.cs
@@ -1,5 +1,6 @@
 using System;
 using System.ComponentModel;
+using Bit.App.Controls;
 using Bit.iOS.Core.Renderers;
 using Bit.iOS.Core.Utilities;
 using UIKit;
@@ -48,10 +49,19 @@ namespace Bit.iOS.Core.Renderers
 			if (Element is null || Control is null)
 				return;
 
-			var pointSize = iOSHelpers.GetAccessibleFont<Label>(Element.FontSize);
+            var pointSize = iOSHelpers.GetAccessibleFont<Label>(Element.FontSize);
 			if (pointSize != null)
 			{
-				Control.Font = UIFont.FromDescriptor(Element.Font.ToUIFont().FontDescriptor, pointSize.Value);
+				Control.Font = UIFont.FromDescriptor(Element.ToUIFont().FontDescriptor, pointSize.Value);
+			}
+			// TODO: For now, I'm only doing this for IconLabel with setup just in case I break the whole app labels.
+			// We need to revisit this when we address Accessibility Large Font issues across the app
+            // to check if we can left it more generic like
+			// else if (Element.FontFamily != null)
+			else if (Element is IconLabel iconLabel && iconLabel.ShouldUpdateFontSizeDynamicallyForAccesibility)
+			{
+				var customFont = Element.ToUIFont();
+				Control.Font = new UIFontMetrics(UIFontTextStyle.Body.GetConstant()).GetScaledFont(customFont);
 			}
 		}
 	}
diff --git a/src/iOS.Core/Services/DeviceActionService.cs b/src/iOS.Core/Services/DeviceActionService.cs
index 2f7991951..76c46b066 100644
--- a/src/iOS.Core/Services/DeviceActionService.cs
+++ b/src/iOS.Core/Services/DeviceActionService.cs
@@ -587,6 +587,13 @@ namespace Bit.iOS.Core.Services
             throw new NotImplementedException();
         }
 
+        public float GetSystemFontSizeScale()
+        {
+            var tempHeight = 20f;
+            var scaledHeight = (float)new UIFontMetrics(UIFontTextStyle.Body.GetConstant()).GetScaledValue(tempHeight);
+            return scaledHeight / tempHeight;
+        }
+
         public class PickerDelegate : UIDocumentPickerDelegate
         {
             private readonly DeviceActionService _deviceActionService;
diff --git a/src/iOS.Core/Utilities/FontElementExtensions.cs b/src/iOS.Core/Utilities/FontElementExtensions.cs
new file mode 100644
index 000000000..d0ce86879
--- /dev/null
+++ b/src/iOS.Core/Utilities/FontElementExtensions.cs
@@ -0,0 +1,21 @@
+using UIKit;
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+using Xamarin.Forms.Platform.iOS;
+
+namespace Bit.iOS.Core.Utilities
+{
+    public static class FontElementExtensions
+    {
+        public static UIFont ToUIFont(this IFontElement fontElement)
+        {
+            var fontSize = fontElement.FontSize;
+            var fontAttributes = fontElement.FontAttributes;
+            var fontFamily = fontElement.FontFamily;
+
+            return fontFamily is null
+                ? Font.SystemFontOfSize(fontSize, fontAttributes).ToUIFont()
+                : Font.OfSize(fontFamily, fontSize).WithAttributes(fontAttributes).ToUIFont();
+        }
+    }
+}
diff --git a/src/iOS.Core/iOS.Core.csproj b/src/iOS.Core/iOS.Core.csproj
index a2353acf8..34cd2477e 100644
--- a/src/iOS.Core/iOS.Core.csproj
+++ b/src/iOS.Core/iOS.Core.csproj
@@ -192,6 +192,7 @@
     <Compile Include="Renderers\SelectableLabelRenderer.cs" />
     <Compile Include="Effects\ScrollEnabledEffect.cs" />
     <Compile Include="Services\ClipboardService.cs" />
+    <Compile Include="Utilities\FontElementExtensions.cs" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\App\App.csproj">