mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-06-02 10:35:54 +00:00
Text: add props 'accessibilityLabel' and 'accessible'
These properties are missing in React Native but important for accessible web interfaces.
This commit is contained in:
+22
-8
@@ -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.
|
||||||
|
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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>)
|
||||||
|
|||||||
Reference in New Issue
Block a user