From 06fba4cea260c8aac9dcf2dfa4e318171fdc1488 Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Wed, 10 Aug 2022 05:30:28 -0700
Subject: [PATCH] adding importantForAccessibility for Text, Button,
 ImageBackground (#34245)

Summary:
Previously published by [grgr-dkrk][2] as [https://github.com/facebook/react-native/issues/31296][3], fixes the following issues:

1) ImportantForAccessibility="no" does not work on Text, Button
2) ImportantForAccessibility="no-hide-descendants" does not work on Text, Button, or ImageBackground.

Note: On ImageBackground, focus is prevented on the imageBackground node itself, but focus is not prevented on its descendants.

Note: [Button component expected behavior for prop importantForAccessibility][4]
>Some components like Button seem like atomic units, but they end up rendering a hierarchy of components for example a wrapper View with a Text inside them. Allowing those descendants to become focusable, breaks the model of these being a single component to consider and forcing no-hide-descendants makes sense here.

>The other option is always to render any descendants of these elements with importantForAccessibility="no", so they can never be focusable on their own. This would have the same result, **BUT may potentially cause issues when the descendant content is supposed to automatically get moved up to the focusable ancestor to act as a label** (which is what Talkback does with unfocusable text elements by default).

Note: [importantForAccessibility="no" does not allow screenreader focus on nested Text Components with accessibilityRole="link" or inline Images][5]

fixes https://github.com/facebook/react-native/issues/30850 related https://github.com/facebook/react-native/pull/33690

## Changelog

[Android] [Fixed] - adding importantForAccessibility for Text, Button, ImageBackground

Pull Request resolved: https://github.com/facebook/react-native/pull/34245

Test Plan:
1) testing ImageBackground importantForAccessiblity ([link to test][1])
2) importantForAccessibility="no" does not allow screenreader focus on nested Text Components with accessibilityRole="link" or inline Images ([link to test][5])
3) testing ImageBackground importantForAccessiblity ([link to test][6])
4) Button with importantForAccessibility=no ([link to test][7])

[1]: https://github.com/facebook/react-native/pull/31296#issuecomment-1192341626 ""
[2]: https://github.com/grgr-dkrk "grgr-dkrk"
[3]: https://github.com/facebook/react-native/pull/31296 "https://github.com/facebook/react-native/issues/31296"
[4]: https://github.com/facebook/react-native/pull/31296#discussion_r616184584 "expected behaviour with prop importantForAccessibility in Button component"
[5]: https://github.com/facebook/react-native/issues/30850#issuecomment-1192286477 "importantForAccessibility=no does not allow screenreader focus on nested Text Components with accessibilityRole=link or inline Images"
[6]: https://github.com/facebook/react-native/pull/34245#issuecomment-1192446124 "testing ImageBackground importantForAccessiblity"
[7]: https://github.com/facebook/react-native/pull/34245#issuecomment-1192443589 "Button with importantForAccessibility=no"

Reviewed By: cipolleschi

Differential Revision: D38121992

Pulled By: dmitryrykun

fbshipit-source-id: 368b4dcb47d7940274820aa2e39ed5e2ca068821
---
 Libraries/Components/Button.js                |  13 ++
 Libraries/Components/__tests__/Button-test.js |  10 ++
 .../__snapshots__/Button-test.js.snap         |  90 +++++++++++
 Libraries/Image/ImageBackground.js            |  12 +-
 .../Image/__tests__/ImageBackground-test.js   |  73 +++++++++
 .../ImageBackground-test.js.snap              | 143 ++++++++++++++++++
 .../Accessibility/AccessibilityExample.js     |  60 ++++++++
 7 files changed, 400 insertions(+), 1 deletion(-)
 create mode 100644 Libraries/Image/__tests__/ImageBackground-test.js
 create mode 100644 Libraries/Image/__tests__/__snapshots__/ImageBackground-test.js.snap

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 89ec384fe2c1b7..318e82773d1678 100644
--- a/Libraries/Components/Button.js
+++ b/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}
diff --git a/Libraries/Components/__tests__/Button-test.js b/Libraries/Components/__tests__/Button-test.js
index d2f976371aa9d8..3c370b4e36b000 100644
--- a/Libraries/Components/__tests__/Button-test.js
+++ b/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();
+  });
 });
diff --git a/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap b/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap
index 8f31a7be12dea1..fb87db9320e845 100644
--- a/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap
+++ b/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"
diff --git a/Libraries/Image/ImageBackground.js b/Libraries/Image/ImageBackground.js
index 30ac413552af33..e7ef824567c8e8 100644
--- a/Libraries/Image/ImageBackground.js
+++ b/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,
             {
diff --git a/Libraries/Image/__tests__/ImageBackground-test.js b/Libraries/Image/__tests__/ImageBackground-test.js
new file mode 100644
index 00000000000000..f6797a124771b2
--- /dev/null
+++ b/Libraries/Image/__tests__/ImageBackground-test.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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();
+  });
+});
diff --git a/Libraries/Image/__tests__/__snapshots__/ImageBackground-test.js.snap b/Libraries/Image/__tests__/__snapshots__/ImageBackground-test.js.snap
new file mode 100644
index 00000000000000..348e31269bae32
--- /dev/null
+++ b/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,
+    }
+  }
+/>
+`;
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index 447ef69dcb56d6..294db3d0e28edb 100644
--- 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<{}> {
@@ -1039,6 +1055,44 @@ class EnabledExamples extends React.Component<{}> {
   }
 }
 
+class ImportantForAccessibilityExamples extends React.Component<{}> {
+  render(): React.Node {
+    return (
+      <View>
+        <RNTesterBlock title="ImageBackground with importantForAccessibility=no-hide-descendants">
+          <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="ImageBackground with importantForAccessibility=no">
+          <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>
+        <RNTesterBlock title="Button with importantForAccessibility=no">
+          <Button
+            title="this is text"
+            importantForAccessibility="no"
+            onPress={() => console.log('pressed')}
+          />
+        </RNTesterBlock>
+      </View>
+    );
+  }
+}
+
 class EnabledExample extends React.Component<
   {
     eventListener:
@@ -1244,6 +1298,12 @@ exports.examples = [
       return <EnabledExamples />;
     },
   },
+  {
+    title: 'Testing importantForAccessibility',
+    render(): React.Element<typeof ImportantForAccessibilityExamples> {
+      return <ImportantForAccessibilityExamples />;
+    },
+  },
   {
     title:
       'Check if accessibilityState disabled is announced when the screenreader focus moves on the image',