Skip to content

Create a cross-platform accessibility example module #23722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
marcmulcahy wants to merge 1 commit into from
Closed

Create a cross-platform accessibility example module #23722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 3 additions & 163 deletions RNTester/js/AccessibilityAndroidExample.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,32 +35,6 @@ class AccessibilityAndroidExample extends React.Component {
count: 0,
backgroundImportantForAcc: 0,
forgroundImportantForAcc: 0,
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,
});
};

_addOne = () => {
Expand All @@ -83,134 +57,7 @@ class AccessibilityAndroidExample extends React.Component {

render() {
return (
<RNTesterPage title={'Accessibility'}>
<RNTesterBlock title="Nonaccessible view with TextViews">
<View>
<Text style={{color: 'green'}}>This is</Text>
<Text style={{color: 'blue'}}>nontouchable normal view.</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Accessible view with TextViews wihout label">
<View accessible={true}>
<Text style={{color: 'green'}}>This is</Text>
<Text style={{color: 'blue'}}>
nontouchable accessible view without label.
</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Accessible view with TextViews with label">
<View
accessible={true}
accessibilityLabel="I have label, so I read it instead of embedded text.">
<Text style={{color: 'green'}}>This is</Text>
<Text style={{color: 'blue'}}>
nontouchable accessible view with label.
</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Touchable with accessibilityRole = header">
<View
accessible={true}
accessibilityLabel="I'm a header, so I read it instead of embedded text."
accessibilityRole="header">
<Text style={{color: 'green'}}>This is</Text>
<Text style={{color: 'blue'}}>
nontouchable accessible view with label.
</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Touchable with accessibilityRole = link">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)
}
accessibilityRole="link">
<View style={styles.embedded}>
<Text>Click me</Text>
<Text>Or not</Text>
</View>
</TouchableWithoutFeedback>
</RNTesterBlock>

<RNTesterBlock title="Touchable with accessibilityRole = button">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)
}
accessibilityRole="button">
<View style={styles.embedded}>
<Text>Click me</Text>
<Text>Or not</Text>
</View>
</TouchableWithoutFeedback>
</RNTesterBlock>

<RNTesterBlock title="Disabled Touchable with accessibilityRole = button">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)
}
accessibilityRole="button"
accessibilityStates={['disabled']}
disabled={true}>
<View>
<Text>I am disabled</Text>
<Text>Clicking me will not trigger any action.</Text>
</View>
</TouchableWithoutFeedback>
</RNTesterBlock>

<RNTesterBlock title="Touchable with accessibilityRole = button and accessibilityHint">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)
}
accessibilityRole="button"
accessibilityHint="Triggers
Toasts">
<View>
<Text>Click Me!</Text>
</View>
</TouchableWithoutFeedback>
</RNTesterBlock>

<RNTesterBlock title="Accessible View with hint, role, and state">
<View
accessible={true}
accessibilityRole="button"
accessibilityStates={['selected']}
accessibilityHint="accessibility hint">
<Text>Accessible view with hint, role, and state</Text>
<Text style={{color: 'gray'}}>
Talkback will say: accessibility hint button, selected{' '}
</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Accessible View with label, hint, role, and state">
<View
accessible={true}
accessibilityLabel="accessibility Label"
accessibilityRole="button"
accessibilityStates={['selected']}
accessibilityHint="accessibility Hint">
<Text>Accessible view with label, hint, role, and state</Text>
<Text style={{color: 'gray'}}>
Talkback will say: accessibility label, hint button, selected{' '}
</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Accessible View with no other properties set">
<View accessible={true}>
<Text>This accessible view has no label, so the text is read.</Text>
</View>
</RNTesterBlock>

<RNTesterPage title={'Accessibility Android APIs'}>
<RNTesterBlock title="LiveRegion">
<TouchableWithoutFeedback onPress={this._addOne}>
<View style={styles.embedded}>
Expand All @@ -222,13 +69,6 @@ class AccessibilityAndroidExample extends React.Component {
</Text>
</RNTesterBlock>

<RNTesterBlock title="Check if the screen reader is enabled">
<Text>
The screen reader is{' '}
{this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
</Text>
</RNTesterBlock>

<RNTesterBlock title="Overlapping views and importantForAccessibility property">
<View style={styles.container}>
<View
Expand Down Expand Up @@ -328,8 +168,8 @@ const styles = StyleSheet.create({
},
});

exports.title = 'Accessibility';
exports.description = 'Examples of using Accessibility API.';
exports.title = 'AccessibilityAndroid';
exports.description = 'Android specific Accessibility APIs.';
exports.examples = [
{
title: 'Accessibility elements',
Expand Down
193 changes: 193 additions & 0 deletions RNTester/js/AccessibilityExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/

'use strict';

const React = require('react');
const ReactNative = require('react-native');
const {AccessibilityInfo, Text, View, TouchableOpacity, Alert} = ReactNative;

const RNTesterBlock = require('./RNTesterBlock');

class AccessibilityExample extends React.Component {
render() {
return (
<View>
<RNTesterBlock title="TextView without label">
<Text>
Text's accessibilityLabel is the raw text itself unless it is set
explicitly.
</Text>
</RNTesterBlock>

<RNTesterBlock title="TextView with label">
<Text accessibilityLabel="I have label, so I read it instead of embedded text.">
This text component's accessibilityLabel is set explicitly.
</Text>
</RNTesterBlock>

<RNTesterBlock title="Nonaccessible view with TextViews">
<View>
<Text style={{color: 'green'}}>This is text one.</Text>
<Text style={{color: 'blue'}}>This is text two.</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Accessible view with TextViews wihout label">
<View accessible={true}>
<Text style={{color: 'green'}}>This is text one.</Text>
<Text style={{color: 'blue'}}>This is text two.</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Accessible view with TextViews with label">
<View
accessible={true}
accessibilityLabel="I have label, so I read it instead of embedded text.">
<Text style={{color: 'green'}}>This is text one.</Text>
<Text style={{color: 'blue'}}>This is text two.</Text>
</View>
</RNTesterBlock>

{/* Android screen readers will say the accessibility hint instead of the text
since the view doesn't have a label. */}
<RNTesterBlock title="Accessible view with TextViews with hint">
<View accessibilityHint="Accessibility hint." accessible={true}>
<Text style={{color: 'green'}}>This is text one.</Text>
<Text style={{color: 'blue'}}>This is text two.</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Accessible view TextViews with label and hint">
<View
accessibilityLabel="Accessibility label."
accessibilityHint="Accessibility hint."
accessible={true}>
<Text style={{color: 'green'}}>This is text one.</Text>
<Text style={{color: 'blue'}}>This is text two.</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="Text with accessibilityRole = header">
<Text accessibilityRole="header">This is a title.</Text>
</RNTesterBlock>

<RNTesterBlock title="Touchable with accessibilityRole = link">
<TouchableOpacity
onPress={() => Alert.alert('Link has been clicked!')}
accessibilityRole="link">
<View>
<Text>Click me</Text>
</View>
</TouchableOpacity>
</RNTesterBlock>

<RNTesterBlock title="Touchable with accessibilityRole = button">
<TouchableOpacity
onPress={() => Alert.alert('Button has been pressed!')}
accessibilityRole="button">
<Text>Click me</Text>
</TouchableOpacity>
</RNTesterBlock>

<RNTesterBlock title="Disabled Touchable with role">
<TouchableOpacity
onPress={() => Alert.alert('Button has been pressed!')}
accessibilityRole="button"
accessibilityStates={['disabled']}
disabled={true}>
<View>
<Text>
I am disabled. Clicking me will not trigger any action.
</Text>
</View>
</TouchableOpacity>
</RNTesterBlock>

<RNTesterBlock title="View with multiple states">
<View
accessible={true}
accessibilityStates={['selected', 'disabled']}>
<Text>This view is selected and disabled.</Text>
</View>
</RNTesterBlock>

<RNTesterBlock title="View with label, hint, role, and state">
<View
accessible={true}
accessibilityLabel="Accessibility label."
accessibilityRole="button"
accessibilityStates={['selected']}
accessibilityHint="Accessibility hint.">
<Text>Accessible view with label, hint, role, and state</Text>
</View>
</RNTesterBlock>
</View>
);
}
}

class ScreenReaderStatusExample extends React.Component<{}> {
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 = 'Accessibility';
exports.description = 'Examples of using Accessibility APIs.';
exports.examples = [
{
title: 'Accessibility elements',
render(): React.Element<typeof AccessibilityExample> {
return <AccessibilityExample />;
},
},
{
title: 'Check if the screen reader is enabled',
render(): React.Element<typeof ScreenReaderStatusExample> {
return <ScreenReaderStatusExample />;
},
},
];
Loading