From 333b46c4b0ddee286e6d1d4b971fe8554a5c14cb Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Tue, 4 May 2021 14:28:50 -0700
Subject: [PATCH] Fix Image does not announce "disabled" (#31252)

Summary:
This issue fixes https://github.com/facebook/react-native/issues/30935 screenreader does not announce Image disabled accessibilityState.

As stated in AOSP View.java, the framework will handle routine focus movement, views indicate their willingness to take focus through the `isFocusable` method https://bit.ly/3dCnyHb

```
* <p>The framework will handle routine focus movement in response to user input. This includes
* changing the focus as views are removed or hidden, or as new views become available. Views
* indicate their willingness to take focus through the {link #isFocusable} method. To change
* whether a view can take focus, call {link #setFocusable(boolean)}.
```

The property is updated through its shadow node `ReactImageManager` method `setAccessible` https://bit.ly/3dDuK5L

```java
 * <p>Instances of this class receive property updates from JS via @{link UIManagerModule}.
 * Subclasses may use {link #updateShadowNode} to persist some of the updated fields in the node
 * instance that corresponds to a particular view type.
```

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - adding setAccessible to ReactImageManager to allow screenreader announce Image accessibilityState of "disabled"

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

Test Plan:
**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

Enable audio to hear the screenreader

TEST SCENARIO
- The user moves the screenreader focus to an image and the screenreader reads the Image accessibilityLabel "plain network image"

RESULT
- The screenreader announces the accessibilityState disabled after reading the Image accessibilityLabel "plain network image"

```javascript
<Image
  accessible={true}
  accessibilityLabel="plain network image"
  accessibilityState={{disabled: true}}
  source={fullImage}
  style={styles.base}
/>
```

<video src="https://user-images.githubusercontent.com/24992535/112670432-2f366d00-8e61-11eb-843f-4b56f4a06a91.mp4" width="700" />

</p>
</details>

Reviewed By: kacieb

Differential Revision: D28194597

Pulled By: lunaleaps

fbshipit-source-id: 5f89ce5c714405506261885ac6fea2c15c2e1f23
---
 .../react/views/image/ReactImageManager.java  |  5 +++++
 .../views/image/ReactImagePropertyTest.java   |  8 ++++++++
 .../Accessibility/AccessibilityExample.js     | 19 +++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.java
index d1250c7563ff05..346aaaf11ac899 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.java
@@ -113,6 +113,11 @@ public ReactImageView createViewInstance(ThemedReactContext context) {
         context, getDraweeControllerBuilder(), mGlobalImageLoadListener, callerContext);
   }
 
+  @ReactProp(name = "accessible")
+  public void setAccessible(ReactImageView view, boolean accessible) {
+    view.setFocusable(accessible);
+  }
+
   // In JS this is Image.props.source
   @ReactProp(name = "src")
   public void setSource(ReactImageView view, @Nullable ReadableArray sources) {
diff --git a/ReactAndroid/src/test/java/com/facebook/react/views/image/ReactImagePropertyTest.java b/ReactAndroid/src/test/java/com/facebook/react/views/image/ReactImagePropertyTest.java
index b7d86db7c28ba3..e172c90a3c7902 100644
--- a/ReactAndroid/src/test/java/com/facebook/react/views/image/ReactImagePropertyTest.java
+++ b/ReactAndroid/src/test/java/com/facebook/react/views/image/ReactImagePropertyTest.java
@@ -120,6 +120,14 @@ public void testRoundedCorners() {
     viewManager.updateProperties(view, buildStyles("borderRadius", null));
   }
 
+  @Test
+  public void testAccessibilityFocus() {
+    ReactImageManager viewManager = new ReactImageManager();
+    ReactImageView view = viewManager.createViewInstance(mThemeContext);
+    viewManager.setAccessible(view, true);
+    assertEquals(true, view.isFocusable());
+  }
+
   @Test
   public void testTintColor() {
     ReactImageManager viewManager = new ReactImageManager();
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index 5a40e051725831..a45e293e4212c5 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -55,6 +55,10 @@ const styles = StyleSheet.create({
     resizeMode: 'contain',
     marginRight: 10,
   },
+  disabledImage: {
+    width: 120,
+    height: 120,
+  },
   containerAlignCenter: {
     display: 'flex',
     flexDirection: 'column',
@@ -978,4 +982,19 @@ exports.examples = [
       return <EnabledExamples />;
     },
   },
+  {
+    title:
+      'Check if accessibilityState disabled is announced when the screenreader focus moves on the image',
+    render(): React.Element<typeof Image> {
+      return (
+        <Image
+          accessible={true}
+          accessibilityLabel="plain local image"
+          accessibilityState={{disabled: true}}
+          source={require('../../assets/like.png')}
+          style={styles.disabledImage}
+        />
+      );
+    },
+  },
 ];