javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 18:12:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ios): support for a11y font scale (#10207)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2023-03-23 00:13:46 +02:00
committed by GitHub
parent ab436dbfe6
commit 95f3772e77
6 changed files with 50 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/automated/src/ui/styling/style-properties-tests.ios.ts Normal file
View File

@ -0,0 +1,17 @@
import * as TKUnit from '../../tk-unit';
import * as helper from '../../ui-helper';
import { Label } from '@nativescript/core';
export function test_native_font_size_with_a11y_font_scale() {
const page = helper.getCurrentPage();
const testView = new Label();
const deviceFontScaleMock = 4.0;
page.content = testView;
testView.style._fontScale = deviceFontScaleMock;
const nativeFontSize = testView.nativeTextViewProtected.font.pointSize;
const expectedNativeFontSize = testView.style.fontInternal.fontSize * deviceFontScaleMock;
TKUnit.assertEqual(nativeFontSize, expectedNativeFontSize, 'View font size does not respect a11y font scaling');
}

15
packages/core/accessibility/accessibility-properties.ts
View File

@ -31,18 +31,9 @@ export const accessibilityEnabledProperty = new CssProperty<Style, boolean>({
});
accessibilityEnabledProperty.register(Style);
const accessibilityHiddenPropertyName = 'accessibilityHidden';
const accessibilityHiddenCssName = 'a11y-hidden';
export const accessibilityHiddenProperty = global.isIOS
? new InheritedCssProperty({
name: accessibilityHiddenPropertyName,
cssName: accessibilityHiddenCssName,
valueConverter: booleanConverter,
})
: new CssProperty({
name: accessibilityHiddenPropertyName,
cssName: accessibilityHiddenCssName,
export const accessibilityHiddenProperty = new (global.isIOS ? InheritedCssProperty : CssProperty)({
name: 'accessibilityHidden',
cssName: 'a11y-hidden',
valueConverter: booleanConverter,
});
accessibilityHiddenProperty.register(Style);

3
packages/core/ui/styling/font.ios.ts
View File

@ -91,7 +91,8 @@ export class Font extends FontBase {
getUIFont(defaultFont: UIFont): UIFont {
return getUIFontCached({
fontFamily: parseFontFamily(this.fontFamily),
fontSize: this.fontSize || defaultFont.pointSize,
// Apply a11y scale and calculate proper font size (avoid applying multiplier to native point size as it's messing calculations)
fontSize: this.fontSize ? this.fontSize * this.fontScale : defaultFont.pointSize,
fontWeight: getNativeFontWeight(this.fontWeight),
fontVariationSettings: this.fontVariationSettings,
isBold: this.isBold,

15
packages/core/ui/styling/style-properties.ts
View File

@ -1329,20 +1329,7 @@ fontFamilyProperty.register(Style);
export const fontScaleProperty = new InheritedCssProperty<Style, number>({
name: '_fontScale',
cssName: '_fontScale',
affectsLayout: global.isIOS,
valueChanged: (target, oldValue, newValue) => {
if (global.isIOS) {
if (target.viewRef['handleFontSize'] === true) {
return;
}
const currentFont = target.fontInternal || Font.default;
if (currentFont.fontScale !== newValue) {
const newFont = currentFont.withFontScale(newValue);
target.fontInternal = Font.equals(Font.default, newFont) ? unsetValue : newFont;
}
}
},
defaultValue: 1.0,
valueConverter: (v) => parseFloat(v),
});
fontScaleProperty.register(Style);

3
packages/core/ui/styling/style/index.ts
View File

@ -105,6 +105,9 @@ export class Style extends Observable implements StyleDefinition {
}
public fontInternal: Font;
/**
* This property ensures inheritance of a11y scale among views.
*/
public _fontScale: number;
public backgroundInternal: Background;

26
packages/core/ui/text-base/index.ios.ts
View File

@ -4,16 +4,15 @@ import { CSSShadow } from '../styling/css-shadow';
// Requires
import { Font } from '../styling/font';
import { TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, textShadowProperty, letterSpacingProperty, lineHeightProperty, resetSymbol } from './text-base-common';
import { TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, textShadowProperty, letterSpacingProperty, lineHeightProperty, maxLinesProperty, resetSymbol } from './text-base-common';
import { Color } from '../../color';
import { FormattedString } from './formatted-string';
import { Span } from './span';
import { colorProperty, fontInternalProperty, Length } from '../styling/style-properties';
import { colorProperty, fontInternalProperty, fontScaleProperty, Length } from '../styling/style-properties';
import { isString, isNullOrUndefined } from '../../utils/types';
import { iOSNativeHelper } from '../../utils';
import { Trace } from '../../trace';
import { CoreTypes } from '../../core-types';
import { maxLinesProperty } from './text-base-common';
export * from './text-base-common';
@ -188,7 +187,26 @@ export class TextBase extends TextBaseCommon {
if (!(value instanceof Font) || !this.formattedText) {
let nativeView = this.nativeTextViewProtected;
nativeView = nativeView instanceof UIButton ? nativeView.titleLabel : nativeView;
nativeView.font = value instanceof Font ? value.getUIFont(nativeView.font) : value;
if (value instanceof Font) {
// Apply a11y font scale if not set
if (value.fontScale !== this.style._fontScale) {
value.fontScale = this.style._fontScale;
}
nativeView.font = value.getUIFont(nativeView.font);
} else {
nativeView.font = value;
}
}
}
[fontScaleProperty.setNative](value: number) {
const nativeView = this.nativeTextViewProtected instanceof UIButton ? this.nativeTextViewProtected.titleLabel : this.nativeTextViewProtected;
const currentFont = this.style.fontInternal || Font.default.withFontSize(nativeView.font.pointSize);
if (currentFont.fontScale !== value) {
const newFont = currentFont.withFontScale(value);
this.style.fontInternal = newFont;
this.requestLayout();
}
}