Making gesture views accessibile (microsoft#196)

* Makign Gesture view accessibility property to true

* Exposing accessibility property in gesture view

* Making gesture Views accessibile. Expose the accessibility props in gesture views. Also make gesture views accessible by default as it generally always has actions that can be perfomed on them by the users. and hence needs to b exposed to screen readers as well

* Removing gesture dist file

* Updating documentation

docs/docs/accessibility.md

@@ -11,7 +11,7 @@ ReactXP exposes a common way to implement accessibility features across platform
 
 A screen reader is an assistive technology available for visually-impaired users. It allows users to navigate through an application by focusing actionable components and announcing the purpose of those components.
 
-ReactXP components [View](components/view), [Button](components/button), and [TextInput](components/textinput) implement a common set of accessibility-related props described below. 
+ReactXP components [View](components/view), [Button](components/button), [GestureView](components/gestureview) and [TextInput](components/textinput) implement a common set of accessibility-related props described below. 
 
 Additional [Accessibility APIs](apis/accessibility) are provided for programmatically invoking the screen reader to announce events.
 

docs/docs/components/button.md

@@ -17,7 +17,7 @@ In addition to the [common accessibility props](/reactxp/docs/accessibility.html
 ``` javascript
 // Alternate text to display if the image cannot be loaded
 // or by screen readers
-accessibilityHidden: boolean = false;
+accessibilityLabel: boolean = false;
 
 // Hide the component from screen readers?
 accessibilityHidden: boolean = false;
@@ -28,6 +28,9 @@ accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;
 // Region for accessibility mechanisms
 accessibilityLiveRegion: AccessibilityLiveRegion = undefined; // Android and web only
 
+// Expose the element and/or its children as accessible to Screen readers
+importantForAccessibility?: ImportantForAccessibility = ImportantForAccessibility.yes;
+
 // Delay in ms before onLongPress is called
 delayLongPress: number = 1000;
 

docs/docs/components/gestureview.md

@@ -38,6 +38,15 @@ panPixelThreshold: number = undefined;
 // Something else wants to become responder. Should this view release the responder?
 // Setting true allows release
 releaseOnRequest: boolean = false;
+
+// Alternate text for screen readers.
+accessibilityLabel: string = undefined;
+
+// Traits used to hint screen readers, etc.
+accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;
+
+// Expose the element and/or its children as accessible to Screen readers
+importantForAccessibility?: ImportantForAccessibility = ImportantForAccessibility.Yes;
 ```
 
 ## Styles

docs/docs/components/view.md

@@ -26,6 +26,9 @@ accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;
 // Region for accessibility mechanisms
 accessibilityLiveRegion: AccessibilityLiveRegion = undefined; // Android and web only
 
+// Expose the element and/or its children as accessible to Screen readers
+importantForAccessibility?: ImportantForAccessibility = Auto;
+
 // Animation of children
 //   - Every child must have a `key`.
 //   - String refs aren't supported on children. Only callback refs are.

src/common/Types.ts

@@ -673,7 +673,7 @@ export enum PreferredPanGesture {
     Vertical
 }
 
-export interface GestureViewProps extends CommonStyledProps<ViewStyleRuleSet> {
+export interface GestureViewProps extends CommonStyledProps<ViewStyleRuleSet>, CommonAccessibilityProps {
     // Gestures and attributes that apply only to touch inputs
     onPinchZoom?: (gestureState: MultiTouchGestureState) => void;
     onRotate?: (gestureState: MultiTouchGestureState) => void;

src/native-common/GestureView.tsx

@@ -13,6 +13,8 @@ import assert = require('assert');
 import React = require('react');
 import RN = require('react-native');
 
+import AccessibilityUtil from './AccessibilityUtil';
+
 import Types = require('../common/Types');
 import UserInterface from './UserInterface';
 import ViewBase from './ViewBase';
@@ -33,6 +35,8 @@ const _tapPixelThreshold = 4;
 const _doubleTapDurationThreshold = 250;
 const _doubleTapPixelThreshold = 20;
 
+const _defaultImportantForAccessibility = Types.ImportantForAccessibility.Yes;
+
 export abstract class GestureView extends ViewBase<Types.GestureViewProps, {}> {
     private _panResponder: RN.PanResponder;
     private _doubleTapTimer: any = null;
@@ -509,12 +513,21 @@ export abstract class GestureView extends ViewBase<Types.GestureViewProps, {}> {
     }
 
     render() {
+        const importantForAccessibility = AccessibilityUtil.importantForAccessibilityToString(this.props.importantForAccessibility,
+            _defaultImportantForAccessibility);
+        const accessibilityTrait = AccessibilityUtil.accessibilityTraitToString(this.props.accessibilityTraits);
+        const accessibilityComponentType = AccessibilityUtil.accessibilityComponentTypeToString(this.props.accessibilityTraits);
+
         return (
             <RN.View
                 style={ this._getStyles(this.props) }
+                importantForAccessibility={ importantForAccessibility }
+                accessibilityTraits={ accessibilityTrait }
+                accessibilityComponentType={ accessibilityComponentType }
+                accessibilityLabel={ this.props.accessibilityLabel }
                 { ...this._panResponder.panHandlers }
             >
-                { this.props.children }
+                {this.props.children}
             </RN.View>
         );
     }

src/web/GestureView.tsx

@@ -11,6 +11,7 @@
 import _ = require('./utils/lodashMini');
 import React = require('react');
 
+import AccessibilityUtil from './AccessibilityUtil';
 import MouseResponder, { MouseResponderSubscription } from './utils/MouseResponder';
 import RX = require('../common/Interfaces');
 import Styles from './Styles';
@@ -101,12 +102,18 @@ export class GestureView extends RX.ViewBase<Types.GestureViewProps, {}> {
     }
 
     render() {
+        const ariaRole = AccessibilityUtil.accessibilityTraitToString(this.props.accessibilityTraits);
+        const isAriaHidden = AccessibilityUtil.isHidden(this.props.importantForAccessibility);
+
         return (
             <div
                 style={ this._getStyles() }
                 ref={ this._setContainerRef }
                 onClick={ this._onClick }
                 onWheel={ this._onWheel }
+                role={ ariaRole }
+                aria-label={ this.props.accessibilityLabel }
+                aria-hidden={ isAriaHidden }
             >
                 { this.props.children }
             </div>