diff --git a/packages/rn-tester/js/components/ExamplePage.js b/packages/rn-tester/js/components/ExamplePage.js
index ff9bf7f6f3ac..09ed2bc33f8e 100644
--- a/packages/rn-tester/js/components/ExamplePage.js
+++ b/packages/rn-tester/js/components/ExamplePage.js
@@ -78,6 +78,7 @@ const styles = StyleSheet.create({
examplesContainer: {
width: ScreenWidth,
flexGrow: 1,
+ flex: 1,
},
description: {
marginVertical: 8,
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index f9e8e6c12e50..b5e0d4a1c2ee 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -18,8 +18,10 @@ const {
View,
TouchableOpacity,
TouchableWithoutFeedback,
+ findNodeHandle,
Alert,
StyleSheet,
+ Platform,
} = require('react-native');
const RNTesterBlock = require('../../components/RNTesterBlock');
@@ -27,6 +29,7 @@ const RNTesterBlock = require('../../components/RNTesterBlock');
const checkImageSource = require('./check.png');
const uncheckImageSource = require('./uncheck.png');
const mixedCheckboxImageSource = require('./mixed.png');
+const {createRef} = require('react');
const styles = StyleSheet.create({
image: {
@@ -692,58 +695,158 @@ class FakeSliderExample extends React.Component {
}
}
-class ScreenReaderStatusExample extends React.Component<{}> {
- state = {
- screenReaderEnabled: false,
- };
-
- componentDidMount() {
- AccessibilityInfo.addEventListener(
- 'change',
- this._handleScreenReaderToggled,
- );
- AccessibilityInfo.fetch().done(isEnabled => {
- this.setState({
- screenReaderEnabled: isEnabled,
- });
- });
- }
+class AnnounceForAccessibility extends React.Component<{}> {
+ _handleOnPress = () =>
+ AccessibilityInfo.announceForAccessibility('Announcement Test');
- componentWillUnmount() {
- AccessibilityInfo.removeEventListener(
- 'change',
- this._handleScreenReaderToggled,
+ render() {
+ return (
+
+
+
);
}
+}
- _handleScreenReaderToggled = isEnabled => {
- this.setState({
- screenReaderEnabled: isEnabled,
- });
+class SetAccessibilityFocusExample extends React.Component<{}> {
+ state = {
+ reactTag: null,
};
render() {
+ const myRef = createRef();
+
+ const onClose = () => {
+ if (myRef && myRef.current) {
+ const reactTag = findNodeHandle(myRef.current);
+ this.setState({reactTag});
+ AccessibilityInfo.setAccessibilityFocus(reactTag);
+ }
+ };
+
return (
- The screen reader is{' '}
- {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
+ SetAccessibilityFocus on ReactTag:{' '}
+ {this.state.reactTag == null ? 'Null' : this.state.reactTag}
+
);
}
}
-class AnnounceForAccessibility extends React.Component<{}> {
- _handleOnPress = () =>
- AccessibilityInfo.announceForAccessibility('Announcement Test');
+class EnabledExamples extends React.Component<{}> {
+ render() {
+ return (
+
+ {Platform.OS === 'ios' ? (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ ) : null}
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+class EnabledExample extends React.Component<{}> {
+ state = {
+ isEnabled: false,
+ };
+
+ componentDidMount() {
+ AccessibilityInfo.addEventListener(
+ this.props.eventListener,
+ this._handleToggled,
+ );
+
+ switch (this.props.eventListener) {
+ case 'reduceMotionChanged':
+ return AccessibilityInfo.isReduceMotionEnabled().then(state => {
+ this.setState({isEnabled: state});
+ });
+ default:
+ return null;
+ }
+ }
+
+ componentWillUnmount() {
+ AccessibilityInfo.removeEventListener(
+ this.props.eventListener,
+ this._handleToggled,
+ );
+ }
+
+ _handleToggled = isEnabled => {
+ if (!this.state.isEnabled) {
+ this.setState({isEnabled});
+ } else {
+ this.setState({isEnabled: false});
+ }
+ };
render() {
return (
+
+ The {this.props.test} is{' '}
+ {this.state.isEnabled ? 'enabled' : 'disabled'}
+
);
@@ -778,16 +881,22 @@ exports.examples = [
return ;
},
},
- {
- title: 'Check if the screen reader is enabled',
- render(): React.Element {
- return ;
- },
- },
{
title: 'Check if the screen reader announces',
render(): React.Element {
return ;
},
},
+ {
+ title: 'Check if accessibility is focused',
+ render(): React.Element {
+ return ;
+ },
+ },
+ {
+ title: 'Check if these properties are enabled',
+ render(): React.Element {
+ return ;
+ },
+ },
];