react-native/RNTester/js/AccessibilityIOSExample.js

138 lines
3.8 KiB
JavaScript
Raw Normal View History

/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {AccessibilityInfo, Text, View, TouchableOpacity} = ReactNative;
class AccessibilityIOSExample extends React.Component<{}> {
render() {
return (
<View>
<View
onAccessibilityTap={() => alert('onAccessibilityTap success')}
accessible={true}>
<Text>Accessibility normal tap example</Text>
</View>
<View onMagicTap={() => alert('onMagicTap success')} accessible={true}>
<Text>Accessibility magic tap example</Text>
</View>
<View accessibilityLabel="Some announcement" accessible={true}>
<Text>Accessibility label example</Text>
</View>
<View
accessibilityRole="button"
accessibilityStates={['selected']}
accessible={true}>
<Text>Accessibility traits example</Text>
</View>
Proper support of the accessibilityLabel for <Text> components on iOS Summary: **PR changes** The RCTText class originally overrode the accessibilityLabel and returned the raw text of the class ignoring if the accessibilityLabel was set explicitly in code. Example: <Text accessibilityLabel="Example"> Hello World </Text> // returns "Hello World" instead of "Example" for the accessibility label My update checks if the super's accessibilityLabel is not nil and returns the value else it returns the raw text itself as a default to mirror what a UIKit's UILabel does. The super's accessibilityLabel is nil if the accessibilityLabel is not ever set in code. I don't check the length of the label because if the value was set to an empty purposely then it will respect that and return whatever was set in code. With the new changes: <Text accessibilityLabel="Example"> Hello World </Text> // returns "Example" for the accessibilityLabel This change doesn't support nested <Text> components with both accessibilityLabel's value set respectively. The parent's value will return. Example: // returns "Example" instead of "Example Test" for the accessibility label <Text accessibilityLabel="Example"> Hello <Text accessibilityLabel="Test"> World </Text> </Text> The workaround is just to set the only the parent view's accessibilityLabel with the label desired for it and all its nested views or just not nest the views if possible. I believe a bigger change would be needed to support accessibility for nested views, for now the changes I have made should satisfy the requirements. Reviewed By: shergin Differential Revision: D5806097 fbshipit-source-id: aef2d7cec4657317fcd7dd557448905e4b767f1a
2017-09-12 19:38:13 +00:00
<Text>
Text's accessibilityLabel is the raw text itself unless it is set
explicitly.
Proper support of the accessibilityLabel for <Text> components on iOS Summary: **PR changes** The RCTText class originally overrode the accessibilityLabel and returned the raw text of the class ignoring if the accessibilityLabel was set explicitly in code. Example: <Text accessibilityLabel="Example"> Hello World </Text> // returns "Hello World" instead of "Example" for the accessibility label My update checks if the super's accessibilityLabel is not nil and returns the value else it returns the raw text itself as a default to mirror what a UIKit's UILabel does. The super's accessibilityLabel is nil if the accessibilityLabel is not ever set in code. I don't check the length of the label because if the value was set to an empty purposely then it will respect that and return whatever was set in code. With the new changes: <Text accessibilityLabel="Example"> Hello World </Text> // returns "Example" for the accessibilityLabel This change doesn't support nested <Text> components with both accessibilityLabel's value set respectively. The parent's value will return. Example: // returns "Example" instead of "Example Test" for the accessibility label <Text accessibilityLabel="Example"> Hello <Text accessibilityLabel="Test"> World </Text> </Text> The workaround is just to set the only the parent view's accessibilityLabel with the label desired for it and all its nested views or just not nest the views if possible. I believe a bigger change would be needed to support accessibility for nested views, for now the changes I have made should satisfy the requirements. Reviewed By: shergin Differential Revision: D5806097 fbshipit-source-id: aef2d7cec4657317fcd7dd557448905e4b767f1a
2017-09-12 19:38:13 +00:00
</Text>
<Text accessibilityLabel="Test of accessibilityLabel" accessible={true}>
Proper support of the accessibilityLabel for <Text> components on iOS Summary: **PR changes** The RCTText class originally overrode the accessibilityLabel and returned the raw text of the class ignoring if the accessibilityLabel was set explicitly in code. Example: <Text accessibilityLabel="Example"> Hello World </Text> // returns "Hello World" instead of "Example" for the accessibility label My update checks if the super's accessibilityLabel is not nil and returns the value else it returns the raw text itself as a default to mirror what a UIKit's UILabel does. The super's accessibilityLabel is nil if the accessibilityLabel is not ever set in code. I don't check the length of the label because if the value was set to an empty purposely then it will respect that and return whatever was set in code. With the new changes: <Text accessibilityLabel="Example"> Hello World </Text> // returns "Example" for the accessibilityLabel This change doesn't support nested <Text> components with both accessibilityLabel's value set respectively. The parent's value will return. Example: // returns "Example" instead of "Example Test" for the accessibility label <Text accessibilityLabel="Example"> Hello <Text accessibilityLabel="Test"> World </Text> </Text> The workaround is just to set the only the parent view's accessibilityLabel with the label desired for it and all its nested views or just not nest the views if possible. I believe a bigger change would be needed to support accessibility for nested views, for now the changes I have made should satisfy the requirements. Reviewed By: shergin Differential Revision: D5806097 fbshipit-source-id: aef2d7cec4657317fcd7dd557448905e4b767f1a
2017-09-12 19:38:13 +00:00
This text component's accessibilityLabel is set explicitly.
</Text>
<View
accessibilityLabel="Test of accessibilityHint"
accessibilityHint="The hint provides more info than the label does"
accessible={true}>
<Text>
This view component has both an accessibilityLabel and an
accessibilityHint explicitly set.
</Text>
</View>
<Text
accessibilityLabel="Test of accessibilityHint"
accessibilityHint="The hint provides more info than the label does">
This text component has both an accessibilityLabel and an
accessibilityHint explicitly set.
</Text>
<TouchableOpacity
accessibilityLabel="Test of accessibilityHint"
accessibilityHint="The hint provides more info than the label does">
<View>
<Text>
This button has both an accessibilityLabel and an
accessibilityHint explicitly set.
</Text>
</View>
</TouchableOpacity>
<View accessibilityElementsHidden={true}>
<Text>
This view's children are hidden from the accessibility tree
</Text>
</View>
</View>
);
}
}
class ScreenReaderStatusExample extends React.Component<{}, $FlowFixMeState> {
state = {
screenReaderEnabled: false,
};
componentDidMount() {
AccessibilityInfo.addEventListener(
'change',
this._handleScreenReaderToggled,
);
AccessibilityInfo.fetch().done(isEnabled => {
this.setState({
screenReaderEnabled: isEnabled,
});
});
}
componentWillUnmount() {
AccessibilityInfo.removeEventListener(
'change',
this._handleScreenReaderToggled,
);
}
_handleScreenReaderToggled = isEnabled => {
this.setState({
screenReaderEnabled: isEnabled,
});
};
render() {
return (
<View>
<Text>
The screen reader is{' '}
{this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
</Text>
</View>
);
}
}
exports.title = 'AccessibilityIOS';
exports.description = "Interface to show iOS' accessibility samples";
exports.examples = [
{
title: 'Accessibility elements',
render(): React.Element<any> {
return <AccessibilityIOSExample />;
},
},
{
title: 'Check if the screen reader is enabled',
render(): React.Element<any> {
return <ScreenReaderStatusExample />;
},
},
];