javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): first class a11y support (#8909)

Browse Source
This commit is contained in:
Morten Sjøgren
2021-01-29 20:51:51 +01:00
committed by Nathan Walker
parent 577b1e9dad
commit f2e21a50a7
43 changed files with 2938 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/ui/styling/font-common.ts
View File

@@ -15,7 +15,7 @@ export abstract class Font implements FontDefinition {
return this.fontWeight === FontWeight.SEMI_BOLD || this.fontWeight === FontWeight.BOLD || this.fontWeight === '700' || this.fontWeight === FontWeight.EXTRA_BOLD || this.fontWeight === FontWeight.BLACK;
}
protected constructor(public readonly fontFamily: string, public readonly fontSize: number, public readonly fontStyle: FontStyle, public readonly fontWeight: FontWeight) {}
protected constructor(public readonly fontFamily: string, public readonly fontSize: number, public readonly fontStyle: FontStyle, public readonly fontWeight: FontWeight, public readonly fontScale: number) {}
public abstract getAndroidTypeface(): any /* android.graphics.Typeface */;
public abstract getUIFont(defaultFont: any /* UIFont */): any /* UIFont */;
@@ -23,6 +23,7 @@ export abstract class Font implements FontDefinition {
public abstract withFontStyle(style: string): Font;
public abstract withFontWeight(weight: string): Font;
public abstract withFontSize(size: number): Font;
public abstract withFontScale(scale: number): Font;
public static equals(value1: Font, value2: Font): boolean {
// both values are falsy

6
packages/core/ui/styling/font.android.ts
View File

@@ -15,7 +15,7 @@ export class Font extends FontBase {
private _typeface: android.graphics.Typeface;
constructor(family: string, size: number, style: 'normal' | 'italic', weight: FontWeight) {
super(family, size, style, weight);
super(family, size, style, weight, 1);
}
public withFontFamily(family: string): Font {
@@ -34,6 +34,10 @@ export class Font extends FontBase {
return new Font(this.fontFamily, size, this.fontStyle, this.fontWeight);
}
public withFontScale(scale: number): Font {
return new Font(this.fontFamily, this.fontSize, this.fontStyle, this.fontWeight);
}
public getAndroidTypeface(): android.graphics.Typeface {
if (!this._typeface) {
this._typeface = createTypeface(this);

2
packages/core/ui/styling/font.d.ts vendored
View File

@@ -5,6 +5,7 @@
public fontStyle: FontStyle;
public fontWeight: FontWeight;
public fontSize: number;
public fontScale: number;
public isBold: boolean;
public isItalic: boolean;
@@ -18,6 +19,7 @@
public withFontStyle(style: string): Font;
public withFontWeight(weight: string): Font;
public withFontSize(size: number): Font;
public withFontScale(scale: number): Font;
public static equals(value1: Font, value2: Font): boolean;
}

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

@@ -11,28 +11,32 @@ const DEFAULT_MONOSPACE = 'Courier New';
const SUPPORT_FONT_WEIGHTS = parseFloat(Device.osVersion) >= 10.0;
export class Font extends FontBase {
public static default = new Font(undefined, undefined, FontStyle.NORMAL, FontWeight.NORMAL);
public static default = new Font(undefined, undefined, FontStyle.NORMAL, FontWeight.NORMAL, 1);
private _uiFont: UIFont;
constructor(family: string, size: number, style: FontStyle, weight: FontWeight) {
super(family, size, style, weight);
constructor(family: string, size: number, style: FontStyle, weight: FontWeight, scale: number) {
super(family, size, style, weight, scale);
}
public withFontFamily(family: string): Font {
return new Font(family, this.fontSize, this.fontStyle, this.fontWeight);
return new Font(family, this.fontSize, this.fontStyle, this.fontWeight, this.fontScale);
}
public withFontStyle(style: FontStyle): Font {
return new Font(this.fontFamily, this.fontSize, style, this.fontWeight);
return new Font(this.fontFamily, this.fontSize, style, this.fontWeight, this.fontScale);
}
public withFontWeight(weight: FontWeight): Font {
return new Font(this.fontFamily, this.fontSize, this.fontStyle, weight);
return new Font(this.fontFamily, this.fontSize, this.fontStyle, weight, this.fontScale);
}
public withFontSize(size: number): Font {
return new Font(this.fontFamily, size, this.fontStyle, this.fontWeight);
return new Font(this.fontFamily, size, this.fontStyle, this.fontWeight, this.fontScale);
}
public withFontScale(scale: number): Font {
return new Font(this.fontFamily, this.fontSize, this.fontStyle, this.fontWeight, scale);
}
public getUIFont(defaultFont: UIFont): UIFont {

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

@@ -1422,6 +1422,27 @@ export const fontFamilyProperty = new InheritedCssProperty<Style, string>({
});
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;
}
}
},
valueConverter: (v) => parseFloat(v),
});
fontScaleProperty.register(Style);
export const fontSizeProperty = new InheritedCssProperty<Style, number>({
name: 'fontSize',
cssName: 'font-size',

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

@@ -11,6 +11,7 @@ import { Observable } from '../../../data/observable';
import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from '../../layouts/flexbox-layout';
import { Trace } from '../../../trace';
import { TextAlignment, TextDecoration, TextTransform, WhiteSpace, TextShadow } from '../../text-base';
import { AccessibilityLiveRegion, AccessibilityRole, AccessibilityState } from '../../../accessibility/accessibility-types';
import { BoxShadow } from '../box-shadow';
export interface CommonLayoutParams {
@@ -98,6 +99,7 @@ export class Style extends Observable implements StyleDefinition {
}
public fontInternal: Font;
public _fontScale: number;
public backgroundInternal: Background;
public rotate: number;
@@ -211,6 +213,16 @@ export class Style extends Observable implements StyleDefinition {
public flexWrapBefore: FlexWrapBefore;
public alignSelf: AlignSelf;
// Accessibility properties
public accessible: boolean;
public accessibilityHidden: boolean;
public accessibilityRole: AccessibilityRole;
public accessibilityState: AccessibilityState;
public accessibilityLiveRegion: AccessibilityLiveRegion;
public accessibilityLanguage: string;
public accessibilityMediaSession: boolean;
public accessibilityStep: number;
public PropertyBag: {
new (): { [property: string]: string };
prototype: { [property: string]: string };