Add support for 'accessible' prop

docs/components/Image.md

@@ -7,7 +7,11 @@ and child content.
 
 **accessibilityLabel** string
 
-The text that's read by the screen reader when the user interacts with the image.
+The text that's read by a screenreader when someone interacts with the image.
+
+**accessible** bool
+
+When `false`, the view is hidden from screenreaders. Default: `true`.
 
 **children** any
 

docs/components/Touchable.md

@@ -6,6 +6,15 @@ the wrapped view can be decreased.
 
 ## Props
 
+**accessibilityLabel** string
+
+Overrides the text that's read by the screen reader when the user interacts
+with the element.
+
+**accessible** bool
+
+When `false`, the view is hidden from screenreaders. Default: `true`.
+
 **activeHighlight** string
 
 Sets the color of the background highlight when `onPressIn` is called. The

docs/components/View.md

@@ -11,16 +11,22 @@ NOTE: `View` will transfer all other props to the rendered HTML element.
 **accessibilityLabel** string
 
 Overrides the text that's read by the screen reader when the user interacts
-with the element. This is implemented using `aria-label`.
+with the element. (This is implemented using `aria-label`.)
+
+**accessible** bool
+
+When `false`, the view is hidden from screenreaders. Default: `true`. (This is
+implemented using `aria-hidden`.)
 
 **component** function, string
 
-Default is `div`.
+Default: `div`.
 
 **pointerEvents** oneOf('auto', 'box-only', 'box-none', 'none')
 
-We deviate from the CSS spec by supporting additional `pointerEvents` modes,
-therefore `pointerEvents` is excluded from `style`.
+Configure the `pointerEvents` of the view. The enhanced `pointerEvents` modes
+provided are not part of the CSS spec, therefore, `pointerEvents` is excluded
+from `style`.
 
 `box-none` is the equivalent of:
 

example/example.js

@@ -136,6 +136,7 @@ class Example extends Component {
 
         <Heading level='2' size='large'>Touchable</Heading>
         <Touchable
+          accessibilityLabel={'Touchable element'}
           activeHighlight='lightblue'
           activeOpacity={0.8}
           onLongPress={(e) => { console.log('Touchable.onLongPress', e) }}

src/components/Image/index.js

@@ -64,6 +64,7 @@ class Image extends React.Component {
 
   static propTypes = {
     accessibilityLabel: PropTypes.string,
+    accessible: PropTypes.bool,
     children: PropTypes.any,
     defaultSource: PropTypes.object,
     onError: PropTypes.func,
@@ -79,17 +80,13 @@ class Image extends React.Component {
   static stylePropTypes = ImageStylePropTypes
 
   static defaultProps = {
+    accessible: true,
     defaultSource: {},
     resizeMode: 'cover',
     source: {},
     style: styles.initial
   }
 
-  _cancelEvent(event) {
-    event.preventDefault()
-    event.stopPropagation()
-  }
-
   _createImageLoader() {
     const { source } = this.props
 
@@ -167,6 +164,7 @@ class Image extends React.Component {
   render() {
     const {
       accessibilityLabel,
+      accessible,
       children,
       defaultSource,
       resizeMode,
@@ -190,6 +188,7 @@ class Image extends React.Component {
      */
     return (
       <View
+        accessible={accessible}
         accessibilityLabel={accessibilityLabel}
         className={'Image'}
         component='div'

src/components/Touchable/index.js

@@ -16,6 +16,8 @@ class Touchable extends React.Component {
   }
 
   static propTypes = {
+    accessibilityLabel: PropTypes.string,
+    accessible: PropTypes.bool,
     activeHighlight: PropTypes.string,
     activeOpacity: PropTypes.number,
     children: PropTypes.element,
@@ -77,6 +79,8 @@ class Touchable extends React.Component {
 
   render() {
     const {
+      accessibilityLabel,
+      accessible,
       activeHighlight,
       delayLongPress,
       style
@@ -90,6 +94,8 @@ class Touchable extends React.Component {
      */
     return (
       <Tappable
+        accessibilityLabel={accessibilityLabel}
+        accessible={accessible}
         children={this._getChildren()}
         component={View}
         onKeyDown={(e) => { this._onKeyEnter(e, this._onPressIn) }}

src/components/View/index.js

@@ -31,6 +31,7 @@ const styles = {
 class View extends React.Component {
   static propTypes = {
     accessibilityLabel: PropTypes.string,
+    accessible: PropTypes.bool,
     children: PropTypes.any,
     component: CoreComponent.propTypes.component,
     pointerEvents: PropTypes.oneOf([
@@ -46,18 +47,20 @@ class View extends React.Component {
   static stylePropTypes = ViewStylePropTypes
 
   static defaultProps = {
+    accessible: true,
     component: 'div',
     style: styles.initial
   }
 
   render() {
-    const { accessibilityLabel, pointerEvents, style, testID, ...other } = this.props
+    const { accessible, accessibilityLabel, pointerEvents, style, testID, ...other } = this.props
     const pointerEventsStyle = pointerEvents && { pointerEvents }
     const resolvedStyle = pickProps(style, viewStyleKeys)
 
     return (
       <CoreComponent
         {...other}
+        aria-hidden={accessible ? null : true}
         aria-label={accessibilityLabel}
         className={'View'}
         style={{