From 2750d70a9387db23ea33d45ca33006912b352f3e Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@twitter.com>
Date: Mon, 7 Sep 2015 22:09:16 -0700
Subject: [PATCH] Add support for 'accessible' prop

---
 docs/components/Image.md          |  6 +++++-
 docs/components/Touchable.md      |  9 +++++++++
 docs/components/View.md           | 14 ++++++++++----
 example/example.js                |  1 +
 src/components/Image/index.js     |  9 ++++-----
 src/components/Touchable/index.js |  6 ++++++
 src/components/View/index.js      |  5 ++++-
 7 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/docs/components/Image.md b/docs/components/Image.md
index c2d9669b..be0f46a2 100644
--- a/docs/components/Image.md
+++ b/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
 
diff --git a/docs/components/Touchable.md b/docs/components/Touchable.md
index c9209136..179d8c4f 100644
--- a/docs/components/Touchable.md
+++ b/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
diff --git a/docs/components/View.md b/docs/components/View.md
index efff5924..f057e2b1 100644
--- a/docs/components/View.md
+++ b/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:
 
diff --git a/example/example.js b/example/example.js
index dd96c566..6400c91a 100644
--- a/example/example.js
+++ b/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) }}
diff --git a/src/components/Image/index.js b/src/components/Image/index.js
index 5c3d521d..32e45e7e 100644
--- a/src/components/Image/index.js
+++ b/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'
diff --git a/src/components/Touchable/index.js b/src/components/Touchable/index.js
index 948a6fbe..5a72efb7 100644
--- a/src/components/Touchable/index.js
+++ b/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) }}
diff --git a/src/components/View/index.js b/src/components/View/index.js
index 7077f94a..1c7c6fae 100644
--- a/src/components/View/index.js
+++ b/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={{