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) + }) }) -*/