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.

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

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

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);
-
+		if (value) {
-		updateAccessibilityProperties(this);
+			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 {

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
 	 */

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;
-
+		if (value) {
-		updateAccessibilityProperties(this);
+			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;
 	}
 }
 

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 {