adding importantForAccessibility for Text, Button, ImageBackground

Libraries/Components/Button.js

@@ -145,6 +145,11 @@ type ButtonProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+
+  /**
+   * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
 |}>;
@@ -264,6 +269,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
+      importantForAccessibility,
       color,
       onPress,
       touchSoundDisabled,
@@ -315,6 +321,12 @@ class Button extends React.Component<ButtonProps> {
     const Touchable =
       Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
+    // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
+    const _importantForAccessibility =
+      importantForAccessibility === 'no'
+        ? 'no-hide-descendants'
+        : importantForAccessibility;
+
     return (
       <Touchable
         accessible={accessible}
@@ -325,6 +337,7 @@ class Button extends React.Component<ButtonProps> {
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
+        importantForAccessibility={_importantForAccessibility}
         hasTVPreferredFocus={hasTVPreferredFocus}
         nextFocusDown={nextFocusDown}
         nextFocusForward={nextFocusForward}

Libraries/Components/__tests__/Button-test.js

@@ -46,4 +46,14 @@ describe('<Button />', () => {
     expect(ReactTestRenderer.create( <Button title="Test Button" disabled={false} accessibilityState={{disabled: false}} />)
     ).toMatchSnapshot();
   });
+
+  it('should be set importantForAccessibility={no-hide-descendants} when importantForAccessibility={no-hide-descendants}', () => {
+    expect(ReactTestRenderer.create( <Button title="Test Button" importantForAccessibility={'no-hide-descendants'} />)
+    ).toMatchSnapshot();
+  });
+
+  it('should be set importantForAccessibility={no-hide-descendants} when importantForAccessibility={no}', () => {
+    expect(ReactTestRenderer.create( <Button title="Test Button" importantForAccessibility={'no'} />)
+    ).toMatchSnapshot();
+  });
 });

Libraries/Components/__tests__/__snapshots__/Button-test.js.snap

@@ -162,6 +162,96 @@ exports[`<Button /> should be disabled when disabled={true} and accessibilitySta
 </View>
 `;
 
+exports[`<Button /> should be set importantForAccessibility={no-hide-descendants} when importantForAccessibility={no} 1`] = `
+<View
+  accessibilityRole="button"
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  importantForAccessibility="no-hide-descendants"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {},
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#007AFF",
+            "fontSize": 18,
+            "margin": 8,
+            "textAlign": "center",
+          },
+        ]
+      }
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`<Button /> should be set importantForAccessibility={no-hide-descendants} when importantForAccessibility={no-hide-descendants} 1`] = `
+<View
+  accessibilityRole="button"
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  importantForAccessibility="no-hide-descendants"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {},
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#007AFF",
+            "fontSize": 18,
+            "margin": 8,
+            "textAlign": "center",
+          },
+        ]
+      }
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
 exports[`<Button /> should not be disabled when disabled={false} and accessibilityState={{disabled: false}} 1`] = `
 <View
   accessibilityRole="button"

Libraries/Image/ImageBackground.js

@@ -66,15 +66,25 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
   };
 
   render(): React.Node {
-    const {children, style, imageStyle, imageRef, ...props} = this.props;
+    const {
+      children,
+      style,
+      imageStyle,
+      imageRef,
+      importantForAccessibility,
+      ...props
+    } = this.props;
+
     const flattenedStyle = flattenStyle(style);
     return (
       <View
         accessibilityIgnoresInvertColors={true}
+        importantForAccessibility={importantForAccessibility}
         style={style}
         ref={this._captureRef}>
         <Image
           {...props}
+          importantForAccessibility={importantForAccessibility}
           style={[
             StyleSheet.absoluteFill,
             {

Libraries/Image/__tests__/ImageBackground-test.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ * @flow strict-local
+ */
+
+'use strict';
+
+const React = require('react');
+const ImageBackground = require('../ImageBackground');
+const render = require('../../../jest/renderer');
+
+describe('<ImageBackground />', () => {
+  it('should render as <ImageBackground> when mocked', () => {
+    const instance = render.create(
+      <ImageBackground
+        style={{width: 150, height: 50}}
+        source={{uri: 'foo-bar.jpg'}}
+      />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should shallow render as <ImageBackground> when mocked', () => {
+    const output = render.shallow(
+      <ImageBackground
+        style={{width: 150, height: 50}}
+        source={{uri: 'foo-bar.jpg'}}
+      />,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should shallow render as <ForwardRef(ImageBackground)> when not mocked', () => {
+    jest.dontMock('../ImageBackground');
+
+    const output = render.shallow(
+      <ImageBackground
+        style={{width: 150, height: 50}}
+        source={{uri: 'foo-bar.jpg'}}
+      />,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render as <RCTImageView> when not mocked', () => {
+    jest.dontMock('../ImageBackground');
+
+    const instance = render.create(
+      <ImageBackground
+        style={{width: 150, height: 50}}
+        source={{uri: 'foo-bar.jpg'}}
+      />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should be set importantForAccessibility in <View> and <Image>', () => {
+    const instance = render.create(
+      <ImageBackground
+        importantForAccessibility={'no'}
+        style={{width: 150, height: 50}}
+        source={{uri: 'foo-bar.jpg'}}
+      />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+});

Libraries/Image/__tests__/__snapshots__/ImageBackground-test.js.snap

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ImageBackground /> should be set importantForAccessibility in <View> and <Image> 1`] = `
+<View
+  accessibilityIgnoresInvertColors={true}
+  importantForAccessibility="no"
+  style={
+    Object {
+      "height": 50,
+      "width": 150,
+    }
+  }
+>
+  <Image
+    importantForAccessibility="no"
+    source={
+      Object {
+        "uri": "foo-bar.jpg",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        Object {
+          "height": 50,
+          "width": 150,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`<ImageBackground /> should render as <ImageBackground> when mocked 1`] = `
+<View
+  accessibilityIgnoresInvertColors={true}
+  style={
+    Object {
+      "height": 50,
+      "width": 150,
+    }
+  }
+>
+  <Image
+    source={
+      Object {
+        "uri": "foo-bar.jpg",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        Object {
+          "height": 50,
+          "width": 150,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`<ImageBackground /> should render as <RCTImageView> when not mocked 1`] = `
+<View
+  accessibilityIgnoresInvertColors={true}
+  style={
+    Object {
+      "height": 50,
+      "width": 150,
+    }
+  }
+>
+  <Image
+    source={
+      Object {
+        "uri": "foo-bar.jpg",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        Object {
+          "height": 50,
+          "width": 150,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`<ImageBackground /> should shallow render as <ForwardRef(ImageBackground)> when not mocked 1`] = `
+<ImageBackground
+  source={
+    Object {
+      "uri": "foo-bar.jpg",
+    }
+  }
+  style={
+    Object {
+      "height": 50,
+      "width": 150,
+    }
+  }
+/>
+`;
+
+exports[`<ImageBackground /> should shallow render as <ImageBackground> when mocked 1`] = `
+<ImageBackground
+  source={
+    Object {
+      "uri": "foo-bar.jpg",
+    }
+  }
+  style={
+    Object {
+      "height": 50,
+      "width": 150,
+    }
+  }
+/>
+`;