From 3bd6d9b01e41dd0fa7379334dff925bf852cf8ef Mon Sep 17 00:00:00 2001 From: farfromrefuge Date: Sat, 10 Feb 2024 18:25:04 +0000 Subject: [PATCH] perf: disable accessibility for layout views (#10482) a11y is enabled by default on controls still, this just disables on layouts alone as unnecessary. It can be enabled on a per layout view basis if needed anytime. --- .../core/accessibility/accessibility-properties.ts | 1 + packages/core/ui/core/view-base/index.ts | 2 -- packages/core/ui/core/view/index.android.ts | 14 ++++++++++++-- packages/core/ui/core/view/index.d.ts | 5 ----- packages/core/ui/core/view/index.ios.ts | 10 ++++++++-- packages/core/ui/core/view/view-common.ts | 6 ++++-- 6 files changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/core/accessibility/accessibility-properties.ts b/packages/core/accessibility/accessibility-properties.ts index ba2860c2c6..9750f35454 100644 --- a/packages/core/accessibility/accessibility-properties.ts +++ b/packages/core/accessibility/accessibility-properties.ts @@ -26,6 +26,7 @@ function makePropertyEnumConverter(enumValues) { export const accessibilityEnabledProperty = new CssProperty({ name: 'accessible', + defaultValue: true, cssName: 'a11y-enabled', valueConverter: booleanConverter, }); diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts index 2d091fa28c..e38b38d24d 100644 --- a/packages/core/ui/core/view-base/index.ts +++ b/packages/core/ui/core/view-base/index.ts @@ -2,7 +2,6 @@ import { AlignSelf, FlexGrow, FlexShrink, FlexWrapBefore, Order } from '../../la import { Page } from '../../page'; import { CoreTypes } from '../../../core-types'; import { Property, CssProperty, CssAnimationProperty, InheritedProperty, clearInheritedProperties, propagateInheritableProperties, propagateInheritableCssProperties, initNativeView } from '../properties'; -import { setupAccessibleView } from '../../../accessibility'; import { CSSUtils } from '../../../css/system-classes'; import { Source } from '../../../utils/debug'; import { Binding, BindingOptions } from '../bindable'; @@ -599,7 +598,6 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition return true; }); - setupAccessibleView(this); this._emit('loaded'); } diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts index 39a7161278..3054ef729d 100644 --- a/packages/core/ui/core/view/index.android.ts +++ b/packages/core/ui/core/view/index.android.ts @@ -820,8 +820,9 @@ export class View extends ViewCommon { [accessibilityEnabledProperty.setNative](value: boolean): void { this.nativeViewProtected.setFocusable(!!value); - - updateAccessibilityProperties(this); + if (value) { + updateAccessibilityProperties(this); + } } [accessibilityIdentifierProperty.setNative](value: string): void { @@ -1257,6 +1258,15 @@ export class View extends ViewCommon { export class ContainerView extends View { public iosOverflowSafeArea: boolean; + + constructor() { + super(); + /** + * mark accessible as false without triggering proerty change + * equivalent to changing the default + */ + this.style[accessibilityEnabledProperty.key] = false; + } } export class CustomLayoutView extends ContainerView implements CustomLayoutViewDefinition { diff --git a/packages/core/ui/core/view/index.d.ts b/packages/core/ui/core/view/index.d.ts index c462b8e1c2..06d21abe73 100644 --- a/packages/core/ui/core/view/index.d.ts +++ b/packages/core/ui/core/view/index.d.ts @@ -228,11 +228,6 @@ export abstract class View extends ViewCommon { */ color: Color; - /** - * If `true` the element is an accessibility element and all the children will be treated as a single selectable component. - */ - accessible: boolean; - /** * Hide the view and its children from the a11y service */ diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts index c18d5189e0..da74787c4a 100644 --- a/packages/core/ui/core/view/index.ios.ts +++ b/packages/core/ui/core/view/index.ios.ts @@ -677,8 +677,9 @@ export class View extends ViewCommon implements ViewDefinition { [accessibilityEnabledProperty.setNative](value: boolean): void { this.nativeViewProtected.isAccessibilityElement = !!value; - - updateAccessibilityProperties(this); + if (value) { + updateAccessibilityProperties(this); + } } [accessibilityIdentifierProperty.getDefault](): string { @@ -1062,6 +1063,11 @@ export class ContainerView extends View { constructor() { super(); this.iosOverflowSafeArea = true; + /** + * mark accessible as false without triggering proerty change + * equivalent to changing the default + */ + this.style[accessibilityEnabledProperty.key] = false; } } diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts index 83289f7eeb..021ff67273 100644 --- a/packages/core/ui/core/view/view-common.ts +++ b/packages/core/ui/core/view/view-common.ts @@ -12,6 +12,7 @@ import { EventData } from '../../../data/observable'; import { Trace } from '../../../trace'; import { CoreTypes } from '../../../core-types'; import { ViewHelper } from './view-helper'; +import { setupAccessibleView } from '../../../accessibility'; import { PercentLength } from '../../styling/style-properties'; @@ -177,6 +178,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { } } super.onLoaded(); + if (this.accessible) { + setupAccessibleView(this); + } } public _closeAllModalViewsInternal(): boolean { @@ -810,11 +814,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { get accessible(): boolean { return this.style.accessible; - // return this._accessible; } set accessible(value: boolean) { this.style.accessible = value; - // this._accessible = value; } get accessibilityHidden(): boolean {