perf: disable accessibility for layout views (#10482)

farfromrefug · web-flow · commit 3bd6d9b01e41 · 2024-02-10T10:25:04.000-08:00
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.
diff --git a/packages/core/accessibility/accessibility-properties.ts b/packages/core/accessibility/accessibility-properties.ts
@@ -26,6 +26,7 @@ function makePropertyEnumConverter<T>(enumValues) {
 
 export const accessibilityEnabledProperty = new CssProperty<Style, boolean>({
 	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
@@ -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(<any>this);
 
 		this._emit('loaded');
 	}
diff --git 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
@@ -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
@@ -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
@@ -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 {

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ import { EventData } from '../../../data/observable';`
`12`	`12`	`import { Trace } from '../../../trace';`
`13`	`13`	`import { CoreTypes } from '../../../core-types';`
`14`	`14`	`import { ViewHelper } from './view-helper';`
	`15`	`+import { setupAccessibleView } from '../../../accessibility';`
`15`	`16`
`16`	`17`	`import { PercentLength } from '../../styling/style-properties';`
`17`	`18`
`@@ -177,6 +178,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {`
`177`	`178`	`}`
`178`	`179`	`}`
`179`	`180`	`super.onLoaded();`
	`181`	`+ if (this.accessible) {`
	`182`	`+ setupAccessibleView(this);`
	`183`	`+ }`
`180`	`184`	`}`
`181`	`185`
`182`	`186`	`public _closeAllModalViewsInternal(): boolean {`
`@@ -810,11 +814,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {`
`810`	`814`
`811`	`815`	`get accessible(): boolean {`
`812`	`816`	`return this.style.accessible;`
`813`		`- // return this._accessible;`
`814`	`817`	`}`
`815`	`818`	`set accessible(value: boolean) {`
`816`	`819`	`this.style.accessible = value;`
`817`		`- // this._accessible = value;`
`818`	`820`	`}`
`819`	`821`
`820`	`822`	`get accessibilityHidden(): boolean {`