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

This commit is contained in:
Federico Maccaroni 2022-02-17 19:34:22 -03:00 committed by GitHub
parent dbaa32b02c
commit ea471b0749
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 81 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -4,6 +4,8 @@ namespace Bit.App.Controls
{
public class IconLabel : Label
{
public bool ShouldUpdateFontSizeDynamicallyForAccesibility { get; set; }
public IconLabel()
{
switch (Device.RuntimePlatform)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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;

View File

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

View File

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