diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index bd14a801340..49fa8bfaffe 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -13,6 +13,8 @@
import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
+
const RNTesterBlock = require('../../components/RNTesterBlock');
const checkImageSource = require('./check.png');
const mixedCheckboxImageSource = require('./mixed.png');
@@ -104,180 +106,214 @@ const styles = StyleSheet.create({
class AccessibilityExample extends React.Component<{}> {
render(): React.Node {
return (
-
-
-
- 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.
-
-
-
-
-
-
- This view's children are hidden from the accessibility tree
-
-
-
-
- {/* 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.
-
-
-
- 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"
- accessibilityState={{disabled: true}}
- disabled={true}>
-
-
- I am disabled. Clicking me will not trigger any action.
+
+ {theme => (
+
+
+
+ Text's accessibilityLabel is the raw text itself unless it is
+ set explicitly.
-
-
-
+
-
- Alert.alert('Disabled Button has been pressed!')}
- accessibilityLabel={'You are pressing Disabled TouchableOpacity'}
- accessibilityState={{disabled: true}}>
-
-
- I am disabled. Clicking me will not trigger any action.
+
+
+ This text component's accessibilityLabel is set explicitly.
-
-
-
-
-
- This view is selected and disabled.
-
-
+
-
-
- Accessible view with label, hint, role, and state
-
-
+
+
+ This is text one.
+ This is text two.
+
+
-
-
- Accessible view with label, hint, role, and state
-
-
+
+
+ This is text one.
+ This is text two.
+
+
-
-
- Mail Address
-
- First Name
-
+
+
+ This is text one.
+ This is text two.
+
+
+
+
+
+
+ This view's children are hidden from the accessibility tree
+
+
+
+
+ {/* 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.
+
+
+
+
+
+ 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"
+ accessibilityState={{disabled: true}}
+ disabled={true}>
+
+
+ I am disabled. Clicking me will not trigger any action.
+
+
+
+
+
+
+ Alert.alert('Disabled Button has been pressed!')}
+ accessibilityLabel={
+ 'You are pressing Disabled TouchableOpacity'
+ }
+ accessibilityState={{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
+
+
+
+
+
+
+
+ Accessible view with label, hint, role, and state
+
+
+
+
+
+
+
+ Mail Address
+
+
+
+ First Name
+
+
+
+
+
+
+
+ Enable Notifications
+
+
+
+
-
-
-
- Enable Notifications
-
-
-
-
+ )}
+
);
}
}
@@ -285,134 +321,170 @@ class AccessibilityExample extends React.Component<{}> {
class AutomaticContentGrouping extends React.Component<{}> {
render(): React.Node {
return (
-
-
-
-
-
- Text number 1 with a role
-
- Text number 2
-
-
-
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'cut':
- Alert.alert('Alert', 'cut action success');
- break;
- case 'copy':
- Alert.alert('Alert', 'copy action success');
- break;
- case 'paste':
- Alert.alert('Alert', 'paste action success');
- break;
- }
- }}
- accessibilityRole="button">
-
- Text number 1
-
- Text number 2Text number 3
-
-
-
-
-
-
-
-
- Text number 1
-
-
-
-
-
-
-
-
- Text number 1
+
+ {theme => (
+
+
console.warn('onPress child')}
- accessible={false}
- accessibilityLabel="this is my label"
- accessibilityRole="image"
- accessibilityState={{disabled: true}}
- accessibilityValue={{text: 'this is the accessibility value'}}>
- Text number 3
+ accessible={true}
+ accessibilityRole="button">
+
+
+ Text number 1 with a role
+
+
+ Text number 2
+
+
-
+
+
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'cut':
+ Alert.alert('Alert', 'cut action success');
+ break;
+ case 'copy':
+ Alert.alert('Alert', 'copy action success');
+ break;
+ case 'paste':
+ Alert.alert('Alert', 'paste action success');
+ break;
+ }
+ }}
+ accessibilityRole="button">
+
+
+ Text number 1
+
+
+ Text number 2Text number 3
+
+
+
+
+
+
+
+
+ Text number 1
+
+
+
+
+
+
+
+
+
+ Text number 1
+
+ console.warn('onPress child')}
+ accessible={false}
+ accessibilityLabel="this is my label"
+ accessibilityRole="image"
+ accessibilityState={{disabled: true}}
+ accessibilityValue={{
+ text: 'this is the accessibility value',
+ }}>
+
+ Text number 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text number 2
+
+ Text number 3Text number 4
+
+
+
+
+
+
+ console.warn('onPress child')}
+ accessible={true}
+ accessibilityRole="button">
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- Text number 2
-
- Text number 3Text number 4
-
-
-
-
-
-
- console.warn('onPress child')}
- accessible={true}
- accessibilityRole="button">
-
-
-
-
-
-
-
-
-
-
-
-
+ )}
+
);
}
}
@@ -444,14 +516,20 @@ class CheckboxExample extends React.Component<
render(): React.Node {
return (
-
- Checkbox example
-
+
+ {theme => (
+
+
+ Checkbox example
+
+
+ )}
+
);
}
}
@@ -476,14 +554,20 @@ class SwitchExample extends React.Component<
render(): React.Node {
return (
-
- Switch example
-
+
+ {theme => (
+
+
+ Switch example
+
+
+ )}
+
);
}
}
@@ -589,13 +673,19 @@ class ExpandableElementExample extends React.Component<
render(): React.Node {
return (
-
- Expandable element example
-
+
+ {theme => (
+
+
+ Expandable element example
+
+
+ )}
+
);
}
}
@@ -666,55 +756,59 @@ class NestedCheckBox extends React.Component<
render(): React.Node {
return (
-
-
-
- Meat
-
-
-
- Beef
-
-
-
- Bacon
-
-
+
+ {theme => (
+
+
+
+ Meat
+
+
+
+ Beef
+
+
+
+ Bacon
+
+
+ )}
+
);
}
}
@@ -732,156 +826,210 @@ class AccessibilityRoleAndStateExample extends React.Component<{}> {
];
return (
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
- {content}
-
-
-
-
-
- Alert example
-
-
-
- Combobox example
-
-
- Menu example
-
-
- Menu bar example
-
-
- Menu item example
-
-
- Progress bar example
-
-
- Radio button example
-
-
- Radio group example
-
-
- Scrollbar example
-
-
- Spin button example
-
-
-
- Tab example
-
-
- Tab list example
-
-
- Timer example
-
-
- Toolbar example
-
-
- State busy example
-
-
- Drop Down List example
-
-
- Pager example
-
-
- Toggle Button example
-
-
- Viewgroup example
-
-
- Webview example
-
-
-
- Nested checkbox with delayed state change
-
+
+ {theme => (
+
+
+
+
+ {content}
+
+
+
+
+
+
+ {content}
+
+
+
+
+
+
+ {content}
+
+
+
+
+
+
+
+ Alert example
+
+
+
+
+
+ Combobox example
+
+
+
+
+ Menu example
+
+
+
+
+ Menu bar example
+
+
+
+
+ Menu item example
+
+
+
+
+ Progress bar example
+
+
+
+
+ Radio button example
+
+
+
+
+ Radio group example
+
+
+
+
+ Scrollbar example
+
+
+
+
+ Spin button example
+
+
+
+
+
+ Tab example
+
+
+
+
+ Tab list example
+
+
+
+
+ Timer example
+
+
+
+
+ Toolbar example
+
+
+
+
+ State busy example
+
+
+
+
+ Drop Down List example
+
+
+
+
+ Pager example
+
+
+
+
+ Toggle Button example
+
+
+
+
+ Viewgroup example
+
+
+
+
+ Webview example
+
+
+
+
+
+ Nested checkbox with delayed state change
+
+
+
+
-
-
+ )}
+
);
}
}
@@ -889,138 +1037,150 @@ class AccessibilityRoleAndStateExample extends React.Component<{}> {
class AccessibilityActionsExample extends React.Component<{}> {
render(): React.Node {
return (
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'activate':
- Alert.alert('Alert', 'View is clicked');
- break;
- }
- }}>
- Click me
+
+ {theme => (
+
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'activate':
+ Alert.alert('Alert', 'View is clicked');
+ break;
+ }
+ }}>
+ Click me
+
+
+
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'cut':
+ Alert.alert('Alert', 'cut action success');
+ break;
+ case 'copy':
+ Alert.alert('Alert', 'copy action success');
+ break;
+ case 'paste':
+ Alert.alert('Alert', 'paste action success');
+ break;
+ }
+ }}>
+
+ This view supports many actions.
+
+
+
+
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ Alert.alert('Alert', 'increment action success');
+ break;
+ case 'decrement':
+ Alert.alert('Alert', 'decrement action success');
+ break;
+ }
+ }}>
+ Slider
+
+
+
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'cut':
+ Alert.alert('Alert', 'cut action success');
+ break;
+ case 'copy':
+ Alert.alert('Alert', 'copy action success');
+ break;
+ case 'paste':
+ Alert.alert('Alert', 'paste action success');
+ break;
+ }
+ }}
+ onPress={() => Alert.alert('Button has been pressed!')}
+ accessibilityRole="button">
+
+
+ Click me
+
+
+
+
+
+
+
+
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'activate':
+ Alert.alert('Alert', 'Activate accessibility action');
+ break;
+ case 'copy':
+ Alert.alert('Alert', 'copy action success');
+ break;
+ }
+ }}>
+ Text
+
+
-
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'cut':
- Alert.alert('Alert', 'cut action success');
- break;
- case 'copy':
- Alert.alert('Alert', 'copy action success');
- break;
- case 'paste':
- Alert.alert('Alert', 'paste action success');
- break;
- }
- }}>
- This view supports many actions.
-
-
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- Alert.alert('Alert', 'increment action success');
- break;
- case 'decrement':
- Alert.alert('Alert', 'decrement action success');
- break;
- }
- }}>
- Slider
-
-
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'cut':
- Alert.alert('Alert', 'cut action success');
- break;
- case 'copy':
- Alert.alert('Alert', 'copy action success');
- break;
- case 'paste':
- Alert.alert('Alert', 'paste action success');
- break;
- }
- }}
- onPress={() => Alert.alert('Button has been pressed!')}
- accessibilityRole="button">
-
- Click me
-
-
-
-
-
-
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'activate':
- Alert.alert('Alert', 'Activate accessibility action');
- break;
- case 'copy':
- Alert.alert('Alert', 'copy action success');
- break;
- }
- }}>
- Text
-
-
-
+ )}
+
);
}
}
@@ -1057,58 +1217,66 @@ class FakeSliderExample extends React.Component<{}, FakeSliderExampleState> {
render(): React.Node {
return (
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- this.increment();
- break;
- case 'decrement':
- this.decrement();
- break;
- }
- }}
- accessibilityValue={{
- min: 0,
- now: this.state.current,
- max: 100,
- }}>
- Fake Slider
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- if (this.state.textualValue === 'center') {
- this.setState({textualValue: 'right'});
- } else if (this.state.textualValue === 'left') {
- this.setState({textualValue: 'center'});
- }
- break;
- case 'decrement':
- if (this.state.textualValue === 'center') {
- this.setState({textualValue: 'left'});
- } else if (this.state.textualValue === 'right') {
- this.setState({textualValue: 'center'});
- }
- break;
- }
- }}
- accessibilityValue={{text: this.state.textualValue}}>
+
+ {theme => (
- Equalizer
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ this.increment();
+ break;
+ case 'decrement':
+ this.decrement();
+ break;
+ }
+ }}
+ accessibilityValue={{
+ min: 0,
+ now: this.state.current,
+ max: 100,
+ }}>
+
+ Fake Slider
+
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ if (this.state.textualValue === 'center') {
+ this.setState({textualValue: 'right'});
+ } else if (this.state.textualValue === 'left') {
+ this.setState({textualValue: 'center'});
+ }
+ break;
+ case 'decrement':
+ if (this.state.textualValue === 'center') {
+ this.setState({textualValue: 'left'});
+ } else if (this.state.textualValue === 'right') {
+ this.setState({textualValue: 'center'});
+ }
+ break;
+ }
+ }}
+ accessibilityValue={{text: this.state.textualValue}}>
+
+
+ Equalizer
+
+
+
-
-
+ )}
+
);
}
}
@@ -1144,57 +1312,65 @@ class FakeSliderExampleForAccessibilityValue extends React.Component<
render(): React.Node {
return (
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- this.increment();
- break;
- case 'decrement':
- this.decrement();
- break;
- }
- }}
- aria-valuemax={100}
- aria-valuemin={0}
- aria-valuetext={'slider aria value text'}
- aria-valuenow={this.state.current}>
- Fake Slider
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- if (this.state.textualValue === 'center') {
- this.setState({textualValue: 'right'});
- } else if (this.state.textualValue === 'left') {
- this.setState({textualValue: 'center'});
- }
- break;
- case 'decrement':
- if (this.state.textualValue === 'center') {
- this.setState({textualValue: 'left'});
- } else if (this.state.textualValue === 'right') {
- this.setState({textualValue: 'center'});
- }
- break;
- }
- }}
- accessibilityValue={{text: this.state.textualValue}}>
+
+ {theme => (
- Equalizer
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ this.increment();
+ break;
+ case 'decrement':
+ this.decrement();
+ break;
+ }
+ }}
+ aria-valuemax={100}
+ aria-valuemin={0}
+ aria-valuetext={'slider aria value text'}
+ aria-valuenow={this.state.current}>
+
+ Fake Slider
+
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ if (this.state.textualValue === 'center') {
+ this.setState({textualValue: 'right'});
+ } else if (this.state.textualValue === 'left') {
+ this.setState({textualValue: 'center'});
+ }
+ break;
+ case 'decrement':
+ if (this.state.textualValue === 'center') {
+ this.setState({textualValue: 'left'});
+ } else if (this.state.textualValue === 'right') {
+ this.setState({textualValue: 'center'});
+ }
+ break;
+ }
+ }}
+ accessibilityValue={{text: this.state.textualValue}}>
+
+
+ Equalizer
+
+
+
-
-
+ )}
+
);
}
}
@@ -1272,6 +1448,7 @@ class AnnounceForAccessibility extends React.Component<{}> {
function SetAccessibilityFocusExample(props: {}): React.Node {
const myRef = React.useRef>(null);
+ const theme = React.useContext(RNTesterThemeContext);
const onPress = () => {
if (myRef && myRef.current) {
@@ -1281,7 +1458,7 @@ function SetAccessibilityFocusExample(props: {}): React.Node {
return (
-
+
SetAccessibilityFocus on native element. This should get focus after
clicking the button!
@@ -1447,16 +1624,20 @@ class EnabledExample extends React.Component<
render(): React.Node {
return (
-
-
- The {this.props.test} is{' '}
- {this.state.isEnabled ? 'enabled' : 'disabled'}
-
-
-
+
+ {theme => (
+
+
+ The {this.props.test} is{' '}
+ {this.state.isEnabled ? 'enabled' : 'disabled'}
+
+
+
+ )}
+
);
}
}
@@ -1520,6 +1701,7 @@ function DisplayOptionStatusExample({
optionName: string,
}) {
const [statusEnabled, setStatusEnabled] = React.useState(false);
+ const theme = React.useContext(RNTesterThemeContext);
React.useEffect(() => {
const listener = AccessibilityInfo.addEventListener(
// $FlowFixMe[prop-missing]
@@ -1536,7 +1718,7 @@ function DisplayOptionStatusExample({
}, [optionChecker, notification]);
return (
-
+
{optionName}
{' is '}
{statusEnabled ? 'enabled' : 'disabled'}.
@@ -1549,10 +1731,11 @@ function AccessibilityExpandedExample(): React.Node {
const [expand, setExpanded] = React.useState(false);
const expandAction = {name: 'expand'};
const collapseAction = {name: 'collapse'};
+ const theme = React.useContext(RNTesterThemeContext);
return (
-
+
The following component announces expanded/collapsed state correctly
@@ -1596,6 +1785,23 @@ function AccessibilityExpandedExample(): React.Node {
);
}
+function AccessibilityTextInputWithArialabelledByAttributeExample(): React.Node {
+ const theme = React.useContext(RNTesterThemeContext);
+ return (
+
+
+ Phone Number
+
+
+
+ );
+}
+
exports.title = 'Accessibility';
exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo';
exports.description = 'Examples of using Accessibility APIs.';
@@ -1688,17 +1894,11 @@ exports.examples = [
},
},
{
- title: 'TextInput with aria-labelledby attribute"',
- render(): React.Element {
- return (
-
- Phone Number
-
-
- );
+ title: 'TextInput with aria-labelledby attribute',
+ render(): React.Element<
+ typeof AccessibilityTextInputWithArialabelledByAttributeExample,
+ > {
+ return ;
},
},
];