diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index 560f3d9ef5f..4966f92e402 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -25,6 +25,7 @@ import {
Image,
ImageBackground,
Platform,
+ Pressable,
ScrollView,
StyleSheet,
Switch,
@@ -105,6 +106,10 @@ const styles = StyleSheet.create({
width: 25,
height: 25,
},
+ bigBoxSize: {
+ width: 100,
+ height: 100,
+ },
link: {
color: 'blue',
},
@@ -1657,83 +1662,402 @@ function AccessibilityOrderExample(): React.Node {
return (
<>
- accessibilityOrder=['e', 'ca', 'b', 'a', 'c', 'd']
+ Basic accessibility order: accessibilityOrder=['b', 'c', 'a']
+ style={{flexDirection: 'row', gap: 10, marginBottom: 8}}
+ experimental_accessibilityOrder={['b', 'c', 'a']}>
+
+
+
+ Accessibility order disables components not in the order:
+ accessibilityOrder=['b', 'c', 'a']
+
+
+
+
+ Not in the order :P
+
+
+
+ I am a pressable
+
+
+
+
+ Accessibility order won't enable non-accessible components in the order:
+ accessibilityOrder=['b', 'c', 'a']
+
+
+
+
+
+
+ Not accessible, in the order
+
+
+
+
+ Accessibility order can reference containers: accessibilityOrder=['b',
+ 'c', 'a']
+
+
+
+
+
+
+
+
+
+
+ Accessibility order can reference other accessibilityOrders:
+ accessibilityOrder=['b', 'c', 'a']. a's accessibilityOrder=[4, 2, 1, 3]
+
+
+
+
+
+
+
+
+
+
+
+
+ Accessibility order can reference the root: accessibilityOrder=['b',
+ 'c', 'root', 'a'].
+
+
+
+
+
+
+
+ Accessibility order can reference parents and their decendants in any
+ order: accessibilityOrder=[child 2, child 1, child 2.3, child 3.2, child
+ 4, child 2.4, parent, child 2.1, child 2.4]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Accessibility order will still co-opt labels even if they are not in the
+ order: accessibilityOrder=[b, c, a]
+
+
+
+
+
+
+
+ I am co-opted by my parent!!
+
-
+
-
+ style={{color: 'black', fontSize: 10}}>
+ I won't get co-opted because my parent has a label
+
+
+
+ Accessibility order let's you focus links, but the text needs to be
+ included: accessibilityOrder=[b, a, c, text]
+
+
-
+
+
-
-
+ style={{fontSize: 10}}
+ nativeID="text">
+ I am a{' '}
+
+ link!
+
+
+ nativeID="c"
+ accessibilityLabel="c"
+ style={[{backgroundColor: 'yellow'}, styles.boxSize]}>
+
+ I am a{' '}
+
+ non-discoverable link!
+
+
+
>
);
@@ -1774,7 +2098,9 @@ function TextLinkExample(): React.Node {
function LabelCooptingExample(): React.Node {
return (
-
+
+
+ I am some text that will get coopted
+
+ I am also some text that will get coopted
+