feat(core): first class a11y support (#8909)

packages/core/ui/page/index.android.ts

@@ -5,6 +5,7 @@ import { ActionBar } from '../action-bar';
 import { GridLayout } from '../layouts/grid-layout';
 import { Device } from '../../platform';
 import { profile } from '../../profiling';
+import { AndroidAccessibilityEvent, getLastFocusedViewOnPage, isAccessibilityServiceEnabled } from '../../accessibility';
 
 export * from './page-common';
 
@@ -122,4 +123,31 @@ export class Page extends PageBase {
 			(<any>window).setStatusBarColor(color);
 		}
 	}
+
+	public accessibilityScreenChanged(refocus = false): void {
+		if (!isAccessibilityServiceEnabled()) {
+			return;
+		}
+
+		if (refocus) {
+			const lastFocusedView = getLastFocusedViewOnPage(this);
+			if (lastFocusedView) {
+				const announceView = lastFocusedView.nativeViewProtected;
+				if (announceView) {
+					announceView.sendAccessibilityEvent(android.view.accessibility.AccessibilityEvent.TYPE_VIEW_FOCUSED);
+					announceView.sendAccessibilityEvent(android.view.accessibility.AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED);
+
+					return;
+				}
+			}
+		}
+
+		if (this.actionBarHidden || this.accessibilityLabel) {
+			this.androidSendAccessibilityEvent(AndroidAccessibilityEvent.WINDOW_STATE_CHANGED);
+
+			return;
+		}
+
+		this.actionBar.accessibilityScreenChanged();
+	}
 }

packages/core/ui/page/index.d.ts

@@ -93,6 +93,11 @@ export declare class Page extends PageBase {
 	 */
 	public actionBar: ActionBar;
 
+	/**
+	 * Should page changed be annnounced to the screen reader.
+	 */
+	public accessibilityAnnouncePageEnabled = true;
+
 	/**
 	 * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
 	 * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
@@ -161,6 +166,11 @@ export declare class Page extends PageBase {
 	 */
 	public onNavigatedFrom(isBackNavigation: boolean): void;
 	//@endprivate
+
+	/**
+	 * Announce screen changed
+	 */
+	public accessibilityScreenChanged(refocus?: boolean): void;
 }
 
 /**

packages/core/ui/page/index.ios.ts

@@ -7,6 +7,7 @@ import { PageBase, actionBarHiddenProperty, statusBarStyleProperty } from './pag
 
 import { profile } from '../../profiling';
 import { iOSNativeHelper, layout } from '../../utils';
+import { getLastFocusedViewOnPage, isAccessibilityServiceEnabled } from '../../accessibility';
 
 export * from './page-common';
 
@@ -522,6 +523,44 @@ export class Page extends PageBase {
 			}
 		}
 	}
+
+	public accessibilityScreenChanged(refocus = false): void {
+		if (!isAccessibilityServiceEnabled()) {
+			return;
+		}
+
+		if (refocus) {
+			const lastFocusedView = getLastFocusedViewOnPage(this);
+			if (lastFocusedView) {
+				const uiView = lastFocusedView.nativeViewProtected;
+				if (uiView) {
+					UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, uiView);
+
+					return;
+				}
+			}
+		}
+
+		if (this.actionBarHidden) {
+			UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, this.nativeViewProtected);
+
+			return;
+		}
+
+		if (this.accessibilityLabel) {
+			UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, this.nativeViewProtected);
+
+			return;
+		}
+
+		if (this.actionBar.accessibilityLabel || this.actionBar.title) {
+			UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, this.actionBar.nativeView);
+
+			return;
+		}
+
+		UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, this.nativeViewProtected);
+	}
 }
 
 function invalidateTopmostController(controller: UIViewController): void {

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

@@ -33,6 +33,7 @@ export class PageBase extends ContentView {
 	public enableSwipeBackNavigation: boolean;
 	public backgroundSpanUnderStatusBar: boolean;
 	public hasActionBar: boolean;
+	public accessibilityAnnouncePageEnabled = true;
 
 	get navigationContext(): any {
 		return this._navigationContext;
@@ -126,8 +127,12 @@ export class PageBase extends ContentView {
 	}
 
 	@profile
-	public onNavigatedTo(isBackNavigation: boolean) {
+	public onNavigatedTo(isBackNavigation: boolean): void {
 		this.notify(this.createNavigatedData(PageBase.navigatedToEvent, isBackNavigation));
+
+		if (this.accessibilityAnnouncePageEnabled) {
+			this.accessibilityScreenChanged(!!isBackNavigation);
+		}
 	}
 
 	@profile
@@ -152,6 +157,10 @@ export class PageBase extends ContentView {
 	get _childrenCount(): number {
 		return (this.content ? 1 : 0) + (this._actionBar ? 1 : 0);
 	}
+
+	public accessibilityScreenChanged(refocus?: boolean): void {
+		return;
+	}
 }
 
 PageBase.prototype.recycleNativeView = 'never';