adding ImageBackground Example

facebook · Jul 22, 2022 · 365b3d3 · 365b3d3
1 parent e643576
commit 365b3d3
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -14,6 +14,7 @@ import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
 const React = require('react');
 const {
+  ImageBackground,
   AccessibilityInfo,
   TextInput,
   Button,
@@ -67,6 +68,21 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'space-between',
   },
+  container: {
+    flex: 1,
+  },
+  ImageBackground: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  text: {
+    color: 'white',
+    fontSize: 20,
+    lineHeight: 84,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    backgroundColor: '#000000c0',
+  },
 });
 
 class AccessibilityExample extends React.Component<{}> {
@@ -1035,6 +1051,37 @@ class EnabledExamples extends React.Component<{}> {
   }
 }
 
+class ImportantForAccessibility extends React.Component<{}> {
+  render(): React.Node {
+    return (
+      <View>
+        <RNTesterBlock title="no-hide-descendants with ImageBackground">
+          <View style={styles.container}>
+            <ImageBackground
+              importantForAccessibility="no-hide-descendants"
+              source={require('../../assets/trees.jpg')}
+              resizeMode="cover"
+              style={styles.ImageBackground}>
+              <Text style={styles.text}>not accessible</Text>
+            </ImageBackground>
+          </View>
+        </RNTesterBlock>
+        <RNTesterBlock title="no with ImageBackground">
+          <View style={styles.container}>
+            <ImageBackground
+              importantForAccessibility="no"
+              source={require('../../assets/trees.jpg')}
+              resizeMode="cover"
+              style={styles.ImageBackground}>
+              <Text style={styles.text}>accessible</Text>
+            </ImageBackground>
+          </View>
+        </RNTesterBlock>
+      </View>
+    );
+  }
+}
+
 class EnabledExample extends React.Component<
   {
     eventListener:
@@ -1240,6 +1287,12 @@ exports.examples = [
       return <EnabledExamples />;
     },
   },
+  {
+    title: 'Testing importantForAccessibility',
+    render(): React.Element<typeof EnabledExamples> {
+      return <ImportantForAccessibility />;
+    },
+  },
   {
     title:
       'Check if accessibilityState disabled is announced when the screenreader focus moves on the image',