From 351817dd57889ff8fe68f3308633152b7bb9dc93 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Fri, 26 Mar 2021 19:10:46 +0100 Subject: [PATCH 1/9] adding accessible prop to ReactImageManager --- .../facebook/react/views/image/ReactImageManager.java | 5 +++++ packages/rn-tester/js/examples/Image/ImageExample.js | 10 +++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) 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 d1250c7563ff..346aaaf11ac8 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/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 4374fcb8cb59..9821131af6ce 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -605,7 +605,15 @@ exports.examples = [ description: ('If the `source` prop `uri` property is prefixed with ' + '"http", then it will be downloaded from the network.': string), render: function(): React.Node { - return ; + return ( + + ); }, }, { From 1a14145caa12d2bb2cfb4c9b31bff4a9f6073b07 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Mon, 29 Mar 2021 08:55:46 +0200 Subject: [PATCH 2/9] AccessibilityExample add image example --- .../Accessibility/AccessibilityExample.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index d13b53db474f..699e47777363 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -29,6 +29,9 @@ const checkImageSource = require('./check.png'); const uncheckImageSource = require('./uncheck.png'); const mixedCheckboxImageSource = require('./mixed.png'); const {createRef} = require('react'); +const fullImage = { + uri: 'https://www.facebook.com/ads/pics/successstories.png', +}; const styles = StyleSheet.create({ image: { @@ -892,4 +895,18 @@ exports.examples = [ return ; }, }, + { + title: 'Check if these properties are enabled', + render(): React.Element { + return ( + + ); + }, + }, ]; From b2988c3762a66955cfbd92db52b7a6691ea75bfb Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Mon, 29 Mar 2021 11:25:03 +0200 Subject: [PATCH 3/9] adding basic Java Unit test --- .../react/views/image/ReactImagePropertyTest.java | 8 ++++++++ 1 file changed, 8 insertions(+) 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 b7d86db7c28b..386403e3f0aa 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 testRoundedCorners() { + 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(); From cf665dc6c2360e5d88a991bc27a88da3d8902cc5 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Mon, 29 Mar 2021 11:26:56 +0200 Subject: [PATCH 4/9] rename Test case --- .../com/facebook/react/views/image/ReactImagePropertyTest.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 386403e3f0aa..e172c90a3c79 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 @@ -121,7 +121,7 @@ public void testRoundedCorners() { } @Test - public void testRoundedCorners() { + public void testAccessibilityFocus() { ReactImageManager viewManager = new ReactImageManager(); ReactImageView view = viewManager.createViewInstance(mThemeContext); viewManager.setAccessible(view, true); From 3e9fc4e8e225801ea5ae3ba8991f85815615f0c9 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Sun, 2 May 2021 14:20:09 +0800 Subject: [PATCH 5/9] update test example title --- .../js/examples/Accessibility/AccessibilityExample.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index 3551d295e5d5..371090dd1092 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -51,8 +51,8 @@ const styles = StyleSheet.create({ borderStyle: 'solid', }, image: { - width: 20, - height: 20, + width: 120, + height: 120, resizeMode: 'contain', marginRight: 10, }, @@ -930,7 +930,8 @@ exports.examples = [ }, }, { - title: 'Check if these properties are enabled', + title: + 'Check if accessibilityState disabled is announced when the screenreader focus moves on the image', render(): React.Element { return ( Date: Sun, 2 May 2021 15:30:49 +0800 Subject: [PATCH 6/9] use local instead of network asset --- .../js/examples/Accessibility/AccessibilityExample.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index 371090dd1092..76e72bde7655 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -30,9 +30,6 @@ const checkImageSource = require('./check.png'); const uncheckImageSource = require('./uncheck.png'); const mixedCheckboxImageSource = require('./mixed.png'); const {createRef} = require('react'); -const fullImage = { - uri: 'https://www.facebook.com/ads/pics/successstories.png', -}; const styles = StyleSheet.create({ default: { @@ -938,7 +935,7 @@ exports.examples = [ accessible={true} accessibilityLabel="plain network image" accessibilityState={{disabled: true}} - source={fullImage} + source={require('../../assets/like.png')} style={styles.image} /> ); From 43ba38213c801ca73c1beacd04b40a13a12dccb9 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Sun, 2 May 2021 15:33:09 +0800 Subject: [PATCH 7/9] remove example from rn-tester ImageExample --- packages/rn-tester/js/examples/Image/ImageExample.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 19105dfc86af..ef2be0a0605a 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -605,15 +605,7 @@ exports.examples = [ description: ('If the `source` prop `uri` property is prefixed with ' + '"http", then it will be downloaded from the network.': string), render: function(): React.Node { - return ( - - ); + return ; }, }, { From 3485fa01a9b98c62bd7ae74e05902d391ce8053e Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Sun, 2 May 2021 15:42:17 +0800 Subject: [PATCH 8/9] rename example accessibilityLabel --- .../rn-tester/js/examples/Accessibility/AccessibilityExample.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index 76e72bde7655..8b56553cea82 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -933,7 +933,7 @@ exports.examples = [ return ( Date: Tue, 4 May 2021 11:53:42 +0800 Subject: [PATCH 9/9] moving style changes from image to disabledImage --- .../js/examples/Accessibility/AccessibilityExample.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index 8b56553cea82..541f6d90cd53 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -48,11 +48,15 @@ const styles = StyleSheet.create({ borderStyle: 'solid', }, image: { - width: 120, - height: 120, + width: 20, + height: 20, resizeMode: 'contain', marginRight: 10, }, + disabledImage: { + width: 120, + height: 120, + }, containerAlignCenter: { display: 'flex', flexDirection: 'column', @@ -936,7 +940,7 @@ exports.examples = [ accessibilityLabel="plain local image" accessibilityState={{disabled: true}} source={require('../../assets/like.png')} - style={styles.image} + style={styles.disabledImage} /> ); },