[Accessibility] Fix Image does not announce "disabled"

[fabOnReact]

Summary

This issue fixes#30935fixes#30936 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 setAccessiblehttps://bit.ly/3dDuK5L

 * <p>InstancesofthisclassreceivepropertyupdatesfromJSvia@{linkUIManagerModule}.
* Subclassesmayuse {@link #updateShadowNode} topersistsomeoftheupdatedfieldsinthenode
* instancethatcorrespondstoaparticularviewtype.

Changelog

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

Test Plan

CLICK TO OPEN TESTS RESULTS

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"

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

2021-03-26.18-27-36.mp4

[fabOnReact]

• Further Analyse Image does not announce "disabled" #30935 (comment)
• Study the difference in the inheritance rules of all the ShadowNodes ViewManagers on Android
• write accessibility test with espresso see Quick Start doesn't build facebook/buck#112 (comment)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: da899c0

[amarlette]

Thank you for working on this issue @fabriziobertoglio1987! Excited to see your finished PR.

Got you on the project board and will assign a reviewer when you are out of drafts.

[lunaleaps]

@fabriziobertoglio1987is this ready for review? Ah sorry looks like it is, I'll move it to the right column then

[fabOnReact]

sorry @lunaleaps, I did set this as ready for review. Currently I'm away from office, but I will be doing opensource again in 1-2 weeks. Thanks a lot. I wish you a good day

[kacieb]

cc @blavalla for Android review!

[kacieb]

Nit: It would be good to specify what properties we're testing here - in this case it's image focusability and disabled state.

[fabOnReact]

@kacieb thanks for the code review. I experienced some issues with flipper after the last rebase and I published pr #31468 which includes solution to the runtime in the rn-tester app. I added the changes you required and tested them using the fix #31468. The functionality works like before. Thanks a lot 🙏

[blavalla]

Android code looks good to me!

[lunaleaps]

Do you think we should reference a local asset here instead of fetching over network? I know there are some assets under js/assets/..

[fabOnReact]

thanks a lot for the code review @lunaleaps. I added the changes required. More info in comment #31252 (comment) 🙏

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,864,454	-122,281
android	hermes	armeabi-v7a	8,386,258	-107,725
android	hermes	x86	9,321,886	-117,136
android	hermes	x86_64	9,264,852	-115,931
android	jsc	arm64-v8a	10,593,478	-11,656
android	jsc	armeabi-v7a	10,098,377	-7,030
android	jsc	x86	10,612,415	-11,729
android	jsc	x86_64	11,195,638	-12,174

Base commit: da899c0

[lunaleaps]

@fabriziobertoglio1987 Would this break other accessibility examples that use styles.image? Could create a separate styles.disabledImage? Did you want me to add during import? Otherwise I think this looks good!

[fabOnReact]

@lunaleaps thanks a lot for the codereview.. sorry for this. I just updated the code with commit f5e4a16 I remain available 🙏

[lunaleaps]

Great! Thank you for your help! Importing this now :)

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@lunaleaps merged this pull request in 333b46c.

[amarlette]

Thank you @fabriziobertoglio1987 for another great contribution to a more accessible React Native! 😄

I'll highlight you with the same info from your other PR.

[fabOnReact]

@lunaleaps thanks a lot for merging this pr. I will look for my next issues in the Accessibility Project 🙏
@amarlette thanks a lot for the mention 🙏

[fabOnReact]

Summary

This issue fixes#30935fixes#30936 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 setAccessiblehttps://bit.ly/3dDuK5L

 * <p>InstancesofthisclassreceivepropertyupdatesfromJSvia@{linkUIManagerModule}.
* Subclassesmayuse {@link #updateShadowNode} topersistsomeoftheupdatedfieldsinthenode
* instancethatcorrespondstoaparticularviewtype.

Changelog

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

Test Plan

CLICK TO OPEN TESTS RESULTS

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"

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

2021-03-26.18-27-36.mp4

[fabOnReact]

• Further Analyse Image does not announce "disabled" #30935 (comment)
• Study the difference in the inheritance rules of all the ShadowNodes ViewManagers on Android
• write accessibility test with espresso see Quick Start doesn't build facebook/buck#112 (comment)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: da899c0

[amarlette]

Thank you for working on this issue @fabriziobertoglio1987! Excited to see your finished PR.

Got you on the project board and will assign a reviewer when you are out of drafts.

[lunaleaps]

@fabriziobertoglio1987is this ready for review? Ah sorry looks like it is, I'll move it to the right column then

[fabOnReact]

sorry @lunaleaps, I did set this as ready for review. Currently I'm away from office, but I will be doing opensource again in 1-2 weeks. Thanks a lot. I wish you a good day

[kacieb]

cc @blavalla for Android review!

[kacieb]

Nit: It would be good to specify what properties we're testing here - in this case it's image focusability and disabled state.

[fabOnReact]

@kacieb thanks for the code review. I experienced some issues with flipper after the last rebase and I published pr #31468 which includes solution to the runtime in the rn-tester app. I added the changes you required and tested them using the fix #31468. The functionality works like before. Thanks a lot 🙏

[blavalla]

Android code looks good to me!

[lunaleaps]

Do you think we should reference a local asset here instead of fetching over network? I know there are some assets under js/assets/..

[fabOnReact]

thanks a lot for the code review @lunaleaps. I added the changes required. More info in comment #31252 (comment) 🙏

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,864,454	-122,281
android	hermes	armeabi-v7a	8,386,258	-107,725
android	hermes	x86	9,321,886	-117,136
android	hermes	x86_64	9,264,852	-115,931
android	jsc	arm64-v8a	10,593,478	-11,656
android	jsc	armeabi-v7a	10,098,377	-7,030
android	jsc	x86	10,612,415	-11,729
android	jsc	x86_64	11,195,638	-12,174

Base commit: da899c0

[lunaleaps]

@fabriziobertoglio1987 Would this break other accessibility examples that use styles.image? Could create a separate styles.disabledImage? Did you want me to add during import? Otherwise I think this looks good!

[fabOnReact]

@lunaleaps thanks a lot for the codereview.. sorry for this. I just updated the code with commit f5e4a16 I remain available 🙏

[lunaleaps]

Great! Thank you for your help! Importing this now :)

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@lunaleaps merged this pull request in 333b46c.

[amarlette]

Thank you @fabriziobertoglio1987 for another great contribution to a more accessible React Native! 😄

I'll highlight you with the same info from your other PR.

[fabOnReact]

@lunaleaps thanks a lot for merging this pr. I will look for my next issues in the Accessibility Project 🙏
@amarlette thanks a lot for the mention 🙏

[fabOnReact]

Summary

This issue fixes#30935fixes#30936 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 setAccessiblehttps://bit.ly/3dDuK5L

 * <p>InstancesofthisclassreceivepropertyupdatesfromJSvia@{linkUIManagerModule}.
* Subclassesmayuse {@link #updateShadowNode} topersistsomeoftheupdatedfieldsinthenode
* instancethatcorrespondstoaparticularviewtype.

Changelog

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

Test Plan

CLICK TO OPEN TESTS RESULTS

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"

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

2021-03-26.18-27-36.mp4

[fabOnReact]

• Further Analyse Image does not announce "disabled" #30935 (comment)
• Study the difference in the inheritance rules of all the ShadowNodes ViewManagers on Android
• write accessibility test with espresso see Quick Start doesn't build facebook/buck#112 (comment)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: da899c0

[amarlette]

Thank you for working on this issue @fabriziobertoglio1987! Excited to see your finished PR.

Got you on the project board and will assign a reviewer when you are out of drafts.

[lunaleaps]

@fabriziobertoglio1987is this ready for review? Ah sorry looks like it is, I'll move it to the right column then

[fabOnReact]

sorry @lunaleaps, I did set this as ready for review. Currently I'm away from office, but I will be doing opensource again in 1-2 weeks. Thanks a lot. I wish you a good day

[kacieb]

cc @blavalla for Android review!

[kacieb]

Nit: It would be good to specify what properties we're testing here - in this case it's image focusability and disabled state.

[fabOnReact]

@kacieb thanks for the code review. I experienced some issues with flipper after the last rebase and I published pr #31468 which includes solution to the runtime in the rn-tester app. I added the changes you required and tested them using the fix #31468. The functionality works like before. Thanks a lot 🙏

[blavalla]

Android code looks good to me!

[lunaleaps]

Do you think we should reference a local asset here instead of fetching over network? I know there are some assets under js/assets/..

[fabOnReact]

thanks a lot for the code review @lunaleaps. I added the changes required. More info in comment #31252 (comment) 🙏

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,864,454	-122,281
android	hermes	armeabi-v7a	8,386,258	-107,725
android	hermes	x86	9,321,886	-117,136
android	hermes	x86_64	9,264,852	-115,931
android	jsc	arm64-v8a	10,593,478	-11,656
android	jsc	armeabi-v7a	10,098,377	-7,030
android	jsc	x86	10,612,415	-11,729
android	jsc	x86_64	11,195,638	-12,174

Base commit: da899c0

[lunaleaps]

@fabriziobertoglio1987 Would this break other accessibility examples that use styles.image? Could create a separate styles.disabledImage? Did you want me to add during import? Otherwise I think this looks good!

[fabOnReact]

@lunaleaps thanks a lot for the codereview.. sorry for this. I just updated the code with commit f5e4a16 I remain available 🙏

[lunaleaps]

Great! Thank you for your help! Importing this now :)

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@lunaleaps merged this pull request in 333b46c.

[amarlette]

Thank you @fabriziobertoglio1987 for another great contribution to a more accessible React Native! 😄

I'll highlight you with the same info from your other PR.

[fabOnReact]

@lunaleaps thanks a lot for merging this pr. I will look for my next issues in the Accessibility Project 🙏
@amarlette thanks a lot for the mention 🙏

[fabOnReact]

Summary

This issue fixes#30935fixes#30936 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 setAccessiblehttps://bit.ly/3dDuK5L

 * <p>InstancesofthisclassreceivepropertyupdatesfromJSvia@{linkUIManagerModule}.
* Subclassesmayuse {@link #updateShadowNode} topersistsomeoftheupdatedfieldsinthenode
* instancethatcorrespondstoaparticularviewtype.

Changelog

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

Test Plan

CLICK TO OPEN TESTS RESULTS

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"

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

2021-03-26.18-27-36.mp4

[fabOnReact]

• Further Analyse Image does not announce "disabled" #30935 (comment)
• Study the difference in the inheritance rules of all the ShadowNodes ViewManagers on Android
• write accessibility test with espresso see Quick Start doesn't build facebook/buck#112 (comment)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: da899c0

[amarlette]

Thank you for working on this issue @fabriziobertoglio1987! Excited to see your finished PR.

Got you on the project board and will assign a reviewer when you are out of drafts.

[lunaleaps]

@fabriziobertoglio1987is this ready for review? Ah sorry looks like it is, I'll move it to the right column then

[fabOnReact]

sorry @lunaleaps, I did set this as ready for review. Currently I'm away from office, but I will be doing opensource again in 1-2 weeks. Thanks a lot. I wish you a good day

[kacieb]

cc @blavalla for Android review!

[kacieb]

Nit: It would be good to specify what properties we're testing here - in this case it's image focusability and disabled state.

[fabOnReact]

@kacieb thanks for the code review. I experienced some issues with flipper after the last rebase and I published pr #31468 which includes solution to the runtime in the rn-tester app. I added the changes you required and tested them using the fix #31468. The functionality works like before. Thanks a lot 🙏

[blavalla]

Android code looks good to me!

[lunaleaps]

Do you think we should reference a local asset here instead of fetching over network? I know there are some assets under js/assets/..

[fabOnReact]

thanks a lot for the code review @lunaleaps. I added the changes required. More info in comment #31252 (comment) 🙏

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,864,454	-122,281
android	hermes	armeabi-v7a	8,386,258	-107,725
android	hermes	x86	9,321,886	-117,136
android	hermes	x86_64	9,264,852	-115,931
android	jsc	arm64-v8a	10,593,478	-11,656
android	jsc	armeabi-v7a	10,098,377	-7,030
android	jsc	x86	10,612,415	-11,729
android	jsc	x86_64	11,195,638	-12,174

Base commit: da899c0

[lunaleaps]

@fabriziobertoglio1987 Would this break other accessibility examples that use styles.image? Could create a separate styles.disabledImage? Did you want me to add during import? Otherwise I think this looks good!

[fabOnReact]

@lunaleaps thanks a lot for the codereview.. sorry for this. I just updated the code with commit f5e4a16 I remain available 🙏

[lunaleaps]

Great! Thank you for your help! Importing this now :)

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@lunaleaps merged this pull request in 333b46c.

[amarlette]

Thank you @fabriziobertoglio1987 for another great contribution to a more accessible React Native! 😄

I'll highlight you with the same info from your other PR.

[fabOnReact]

@lunaleaps thanks a lot for merging this pr. I will look for my next issues in the Accessibility Project 🙏
@amarlette thanks a lot for the mention 🙏

[fabOnReact]

Summary

This issue fixes#30935fixes#30936 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 setAccessiblehttps://bit.ly/3dDuK5L

 * <p>InstancesofthisclassreceivepropertyupdatesfromJSvia@{linkUIManagerModule}.
* Subclassesmayuse {@link #updateShadowNode} topersistsomeoftheupdatedfieldsinthenode
* instancethatcorrespondstoaparticularviewtype.

Changelog

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

Test Plan

CLICK TO OPEN TESTS RESULTS

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"

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

2021-03-26.18-27-36.mp4

[fabOnReact]

• Further Analyse Image does not announce "disabled" #30935 (comment)
• Study the difference in the inheritance rules of all the ShadowNodes ViewManagers on Android
• write accessibility test with espresso see Quick Start doesn't build facebook/buck#112 (comment)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: da899c0

[amarlette]

Thank you for working on this issue @fabriziobertoglio1987! Excited to see your finished PR.

Got you on the project board and will assign a reviewer when you are out of drafts.

[lunaleaps]

@fabriziobertoglio1987is this ready for review? Ah sorry looks like it is, I'll move it to the right column then

[fabOnReact]

sorry @lunaleaps, I did set this as ready for review. Currently I'm away from office, but I will be doing opensource again in 1-2 weeks. Thanks a lot. I wish you a good day

[kacieb]

cc @blavalla for Android review!

[kacieb]

Nit: It would be good to specify what properties we're testing here - in this case it's image focusability and disabled state.

[fabOnReact]

@kacieb thanks for the code review. I experienced some issues with flipper after the last rebase and I published pr #31468 which includes solution to the runtime in the rn-tester app. I added the changes you required and tested them using the fix #31468. The functionality works like before. Thanks a lot 🙏

[blavalla]

Android code looks good to me!

[lunaleaps]

Do you think we should reference a local asset here instead of fetching over network? I know there are some assets under js/assets/..

[fabOnReact]

thanks a lot for the code review @lunaleaps. I added the changes required. More info in comment #31252 (comment) 🙏

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,864,454	-122,281
android	hermes	armeabi-v7a	8,386,258	-107,725
android	hermes	x86	9,321,886	-117,136
android	hermes	x86_64	9,264,852	-115,931
android	jsc	arm64-v8a	10,593,478	-11,656
android	jsc	armeabi-v7a	10,098,377	-7,030
android	jsc	x86	10,612,415	-11,729
android	jsc	x86_64	11,195,638	-12,174

Base commit: da899c0

[lunaleaps]

@fabriziobertoglio1987 Would this break other accessibility examples that use styles.image? Could create a separate styles.disabledImage? Did you want me to add during import? Otherwise I think this looks good!

[fabOnReact]

@lunaleaps thanks a lot for the codereview.. sorry for this. I just updated the code with commit f5e4a16 I remain available 🙏

[lunaleaps]

Great! Thank you for your help! Importing this now :)

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@lunaleaps merged this pull request in 333b46c.

[amarlette]

Thank you @fabriziobertoglio1987 for another great contribution to a more accessible React Native! 😄

I'll highlight you with the same info from your other PR.

[fabOnReact]

@lunaleaps thanks a lot for merging this pr. I will look for my next issues in the Accessibility Project 🙏
@amarlette thanks a lot for the mention 🙏

[fabOnReact]

Summary

This issue fixes#30935fixes#30936 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 setAccessiblehttps://bit.ly/3dDuK5L

 * <p>InstancesofthisclassreceivepropertyupdatesfromJSvia@{linkUIManagerModule}.
* Subclassesmayuse {@link #updateShadowNode} topersistsomeoftheupdatedfieldsinthenode
* instancethatcorrespondstoaparticularviewtype.

Changelog

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

Test Plan

CLICK TO OPEN TESTS RESULTS

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"

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

2021-03-26.18-27-36.mp4

[fabOnReact]

• Further Analyse Image does not announce "disabled" #30935 (comment)
• Study the difference in the inheritance rules of all the ShadowNodes ViewManagers on Android
• write accessibility test with espresso see Quick Start doesn't build facebook/buck#112 (comment)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: da899c0

[amarlette]

Thank you for working on this issue @fabriziobertoglio1987! Excited to see your finished PR.

Got you on the project board and will assign a reviewer when you are out of drafts.

[lunaleaps]

@fabriziobertoglio1987is this ready for review? Ah sorry looks like it is, I'll move it to the right column then

[fabOnReact]

sorry @lunaleaps, I did set this as ready for review. Currently I'm away from office, but I will be doing opensource again in 1-2 weeks. Thanks a lot. I wish you a good day

[kacieb]

cc @blavalla for Android review!

[kacieb]

Nit: It would be good to specify what properties we're testing here - in this case it's image focusability and disabled state.

[fabOnReact]

@kacieb thanks for the code review. I experienced some issues with flipper after the last rebase and I published pr #31468 which includes solution to the runtime in the rn-tester app. I added the changes you required and tested them using the fix #31468. The functionality works like before. Thanks a lot 🙏

[blavalla]

Android code looks good to me!

[lunaleaps]

Do you think we should reference a local asset here instead of fetching over network? I know there are some assets under js/assets/..

[fabOnReact]

thanks a lot for the code review @lunaleaps. I added the changes required. More info in comment #31252 (comment) 🙏

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,864,454	-122,281
android	hermes	armeabi-v7a	8,386,258	-107,725
android	hermes	x86	9,321,886	-117,136
android	hermes	x86_64	9,264,852	-115,931
android	jsc	arm64-v8a	10,593,478	-11,656
android	jsc	armeabi-v7a	10,098,377	-7,030
android	jsc	x86	10,612,415	-11,729
android	jsc	x86_64	11,195,638	-12,174

Base commit: da899c0

[lunaleaps]

@fabriziobertoglio1987 Would this break other accessibility examples that use styles.image? Could create a separate styles.disabledImage? Did you want me to add during import? Otherwise I think this looks good!

[fabOnReact]

@lunaleaps thanks a lot for the codereview.. sorry for this. I just updated the code with commit f5e4a16 I remain available 🙏

[lunaleaps]

Great! Thank you for your help! Importing this now :)

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@lunaleaps merged this pull request in 333b46c.

[amarlette]

Thank you @fabriziobertoglio1987 for another great contribution to a more accessible React Native! 😄

I'll highlight you with the same info from your other PR.

[fabOnReact]

@lunaleaps thanks a lot for merging this pr. I will look for my next issues in the Accessibility Project 🙏
@amarlette thanks a lot for the mention 🙏

[fabOnReact]

Summary

This issue fixes#30935fixes#30936 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 setAccessiblehttps://bit.ly/3dDuK5L

 * <p>InstancesofthisclassreceivepropertyupdatesfromJSvia@{linkUIManagerModule}.
* Subclassesmayuse {@link #updateShadowNode} topersistsomeoftheupdatedfieldsinthenode
* instancethatcorrespondstoaparticularviewtype.

Changelog

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

Test Plan

CLICK TO OPEN TESTS RESULTS

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"

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

2021-03-26.18-27-36.mp4

[fabOnReact]

• Further Analyse Image does not announce "disabled" #30935 (comment)
• Study the difference in the inheritance rules of all the ShadowNodes ViewManagers on Android
• write accessibility test with espresso see Quick Start doesn't build facebook/buck#112 (comment)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: da899c0

[amarlette]

Thank you for working on this issue @fabriziobertoglio1987! Excited to see your finished PR.

Got you on the project board and will assign a reviewer when you are out of drafts.

[lunaleaps]

@fabriziobertoglio1987is this ready for review? Ah sorry looks like it is, I'll move it to the right column then

[fabOnReact]

sorry @lunaleaps, I did set this as ready for review. Currently I'm away from office, but I will be doing opensource again in 1-2 weeks. Thanks a lot. I wish you a good day

[kacieb]

cc @blavalla for Android review!

[kacieb]

Nit: It would be good to specify what properties we're testing here - in this case it's image focusability and disabled state.

[fabOnReact]

@kacieb thanks for the code review. I experienced some issues with flipper after the last rebase and I published pr #31468 which includes solution to the runtime in the rn-tester app. I added the changes you required and tested them using the fix #31468. The functionality works like before. Thanks a lot 🙏

[blavalla]

Android code looks good to me!

[lunaleaps]

Do you think we should reference a local asset here instead of fetching over network? I know there are some assets under js/assets/..

[fabOnReact]

thanks a lot for the code review @lunaleaps. I added the changes required. More info in comment #31252 (comment) 🙏

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,864,454	-122,281
android	hermes	armeabi-v7a	8,386,258	-107,725
android	hermes	x86	9,321,886	-117,136
android	hermes	x86_64	9,264,852	-115,931
android	jsc	arm64-v8a	10,593,478	-11,656
android	jsc	armeabi-v7a	10,098,377	-7,030
android	jsc	x86	10,612,415	-11,729
android	jsc	x86_64	11,195,638	-12,174

Base commit: da899c0

[lunaleaps]

@fabriziobertoglio1987 Would this break other accessibility examples that use styles.image? Could create a separate styles.disabledImage? Did you want me to add during import? Otherwise I think this looks good!

[fabOnReact]

@lunaleaps thanks a lot for the codereview.. sorry for this. I just updated the code with commit f5e4a16 I remain available 🙏

[lunaleaps]

Great! Thank you for your help! Importing this now :)

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@lunaleaps merged this pull request in 333b46c.

[amarlette]

Thank you @fabriziobertoglio1987 for another great contribution to a more accessible React Native! 😄

I'll highlight you with the same info from your other PR.

[fabOnReact]

@lunaleaps thanks a lot for merging this pr. I will look for my next issues in the Accessibility Project 🙏
@amarlette thanks a lot for the mention 🙏

[fabOnReact]

Summary

This issue fixes#30935fixes#30936 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 setAccessiblehttps://bit.ly/3dDuK5L

 * <p>InstancesofthisclassreceivepropertyupdatesfromJSvia@{linkUIManagerModule}.
* Subclassesmayuse {@link #updateShadowNode} topersistsomeoftheupdatedfieldsinthenode
* instancethatcorrespondstoaparticularviewtype.

Changelog

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

Test Plan

CLICK TO OPEN TESTS RESULTS

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"

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

2021-03-26.18-27-36.mp4

[fabOnReact]

• Further Analyse Image does not announce "disabled" #30935 (comment)
• Study the difference in the inheritance rules of all the ShadowNodes ViewManagers on Android
• write accessibility test with espresso see Quick Start doesn't build facebook/buck#112 (comment)

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: da899c0

[amarlette]

Thank you for working on this issue @fabriziobertoglio1987! Excited to see your finished PR.

Got you on the project board and will assign a reviewer when you are out of drafts.

[lunaleaps]

@fabriziobertoglio1987is this ready for review? Ah sorry looks like it is, I'll move it to the right column then

[fabOnReact]

sorry @lunaleaps, I did set this as ready for review. Currently I'm away from office, but I will be doing opensource again in 1-2 weeks. Thanks a lot. I wish you a good day

[kacieb]

cc @blavalla for Android review!

[kacieb]

Nit: It would be good to specify what properties we're testing here - in this case it's image focusability and disabled state.

[fabOnReact]

@kacieb thanks for the code review. I experienced some issues with flipper after the last rebase and I published pr #31468 which includes solution to the runtime in the rn-tester app. I added the changes you required and tested them using the fix #31468. The functionality works like before. Thanks a lot 🙏

[blavalla]

Android code looks good to me!

[lunaleaps]

Do you think we should reference a local asset here instead of fetching over network? I know there are some assets under js/assets/..

[fabOnReact]

thanks a lot for the code review @lunaleaps. I added the changes required. More info in comment #31252 (comment) 🙏

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,864,454	-122,281
android	hermes	armeabi-v7a	8,386,258	-107,725
android	hermes	x86	9,321,886	-117,136
android	hermes	x86_64	9,264,852	-115,931
android	jsc	arm64-v8a	10,593,478	-11,656
android	jsc	armeabi-v7a	10,098,377	-7,030
android	jsc	x86	10,612,415	-11,729
android	jsc	x86_64	11,195,638	-12,174

Base commit: da899c0

[lunaleaps]

@fabriziobertoglio1987 Would this break other accessibility examples that use styles.image? Could create a separate styles.disabledImage? Did you want me to add during import? Otherwise I think this looks good!

[fabOnReact]

@lunaleaps thanks a lot for the codereview.. sorry for this. I just updated the code with commit f5e4a16 I remain available 🙏

[lunaleaps]

Great! Thank you for your help! Importing this now :)

[facebook-github-bot]

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@lunaleaps merged this pull request in 333b46c.

[amarlette]

Thank you @fabriziobertoglio1987 for another great contribution to a more accessible React Native! 😄

I'll highlight you with the same info from your other PR.

[fabOnReact]

@lunaleaps thanks a lot for merging this pr. I will look for my next issues in the Accessibility Project 🙏
@amarlette thanks a lot for the mention 🙏