chore: cleanup a11y and add demo page

apps/toolbox/src/app.css

@@ -182,3 +182,8 @@ components that have the btn class name.
 .list-group .list-group-item-heading {
 	margin-bottom: 5
 }
+
+.a11y-item {
+  margin-bottom: 12;
+  font-size: 18;
+}

apps/toolbox/src/main-page.xml

@@ -9,6 +9,7 @@
         <Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
+        <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
       </StackLayout>
     </ScrollView>
   </StackLayout>

apps/toolbox/src/main-view-model.ts

@@ -3,7 +3,7 @@ import { Observable, Frame, StackLayout } from '@nativescript/core';
 export class HelloWorldModel extends Observable {
 	viewDemo(args) {
 		Frame.topmost().navigate({
-			moduleName: `${args.object.text}`,
+			moduleName: `pages/${args.object.text}`,
 		});
 	}
 }

apps/toolbox/src/pages/a11y.ts

@@ -0,0 +1,8 @@
+import { Observable, EventData, Page } from '@nativescript/core';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new AccessibilityModel();
+}
+
+export class AccessibilityModel extends Observable {}

apps/toolbox/src/pages/a11y.xml

@@ -0,0 +1,17 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="a11y" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <GridLayout padding="20">   
+      <ScrollView>
+          <StackLayout>
+            <Label text="Accessible Label" class="a11y-item text-center"></Label>
+            <Button text="Accessible Button" class="a11y-item"></Button>
+            <!-- <Label text="Accessible Label" accessible="true" class="a11y-item text-center"></Label>
+            <Button text="Accessible Button" accessible="true" class="a11y-item"></Button> -->
+          </StackLayout>
+      </ScrollView>
+    </GridLayout>
+</Page>

packages/core/accessibility/accessibility-properties.ts

@@ -24,12 +24,16 @@ function makePropertyEnumConverter<T>(enumValues) {
 	};
 }
 
-export const accessibilityEnabledProperty = new CssProperty<Style, boolean>({
+export const accessibilityEnabledProperty = new Property<View, boolean>({
 	name: 'accessible',
-	cssName: 'a11y-enabled',
+	// cssName: 'a11y-enabled',
-	valueConverter: booleanConverter,
+	defaultValue: false,
+	valueConverter: (v) => {
+		console.log('accessibilityEnabledProperty:', v);
+		return booleanConverter(v);
+	},
 });
-accessibilityEnabledProperty.register(Style);
+// accessibilityEnabledProperty.register(Style);
 
 const accessibilityHiddenPropertyName = 'accessibilityHidden';
 const accessibilityHiddenCssName = 'a11y-hidden';

packages/core/accessibility/index.android.ts

@@ -235,7 +235,7 @@ function ensureNativeClasses() {
 				}
 			}
 
-			if (view.accessible === true) {
+			if (view.accessible) {
 				info.setFocusable(true);
 			}
 		}

packages/core/ui/button/button-common.ts

@@ -8,7 +8,7 @@ import { AccessibilityRole } from '../../accessibility';
 export abstract class ButtonBase extends TextBase implements ButtonDefinition {
 	public static tapEvent = 'tap';
 
-	accessible = true;
+	// accessible = true;
 	accessibilityRole = AccessibilityRole.Button;
 
 	get textWrap(): boolean {

packages/core/ui/core/view/view-common.ts

@@ -23,7 +23,7 @@ import { LinearGradient } from '../../styling/linear-gradient';
 
 import * as am from '../../animation';
 import { AccessibilityLiveRegion, AccessibilityRole, AccessibilityState, AccessibilityTrait, AndroidAccessibilityEvent, IOSPostAccessibilityNotificationType } from '../../../accessibility/accessibility-types';
-import { accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityTraitsProperty, accessibilityValueProperty } from '../../../accessibility/accessibility-properties';
+import { accessibilityEnabledProperty, accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityTraitsProperty, accessibilityValueProperty } from '../../../accessibility/accessibility-properties';
 import { accessibilityBlurEvent, accessibilityFocusChangedEvent, accessibilityFocusEvent, getCurrentFontScale } from '../../../accessibility';
 import { CSSShadow } from '../../styling/css-shadow';
 
@@ -99,6 +99,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 
 	_androidContentDescriptionUpdated?: boolean;
 
+	// a11y
+	_accessible: boolean;
+
 	get css(): string {
 		const scope = this._styleScope;
 
@@ -754,10 +757,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	}
 
 	get accessible(): boolean {
-		return this.style.accessible;
+		// return this.style.accessible;
+		return this._accessible;
 	}
 	set accessible(value: boolean) {
-		this.style.accessible = value;
+		// this.style.accessible = value;
+		this._accessible = value;
 	}
 
 	get accessibilityHidden(): boolean {
@@ -1155,6 +1160,7 @@ export const iosIgnoreSafeAreaProperty = new InheritedProperty({
 	valueConverter: booleanConverter,
 });
 iosIgnoreSafeAreaProperty.register(ViewCommon);
+accessibilityEnabledProperty.register(ViewCommon);
 accessibilityIdentifierProperty.register(ViewCommon);
 accessibilityLabelProperty.register(ViewCommon);
 accessibilityValueProperty.register(ViewCommon);

packages/core/ui/slider/slider-common.ts

@@ -21,7 +21,7 @@ export class SliderBase extends View implements SliderDefinition {
 		this.style.accessibilityStep = value;
 	}
 
-	accessible = true;
+	// accessible = true;
 	accessibilityRole = AccessibilityRole.Adjustable;
 }