@@ -1740,11 +1740,11 @@ function AccessibilityOrderExample(): React.Node {
1740
1740
) ;
1741
1741
}
1742
1742
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
+ } ;
1747
1746
1747
+ function TextLinkExample ( ) : React . Node {
1748
1748
return (
1749
1749
< View style = { { gap : 10 } } >
1750
1750
< RNTesterText >
@@ -1773,6 +1773,42 @@ function TextLinkExample(): React.Node {
1773
1773
) ;
1774
1774
}
1775
1775
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
+
1776
1812
exports . title = 'Accessibility' ;
1777
1813
exports . documentationURL = 'https://reactnative.dev/docs/accessibilityinfo' ;
1778
1814
exports . description = 'Examples of using Accessibility APIs.' ;
@@ -1882,4 +1918,10 @@ exports.examples = [
1882
1918
return < TextLinkExample /> ;
1883
1919
} ,
1884
1920
} ,
1921
+ {
1922
+ title : 'Label coopting' ,
1923
+ render ( ) : React . MixedElement {
1924
+ return < LabelCooptingExample /> ;
1925
+ } ,
1926
+ } ,
1885
1927
] ;
0 commit comments