From e9b5eb934d24fcb22345595402c0c5f852aa8f98 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Tue, 2 Mar 2021 19:49:51 -0800
Subject: [PATCH] chore: cleanup a11y and add demo page

---
 apps/toolbox/src/app.css                        |  5 +++++
 apps/toolbox/src/main-page.xml                  |  1 +
 apps/toolbox/src/main-view-model.ts             |  2 +-
 apps/toolbox/src/pages/a11y.ts                  |  8 ++++++++
 apps/toolbox/src/pages/a11y.xml                 | 17 +++++++++++++++++
 apps/toolbox/src/{ => pages}/box-shadow.ts      |  0
 apps/toolbox/src/{ => pages}/box-shadow.xml     |  0
 apps/toolbox/src/{ => pages}/list-page-model.ts |  0
 apps/toolbox/src/{ => pages}/list-page.ts       |  0
 apps/toolbox/src/{ => pages}/list-page.xml      |  0
 apps/toolbox/src/{ => pages}/root-layout.ts     |  0
 apps/toolbox/src/{ => pages}/root-layout.xml    |  0
 .../accessibility/accessibility-properties.ts   | 12 ++++++++----
 packages/core/accessibility/index.android.ts    |  2 +-
 packages/core/ui/button/button-common.ts        |  2 +-
 packages/core/ui/core/view/view-common.ts       | 12 +++++++++---
 packages/core/ui/slider/slider-common.ts        |  2 +-
 17 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 apps/toolbox/src/pages/a11y.ts
 create mode 100644 apps/toolbox/src/pages/a11y.xml
 rename apps/toolbox/src/{ => pages}/box-shadow.ts (100%)
 rename apps/toolbox/src/{ => pages}/box-shadow.xml (100%)
 rename apps/toolbox/src/{ => pages}/list-page-model.ts (100%)
 rename apps/toolbox/src/{ => pages}/list-page.ts (100%)
 rename apps/toolbox/src/{ => pages}/list-page.xml (100%)
 rename apps/toolbox/src/{ => pages}/root-layout.ts (100%)
 rename apps/toolbox/src/{ => pages}/root-layout.xml (100%)

diff --git a/apps/toolbox/src/app.css b/apps/toolbox/src/app.css
index 88292f692..f10823ff6 100644
--- a/apps/toolbox/src/app.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
index 580accecb..c5a28ba84 100644
--- a/apps/toolbox/src/main-page.xml
+++ b/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>
diff --git a/apps/toolbox/src/main-view-model.ts b/apps/toolbox/src/main-view-model.ts
index 12f86e8ad..ea8a2c13d 100644
--- a/apps/toolbox/src/main-view-model.ts
+++ b/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}`,
 		});
 	}
 }
diff --git a/apps/toolbox/src/pages/a11y.ts b/apps/toolbox/src/pages/a11y.ts
new file mode 100644
index 000000000..8243a2e3d
--- /dev/null
+++ b/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 {}
diff --git a/apps/toolbox/src/pages/a11y.xml b/apps/toolbox/src/pages/a11y.xml
new file mode 100644
index 000000000..c250f8cba
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/apps/toolbox/src/box-shadow.ts b/apps/toolbox/src/pages/box-shadow.ts
similarity index 100%
rename from apps/toolbox/src/box-shadow.ts
rename to apps/toolbox/src/pages/box-shadow.ts
diff --git a/apps/toolbox/src/box-shadow.xml b/apps/toolbox/src/pages/box-shadow.xml
similarity index 100%
rename from apps/toolbox/src/box-shadow.xml
rename to apps/toolbox/src/pages/box-shadow.xml
diff --git a/apps/toolbox/src/list-page-model.ts b/apps/toolbox/src/pages/list-page-model.ts
similarity index 100%
rename from apps/toolbox/src/list-page-model.ts
rename to apps/toolbox/src/pages/list-page-model.ts
diff --git a/apps/toolbox/src/list-page.ts b/apps/toolbox/src/pages/list-page.ts
similarity index 100%
rename from apps/toolbox/src/list-page.ts
rename to apps/toolbox/src/pages/list-page.ts
diff --git a/apps/toolbox/src/list-page.xml b/apps/toolbox/src/pages/list-page.xml
similarity index 100%
rename from apps/toolbox/src/list-page.xml
rename to apps/toolbox/src/pages/list-page.xml
diff --git a/apps/toolbox/src/root-layout.ts b/apps/toolbox/src/pages/root-layout.ts
similarity index 100%
rename from apps/toolbox/src/root-layout.ts
rename to apps/toolbox/src/pages/root-layout.ts
diff --git a/apps/toolbox/src/root-layout.xml b/apps/toolbox/src/pages/root-layout.xml
similarity index 100%
rename from apps/toolbox/src/root-layout.xml
rename to apps/toolbox/src/pages/root-layout.xml
diff --git a/packages/core/accessibility/accessibility-properties.ts b/packages/core/accessibility/accessibility-properties.ts
index aba31c51a..b6d6e3a52 100644
--- a/packages/core/accessibility/accessibility-properties.ts
+++ b/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',
-	valueConverter: booleanConverter,
+	// cssName: 'a11y-enabled',
+	defaultValue: false,
+	valueConverter: (v) => {
+		console.log('accessibilityEnabledProperty:', v);
+		return booleanConverter(v);
+	},
 });
-accessibilityEnabledProperty.register(Style);
+// accessibilityEnabledProperty.register(Style);
 
 const accessibilityHiddenPropertyName = 'accessibilityHidden';
 const accessibilityHiddenCssName = 'a11y-hidden';
diff --git a/packages/core/accessibility/index.android.ts b/packages/core/accessibility/index.android.ts
index eeb19d5e6..551461a1c 100644
--- a/packages/core/accessibility/index.android.ts
+++ b/packages/core/accessibility/index.android.ts
@@ -235,7 +235,7 @@ function ensureNativeClasses() {
 				}
 			}
 
-			if (view.accessible === true) {
+			if (view.accessible) {
 				info.setFocusable(true);
 			}
 		}
diff --git a/packages/core/ui/button/button-common.ts b/packages/core/ui/button/button-common.ts
index 2169a5bcf..7a1138f4c 100644
--- a/packages/core/ui/button/button-common.ts
+++ b/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 {
diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts
index f755ff880..15f7aaec9 100644
--- a/packages/core/ui/core/view/view-common.ts
+++ b/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);
diff --git a/packages/core/ui/slider/slider-common.ts b/packages/core/ui/slider/slider-common.ts
index 507ddcbce..68bbf03d0 100644
--- a/packages/core/ui/slider/slider-common.ts
+++ b/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;
 }