diff --git a/RNTester/js/AccessibilityAndroidExample.android.js b/RNTester/js/AccessibilityAndroidExample.android.js index aa41b63a122f..b6e4c89bda08 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 f9feffc05c76..bcd6bccd670f 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 6e38076328bd..61684752699a 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 675ee5bb68f6..b2e9b49ab5db 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'),