chore: a11y polish (#9259)

apps/toolbox/src/app.css

@@ -183,7 +183,19 @@ components that have the btn class name.
 	margin-bottom: 5
 }
 
-.a11y-item {
+.a11y-demo-page .view-item {
   margin-bottom: 12;
   font-size: 18;
+}
+
+.a11y-demo-page .a11y {
+  a11y-enabled: true;
+}
+
+.a11y-demo-page .a11y-role-image {
+  a11y-role: image;
+}
+
+.a11y-demo-page .a11y-state-checked {
+  a11y-state: checked;
 }

apps/toolbox/src/pages/a11y.ts

@@ -1,8 +1,34 @@
-import { Observable, EventData, Page } from '@nativescript/core';
+import { Observable, EventData, Page, Switch, AccessibilityLiveRegion, AccessibilityRole, AccessibilityState, ShowModalOptions } from '@nativescript/core';
+
+let page: Page;
 
 export function navigatingTo(args: EventData) {
-	const page = <Page>args.object;
+	page = <Page>args.object;
 	page.bindingContext = new AccessibilityModel();
+	page.onAccessibilityPerformEscape = () => {
+		console.log('onAccessibilityPerformEscape');
+		return true;
+	};
 }
 
-export class AccessibilityModel extends Observable {}
+export class AccessibilityModel extends Observable {
+	labelText = 'Label change on Switch:';
+	switchCheckedText = this.labelText;
+	accessibilityLiveRegions = AccessibilityLiveRegion;
+	accessibilityRole = AccessibilityRole;
+	accessibilityState = AccessibilityState;
+
+	constructor() {
+		super();
+	}
+
+	checkedChange(args) {
+		const checked = (args.object as Switch).checked;
+		console.log(checked);
+		this.set('switchCheckedText', `${this.labelText} ${checked}`);
+	}
+
+	openModal() {
+		page.showModal('pages/sample-modal');
+	}
+}

apps/toolbox/src/pages/a11y.xml

@@ -4,14 +4,32 @@
         </ActionBar>
     </Page.actionBar>
 
-    <GridLayout padding="20">   
+    <GridLayout padding="20" class="a11y-demo-page">   
       <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> -->
+            <Label text="Accessible Label" class="view-item a11y text-center" accessibilityLabel="Accessible Label" accessibilityHint="Just a label" accessibilityRole="{{accessibilityRole.StaticText}}" accessibilityValue="Accessible Label" />
+            <Button text="Accessible Button" class="view-item a11y" accessibilityLabel="Accessible Button" accessibilityHint="Tapping this really does nothing" />
+            
+            <Image src="res://icon" width="50" class="view-item a11y" accessibilityLabel="Image with explicit attribute role" accessibilityRole="{{accessibilityRole.Image}}" />
+            <Image src="res://icon" width="50" class="view-item a11y a11y-role-image" accessibilityLabel="Image with css defined role" />
+
+            <Switch checked="true" class="view-item a11y" accessibilityLabel="Switch with attribute state" accessibilityState="{{accessibilityState.Checked}}" checkedChange="{{checkedChange}}" />
+            <Switch checked="true" class="view-item a11y a11y-state-checked" accessibilityLabel="Switch with css state" checkedChange="{{checkedChange}}" />
+
+            <TextView hint="TextView" text="{{switchCheckedText}}" class="view-item a11y" accessibilityLabel="TestView with a value" accessibilityLiveRegion="{{accessibilityLiveRegions.Polite}}"/>
+            <TextField hint="TextField" class="view-item a11y" accessibilityLabel="Plain jane TextField" accessibilityHint="Tell us your real name Jane"/>
+            <TextView hint="TextView" class="view-item a11y" accessibilityLabel="Nice TextView" accessibilityHint="Tell us about yourself Jane"/>
+            <GridLayout rows="25" columns="*" class="view-item" accessibilityLabel="No can go GridLayout" accessibilityHint="A grid that will not get bigger when increasing accessible text size">
+              <Label text="IN-Accessible Grid" class="view-item text-center" />
+            </GridLayout>
+            <GridLayout rows="25,25" columns="*,50" class="view-item a11y" accessibilityLabel="Yes an accessible GridLayout" accessibilityHint="A grid that WILL get bigger dynamically when increasing accessible text size">
+              <Label text="Accessible Grid" class="view-item text-center" />
+              <Label row="1" text="With another item in a row" class="view-item text-center" />
+              <Label rowSpan="2" col="1" text="Hi" />
+            </GridLayout>
+            <Button text="Open Modal" class="view-item" tap="{{openModal}}" />
+            <Slider value="10" minValue="0" maxValue="100" class="view-item a11y" accessibilityLabel="Slider" accessibilityHint="A smooth slider" accessibilityValue="10"/>
           </StackLayout>
       </ScrollView>
     </GridLayout>
-</Page>
+</Page>

apps/toolbox/src/pages/sample-modal.ts

@@ -0,0 +1,23 @@
+import { Page, ShownModallyData, Observable } from '@nativescript/core';
+
+let page: Page;
+let closeCallback: Function;
+export function onShownModally(args: ShownModallyData) {
+	page = <Page>args.object;
+	page.bindingContext = new SampleModal();
+	closeCallback = args.closeCallback;
+
+	if (args.context) {
+		args.context.shownModally = true;
+	}
+}
+
+export class SampleModal extends Observable {
+	close() {
+		// TODO: a11y
+		// if (global.isIOS) {
+		//   (<UIViewController>page.ios).view.accessibilityPerformEscape();
+		// }
+		closeCallback();
+	}
+}

apps/toolbox/src/pages/sample-modal.xml

@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" class="page">
+
+    <GridLayout padding="20">   
+      <ScrollView>
+          <StackLayout>
+            <Button text="Close" class="view-item" tap="{{close}}" />
+            
+          </StackLayout>
+      </ScrollView>
+    </GridLayout>
+</Page>