Fixed some Large Font Accessibility issues on Vault and Send screens for Icons Display #1774 (#1785)

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;
+        }
     }
 }

src/App/Abstractions/IDeviceActionService.cs

@@ -45,5 +45,6 @@ namespace Bit.App.Abstractions
         long GetActiveTime();
         void CloseMainApp();
         bool SupportsFido2();
+        float GetSystemFontSizeScale();
     }
 }

src/App/Controls/CipherViewCell/CipherViewCell.xaml

@@ -12,10 +12,10 @@
     x:DataType="controls:CipherViewCellViewModel">
 
     <Grid.Resources>
-          <u:IconGlyphConverter x:Key="iconGlyphConverter"/>
+        <u:IconGlyphConverter x:Key="iconGlyphConverter"/>
-          <u:IconImageConverter x:Key="iconImageConverter"/>
+        <u:IconImageConverter x:Key="iconImageConverter"/>
-          <u:InverseBoolConverter x:Key="inverseBool" />
+        <u:InverseBoolConverter x:Key="inverseBool" />
-          <u:StringHasValueConverter x:Key="stringHasValueConverter" />
+        <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"
+        HorizontalOptions="Fill"
-        VerticalOptions="Center"
+        VerticalOptions="Fill"
-        WidthRequest="22"
+        Margin="9"
-        HeightRequest="22"
+        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>

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

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)

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">

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

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>

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>

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" />

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);
 			}
 		}
 	}

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;

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();
+        }
+    }
+}

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">