diff --git a/docs/components/Touchable.md b/docs/components/Touchable.md
index 179d8c4f..55272c2e 100644
--- a/docs/components/Touchable.md
+++ b/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`.
diff --git a/src/components/Touchable/index.js b/src/components/Touchable/index.js
index 97ea01e4..0b33e7b3 100644
--- a/src/components/Touchable/index.js
+++ b/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 (
diff --git a/src/components/Touchable/index.spec.js b/src/components/Touchable/index.spec.js
index 446d9c14..53797ec8 100644
--- a/src/components/Touchable/index.spec.js
+++ b/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 = children
+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()
+ assert.deepEqual(result.props.children, children)
+ })
})
-*/