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 ;
},
},
+ {
+ title:
+ 'Check if accessibilityState disabled is announced when the screenreader focus moves on the image',
+ render(): React.Element {
+ return (
+
+ );
+ },
+ },
];