From 1889b797d31b4111eb9ece3cb91f33d4064c6ef1 Mon Sep 17 00:00:00 2001 From: Sharon Gong Date: Mon, 4 Mar 2019 22:05:08 -0800 Subject: [PATCH] Create a cross-platform accessibility example module (#23722) Summary: This PR divides the accessibility tests into two activities-- a cross-platform activity for accessibility features which are expected to work on all platforms, and platform specific tests for Android and iOS. We believe that most, if not all, accessibility features should be cross-platform, with fallback implementations where the underlying concept doesn't exist on a particular platform. This division of the tests makes it clearer for developers which features are expected to work on all supported platforms, and which are platform-specific. [CATEGORY] general, Android, iOS [TYPE] change Message Refactor the RNTester accessibility activities to better represent where the features are expected to work. Moves all cross-platform tests to AccessibilityExample.js, Android-specific tests to AccessibilityAndroidExample.android.js, and iOS-specific tests to AccessibilityIOsExample.ios.js. Pull Request resolved: https://github.com/facebook/react-native/pull/23722 Differential Revision: D14320696 Pulled By: cpojer fbshipit-source-id: b5ab7a82a90f06d55a24262e86bd69fbdc890427 --- .../js/AccessibilityAndroidExample.android.js | 166 +-------------- RNTester/js/AccessibilityExample.js | 193 ++++++++++++++++++ RNTester/js/AccessibilityIOSExample.js | 99 +-------- RNTester/js/RNTesterList.android.js | 4 + RNTester/js/RNTesterList.ios.js | 5 + 5 files changed, 211 insertions(+), 256 deletions(-) create mode 100644 RNTester/js/AccessibilityExample.js diff --git a/RNTester/js/AccessibilityAndroidExample.android.js b/RNTester/js/AccessibilityAndroidExample.android.js index aa41b63a122..b6e4c89bda0 100644 --- a/RNTester/js/AccessibilityAndroidExample.android.js +++ b/RNTester/js/AccessibilityAndroidExample.android.js @@ -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 = () => { @@ -83,134 +57,7 @@ class AccessibilityAndroidExample extends React.Component { render() { return ( - - - - This is - nontouchable normal view. - - - - - - This is - - nontouchable accessible view without label. - - - - - - - This is - - nontouchable accessible view with label. - - - - - - - This is - - nontouchable accessible view with label. - - - - - - - ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT) - } - accessibilityRole="link"> - - Click me - Or not - - - - - - - ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT) - } - accessibilityRole="button"> - - Click me - Or not - - - - - - - ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT) - } - accessibilityRole="button" - accessibilityStates={['disabled']} - disabled={true}> - - I am disabled - Clicking me will not trigger any action. - - - - - - - ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT) - } - accessibilityRole="button" - accessibilityHint="Triggers - Toasts"> - - Click Me! - - - - - - - Accessible view with hint, role, and state - - Talkback will say: accessibility hint button, selected{' '} - - - - - - - Accessible view with label, hint, role, and state - - Talkback will say: accessibility label, hint button, selected{' '} - - - - - - - This accessible view has no label, so the text is read. - - - + @@ -222,13 +69,6 @@ class AccessibilityAndroidExample extends React.Component { - - - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - - - + + + Text's accessibilityLabel is the raw text itself unless it is set + explicitly. + + + + + + This text component's accessibilityLabel is set explicitly. + + + + + + This is text one. + This is text two. + + + + + + This is text one. + This is text two. + + + + + + This is text one. + This is text two. + + + + {/* Android screen readers will say the accessibility hint instead of the text + since the view doesn't have a label. */} + + + This is text one. + This is text two. + + + + + + This is text one. + This is text two. + + + + + This is a title. + + + + Alert.alert('Link has been clicked!')} + accessibilityRole="link"> + + Click me + + + + + + Alert.alert('Button has been pressed!')} + accessibilityRole="button"> + Click me + + + + + Alert.alert('Button has been pressed!')} + accessibilityRole="button" + accessibilityStates={['disabled']} + disabled={true}> + + + I am disabled. Clicking me will not trigger any action. + + + + + + + + This view is selected and disabled. + + + + + + Accessible view with label, hint, role, and state + + + + ); + } +} + +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 ( + + + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + + + ); + } +} + +exports.title = 'Accessibility'; +exports.description = 'Examples of using Accessibility APIs.'; +exports.examples = [ + { + title: 'Accessibility elements', + render(): React.Element { + return ; + }, + }, + { + title: 'Check if the screen reader is enabled', + render(): React.Element { + return ; + }, + }, +]; diff --git a/RNTester/js/AccessibilityIOSExample.js b/RNTester/js/AccessibilityIOSExample.js index f9feffc05c7..bcd6bccd670 100644 --- a/RNTester/js/AccessibilityIOSExample.js +++ b/RNTester/js/AccessibilityIOSExample.js @@ -14,11 +14,13 @@ const React = require('react'); const ReactNative = require('react-native'); const {AccessibilityInfo, Text, View, TouchableOpacity, Alert} = ReactNative; +const RNTesterBlock = require('./RNTesterBlock'); + type Props = $ReadOnly<{||}>; class AccessibilityIOSExample extends React.Component { render() { return ( - + Alert.alert('Alert', 'onAccessibilityTap success') @@ -36,112 +38,23 @@ class AccessibilityIOSExample extends React.Component { accessible={true}> Accessibility escape example - - Accessibility label example - - - Accessibility traits example - - - Text's accessibilityLabel is the raw text itself unless it is set - explicitly. - - - This text component's accessibilityLabel is set explicitly. - - - - This view component has both an accessibilityLabel and an - accessibilityHint explicitly set. - - - - This text component has both an accessibilityLabel and an - accessibilityHint explicitly set. - - - - - This button has both an accessibilityLabel and an - accessibilityHint explicitly set. - - - This view's children are hidden from the accessibility tree - - ); - } -} - -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 ( - - - The screen reader is{' '} - {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - - + ); } } exports.title = 'AccessibilityIOS'; -exports.description = "Interface to show iOS' accessibility samples"; +exports.description = 'iOS specific Accessibility APIs'; exports.examples = [ { - title: 'Accessibility elements', + title: 'iOS Accessibility elements', render(): React.Element { return ; }, }, - { - title: 'Check if the screen reader is enabled', - render(): React.Element { - return ; - }, - }, ]; diff --git a/RNTester/js/RNTesterList.android.js b/RNTester/js/RNTesterList.android.js index 6e38076328b..61684752699 100644 --- a/RNTester/js/RNTesterList.android.js +++ b/RNTester/js/RNTesterList.android.js @@ -118,6 +118,10 @@ const ComponentExamples: Array = [ ]; const APIExamples: Array = [ + { + key: 'AccessibilityExample', + module: require('./AccessibilityExample'), + }, { key: 'AccessibilityAndroidExample', /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found diff --git a/RNTester/js/RNTesterList.ios.js b/RNTester/js/RNTesterList.ios.js index 675ee5bb68f..b2e9b49ab5d 100644 --- a/RNTester/js/RNTesterList.ios.js +++ b/RNTester/js/RNTesterList.ios.js @@ -171,6 +171,11 @@ const ComponentExamples: Array = [ ]; const APIExamples: Array = [ + { + key: 'AccessibilityExample', + module: require('./AccessibilityExample'), + supportsTVOS: false, + }, { key: 'AccessibilityIOSExample', module: require('./AccessibilityIOSExample'),