Text: add props 'accessibilityLabel' and 'accessible'

These properties are missing in React Native but important for
accessible web interfaces.
This commit is contained in:
Nicolas Gallagher
2015-09-20 15:48:09 -07:00
parent a2fb65a79c
commit 33082f988e
3 changed files with 36 additions and 8 deletions
+22 -8
View File
@@ -10,27 +10,41 @@ The `Text` is unique relative to layout: child elements use text layout
a `Text` are not rectangles, as they wrap when reaching the edge of their a `Text` are not rectangles, as they wrap when reaching the edge of their
container. container.
Unsupported React Native props:
`allowFontScaling` (ios),
`suppressHighlighting` (ios)
## Props ## Props
NOTE: `Text` will transfer all other props to the rendered HTML element. NOTE: `Text` will transfer all other props to the rendered HTML element.
**children** any (web) **accessibilityLabel**: string
Defines the text available to assistive technologies upon interaction with the
element. (This is implemented using `aria-label`.)
(web) **accessible**: bool = true
When `false`, the text is hidden from assistive technologies. (This is
implemented using `aria-hidden`.)
**children**: any
Child content. Child content.
**component** function or string (web) **component**: function | string = 'span'
Default is `span`. Backing component.
**numberOfLines** number. **numberOfLines**: number
Truncates the text with an ellipsis after this many lines. Truncates the text with an ellipsis after this many lines. Currently only supports `1`.
**onPress** function **onPress**: function
This function is called on press. This function is called on press.
**style** style **style**: style
+ `backgroundColor` + `backgroundColor`
+ `color` + `color`
@@ -49,7 +63,7 @@ This function is called on press.
+ `whiteSpace` + `whiteSpace`
+ `wordWrap` + `wordWrap`
**testID** string **testID**: string
Used to locate this view in end-to-end tests. Used to locate this view in end-to-end tests.
+6
View File
@@ -24,6 +24,8 @@ const styles = {
class Text extends React.Component { class Text extends React.Component {
static propTypes = { static propTypes = {
accessibilityLabel: PropTypes.string,
accessible: PropTypes.bool,
children: PropTypes.any, children: PropTypes.any,
component: CoreComponent.propTypes.component, component: CoreComponent.propTypes.component,
numberOfLines: PropTypes.number, numberOfLines: PropTypes.number,
@@ -45,6 +47,8 @@ class Text extends React.Component {
render() { render() {
const { const {
accessibilityLabel,
accessible,
children, children,
component, component,
numberOfLines, numberOfLines,
@@ -59,6 +63,8 @@ class Text extends React.Component {
return ( return (
<CoreComponent <CoreComponent
{...other} {...other}
aria-hidden={accessible ? null : true}
aria-label={accessibilityLabel}
children={children} children={children}
className={'Text'} className={'Text'}
component={component} component={component}
+8
View File
@@ -7,6 +7,14 @@ import Text from '.'
const ReactTestUtils = React.addons.TestUtils const ReactTestUtils = React.addons.TestUtils
suite('Text', () => { suite('Text', () => {
test('prop "accessibilityLabel"', () => {
assertProps.accessibilityLabel(Text)
})
test('prop "accessible"', () => {
assertProps.accessible(Text)
})
test('prop "children"', () => { test('prop "children"', () => {
const children = 'children' const children = 'children'
const result = shallowRender(<Text>{children}</Text>) const result = shallowRender(<Text>{children}</Text>)