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
This commit is contained in:
fabriziobertoglio1987
2021-05-04 14:29:58 -07:00
committed by Facebook GitHub Bot
parent e0aec42efd
commit 333b46c4b0
3 changed files with 32 additions and 0 deletions
@@ -113,6 +113,11 @@ public class ReactImageManager extends SimpleViewManager<ReactImageView> {
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) {