Touchable: add 'accessibilityRole' prop

docs/components/Touchable.md

@@ -11,6 +11,17 @@ the wrapped view can be decreased.
 Overrides the text that's read by the screen reader when the user interacts
 with the element.
 
+**accessibilityRole** oneOf(roles)
+
+Allows assistive technologies to present and support interaction with the view
+in a manner that is consistent with user expectations for similar views of that
+type. For example, marking a touchable view with an `accessibilityRole` of
+`button`. (This is implemented using [ARIA roles](http://www.w3.org/TR/wai-aria/roles#role_definitions)).
+
+Note: Avoid changing `accessibilityRole` values over time or after user
+actions. Generally, accessibility APIs do not provide a means of notifying
+assistive technologies of a `role` value change.
+
 **accessible** bool
 
 When `false`, the view is hidden from screenreaders. Default: `true`.

src/components/Touchable/index.js

@@ -2,6 +2,14 @@ import React, { PropTypes } from 'react'
 import Tappable from 'react-tappable'
 import View from '../View'
 
+const styles = {
+  initial: {
+    ...View.defaultProps.style,
+    cursor: 'pointer',
+    userSelect: undefined
+  }
+}
+
 class Touchable extends React.Component {
   constructor(props, context) {
     super(props, context)
@@ -17,6 +25,7 @@ class Touchable extends React.Component {
 
   static propTypes = {
     accessibilityLabel: PropTypes.string,
+    accessibilityRole: PropTypes.string,
     accessible: PropTypes.bool,
     activeHighlight: PropTypes.string,
     activeOpacity: PropTypes.number,
@@ -32,13 +41,14 @@ class Touchable extends React.Component {
   }
 
   static defaultProps = {
+    accessibilityRole: 'button',
     activeHighlight: 'transparent',
     activeOpacity: 1,
     component: 'div',
     delayLongPress: 1000,
     delayPressIn: 0,
     delayPressOut: 0,
-    style: View.defaultProps.style
+    style: styles.initial
   }
 
   _getChildren() {
@@ -46,7 +56,7 @@ class Touchable extends React.Component {
     return React.cloneElement(React.Children.only(children), {
       style: {
         ...children.props.style,
-        ...(this.state.isActive ? { opacity: activeOpacity } : {})
+        ...(this.state.isActive && { opacity: activeOpacity })
       }
     })
   }
@@ -79,6 +89,7 @@ class Touchable extends React.Component {
   render() {
     const {
       accessibilityLabel,
+      accessibilityRole,
       accessible,
       activeHighlight,
       delayLongPress,
@@ -94,6 +105,7 @@ class Touchable extends React.Component {
     return (
       <Tappable
         accessibilityLabel={accessibilityLabel}
+        accessibilityRole={accessibilityRole}
         accessible={accessible}
         children={this._getChildren()}
         component={View}
@@ -109,10 +121,9 @@ class Touchable extends React.Component {
         pressDelay={delayLongPress}
         pressMoveThreshold={5}
         style={{
+          ...styles.initial,
           ...style,
-          backgroundColor: this.state.isActive ? activeHighlight : null,
-          cursor: 'pointer',
-          userSelect: undefined
+          backgroundColor: this.state.isActive ? activeHighlight : style.backgroundColor
         }}
         tabIndex='0'
       />

src/components/Touchable/index.spec.js

@@ -1,13 +1,27 @@
-/*
-import { assertProps, renderToDOM, shallowRender } from '../../modules/specHelpers'
+import { assertProps, shallowRender } from '../../modules/specHelpers'
 import assert from 'assert'
 import React from 'react/addons'
 
 import Touchable from '.'
 
-const ReactTestUtils = React.addons.TestUtils
+const children = <span style={{}}>children</span>
+const requiredProps = { children }
 
-suite.skip('Touchable', () => {
-  test('prop "children"', () => {})
+suite('Touchable', () => {
+  test('prop "accessibilityLabel"', () => {
+    assertProps.accessibilityLabel(Touchable, requiredProps)
+  })
+
+  test('prop "accessibilityRole"', () => {
+    assertProps.accessibilityRole(Touchable, requiredProps)
+  })
+
+  test('prop "accessible"', () => {
+    assertProps.accessible(Touchable, requiredProps)
+  })
+
+  test('prop "children"', () => {
+    const result = shallowRender(<Touchable {...requiredProps} />)
+    assert.deepEqual(result.props.children, children)
+  })
 })
-*/