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 ( + + ); + }, + }, ];