Skip to content

Commit 42620e4

Browse files
joevilchesfacebook-github-bot
authored andcommitted
Label coopting RN Tester example (facebook#50812)
Summary: tsia, adding some accessibility examples that we have refined so far this half. Changelog: [Internal] Differential Revision: D73283176
1 parent 0243be6 commit 42620e4

File tree

1 file changed

+46
-4
lines changed

1 file changed

+46
-4
lines changed

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

+46-4
Original file line numberDiff line numberDiff line change
@@ -1740,11 +1740,11 @@ function AccessibilityOrderExample(): React.Node {
17401740
);
17411741
}
17421742

1743-
function TextLinkExample(): React.Node {
1744-
const handleLinkPress = (linkText: string) => {
1745-
Alert.alert('Link Clicked', `You clicked on the ${linkText} link!`);
1746-
};
1743+
const handleLinkPress = (linkText: string) => {
1744+
Alert.alert('Link Clicked', `You clicked on the ${linkText} link!`);
1745+
};
17471746

1747+
function TextLinkExample(): React.Node {
17481748
return (
17491749
<View style={{gap: 10}}>
17501750
<RNTesterText>
@@ -1773,6 +1773,42 @@ function TextLinkExample(): React.Node {
17731773
);
17741774
}
17751775

1776+
function LabelCooptingExample(): React.Node {
1777+
return (
1778+
<View style={{gap: 10}} experimental_accessibilityOrder={['a', 'b', 'c']}>
1779+
<View
1780+
accessible={true}
1781+
nativeID="a"
1782+
style={{
1783+
backgroundColor: 'lightseagreen',
1784+
padding: 10,
1785+
borderRadius: 5,
1786+
}}>
1787+
<RNTesterText>
1788+
This View is accessible and it will coopt this text. This text is not
1789+
accessible because it got coopted!
1790+
</RNTesterText>
1791+
</View>
1792+
<View
1793+
accessible={true}
1794+
nativeID="b"
1795+
style={{backgroundColor: 'lightcoral', padding: 10, borderRadius: 5}}>
1796+
<RNTesterText nativeID="c">
1797+
This View is accessible and it will coopt this text. This text is not
1798+
accessible because it got coopted! But it's{' '}
1799+
<RNTesterText
1800+
accessibilityRole="link"
1801+
onPress={() => handleLinkPress('first')}
1802+
style={styles.link}>
1803+
links
1804+
</RNTesterText>{' '}
1805+
are!
1806+
</RNTesterText>
1807+
</View>
1808+
</View>
1809+
);
1810+
}
1811+
17761812
exports.title = 'Accessibility';
17771813
exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo';
17781814
exports.description = 'Examples of using Accessibility APIs.';
@@ -1882,4 +1918,10 @@ exports.examples = [
18821918
return <TextLinkExample />;
18831919
},
18841920
},
1921+
{
1922+
title: 'Label coopting',
1923+
render(): React.MixedElement {
1924+
return <LabelCooptingExample />;
1925+
},
1926+
},
18851927
];

0 commit comments

Comments
 (0)