-
Notifications
You must be signed in to change notification settings - Fork 24.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adding importantForAccessibility for Text, Button, ImageBackground (#…
…34245) Summary: Previously published by [grgr-dkrk][2] as [https://github.com/facebook/react-native/issues/31296][3], fixes the following issues: 1) ImportantForAccessibility="no" does not work on Text, Button 2) ImportantForAccessibility="no-hide-descendants" does not work on Text, Button, or ImageBackground. Note: On ImageBackground, focus is prevented on the imageBackground node itself, but focus is not prevented on its descendants. Note: [Button component expected behavior for prop importantForAccessibility][4] >Some components like Button seem like atomic units, but they end up rendering a hierarchy of components for example a wrapper View with a Text inside them. Allowing those descendants to become focusable, breaks the model of these being a single component to consider and forcing no-hide-descendants makes sense here. >The other option is always to render any descendants of these elements with importantForAccessibility="no", so they can never be focusable on their own. This would have the same result, **BUT may potentially cause issues when the descendant content is supposed to automatically get moved up to the focusable ancestor to act as a label** (which is what Talkback does with unfocusable text elements by default). Note: [importantForAccessibility="no" does not allow screenreader focus on nested Text Components with accessibilityRole="link" or inline Images][5] fixes #30850 related #33690 ## Changelog [Android] [Fixed] - adding importantForAccessibility for Text, Button, ImageBackground Pull Request resolved: #34245 Test Plan: 1) testing ImageBackground importantForAccessiblity ([link to test][1]) 2) importantForAccessibility="no" does not allow screenreader focus on nested Text Components with accessibilityRole="link" or inline Images ([link to test][5]) 3) testing ImageBackground importantForAccessiblity ([link to test][6]) 4) Button with importantForAccessibility=no ([link to test][7]) [1]: #31296 (comment) "" [2]: https://github.com/grgr-dkrk "grgr-dkrk" [3]: #31296 "#31296" [4]: #31296 (comment) "expected behaviour with prop importantForAccessibility in Button component" [5]: #30850 (comment) "importantForAccessibility=no does not allow screenreader focus on nested Text Components with accessibilityRole=link or inline Images" [6]: #34245 (comment) "testing ImageBackground importantForAccessiblity" [7]: #34245 (comment) "Button with importantForAccessibility=no" Reviewed By: cipolleschi Differential Revision: D38121992 Pulled By: dmitryrykun fbshipit-source-id: 368b4dcb47d7940274820aa2e39ed5e2ca068821
- Loading branch information
1 parent
03de197
commit 62021eb
Showing
7 changed files
with
400 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @format | ||
| * @emails oncall+react_native | ||
| * @flow strict-local | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| const React = require('react'); | ||
| const ImageBackground = require('../ImageBackground'); | ||
| const render = require('../../../jest/renderer'); | ||
|
|
||
| describe('<ImageBackground />', () => { | ||
| it('should render as <ImageBackground> when mocked', () => { | ||
| const instance = render.create( | ||
| <ImageBackground | ||
| style={{width: 150, height: 50}} | ||
| source={{uri: 'foo-bar.jpg'}} | ||
| />, | ||
| ); | ||
| expect(instance).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should shallow render as <ImageBackground> when mocked', () => { | ||
| const output = render.shallow( | ||
| <ImageBackground | ||
| style={{width: 150, height: 50}} | ||
| source={{uri: 'foo-bar.jpg'}} | ||
| />, | ||
| ); | ||
| expect(output).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should shallow render as <ForwardRef(ImageBackground)> when not mocked', () => { | ||
| jest.dontMock('../ImageBackground'); | ||
|
|
||
| const output = render.shallow( | ||
| <ImageBackground | ||
| style={{width: 150, height: 50}} | ||
| source={{uri: 'foo-bar.jpg'}} | ||
| />, | ||
| ); | ||
| expect(output).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should render as <RCTImageView> when not mocked', () => { | ||
| jest.dontMock('../ImageBackground'); | ||
|
|
||
| const instance = render.create( | ||
| <ImageBackground | ||
| style={{width: 150, height: 50}} | ||
| source={{uri: 'foo-bar.jpg'}} | ||
| />, | ||
| ); | ||
| expect(instance).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should be set importantForAccessibility in <View> and <Image>', () => { | ||
| const instance = render.create( | ||
| <ImageBackground | ||
| importantForAccessibility={'no'} | ||
| style={{width: 150, height: 50}} | ||
| source={{uri: 'foo-bar.jpg'}} | ||
| />, | ||
| ); | ||
| expect(instance).toMatchSnapshot(); | ||
| }); | ||
| }); |
143 changes: 143 additions & 0 deletions
143
Libraries/Image/__tests__/__snapshots__/ImageBackground-test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`<ImageBackground /> should be set importantForAccessibility in <View> and <Image> 1`] = ` | ||
| <View | ||
| accessibilityIgnoresInvertColors={true} | ||
| importantForAccessibility="no" | ||
| style={ | ||
| Object { | ||
| "height": 50, | ||
| "width": 150, | ||
| } | ||
| } | ||
| > | ||
| <Image | ||
| importantForAccessibility="no" | ||
| source={ | ||
| Object { | ||
| "uri": "foo-bar.jpg", | ||
| } | ||
| } | ||
| style={ | ||
| Array [ | ||
| Object { | ||
| "bottom": 0, | ||
| "left": 0, | ||
| "position": "absolute", | ||
| "right": 0, | ||
| "top": 0, | ||
| }, | ||
| Object { | ||
| "height": 50, | ||
| "width": 150, | ||
| }, | ||
| undefined, | ||
| ] | ||
| } | ||
| /> | ||
| </View> | ||
| `; | ||
| exports[`<ImageBackground /> should render as <ImageBackground> when mocked 1`] = ` | ||
| <View | ||
| accessibilityIgnoresInvertColors={true} | ||
| style={ | ||
| Object { | ||
| "height": 50, | ||
| "width": 150, | ||
| } | ||
| } | ||
| > | ||
| <Image | ||
| source={ | ||
| Object { | ||
| "uri": "foo-bar.jpg", | ||
| } | ||
| } | ||
| style={ | ||
| Array [ | ||
| Object { | ||
| "bottom": 0, | ||
| "left": 0, | ||
| "position": "absolute", | ||
| "right": 0, | ||
| "top": 0, | ||
| }, | ||
| Object { | ||
| "height": 50, | ||
| "width": 150, | ||
| }, | ||
| undefined, | ||
| ] | ||
| } | ||
| /> | ||
| </View> | ||
| `; | ||
| exports[`<ImageBackground /> should render as <RCTImageView> when not mocked 1`] = ` | ||
| <View | ||
| accessibilityIgnoresInvertColors={true} | ||
| style={ | ||
| Object { | ||
| "height": 50, | ||
| "width": 150, | ||
| } | ||
| } | ||
| > | ||
| <Image | ||
| source={ | ||
| Object { | ||
| "uri": "foo-bar.jpg", | ||
| } | ||
| } | ||
| style={ | ||
| Array [ | ||
| Object { | ||
| "bottom": 0, | ||
| "left": 0, | ||
| "position": "absolute", | ||
| "right": 0, | ||
| "top": 0, | ||
| }, | ||
| Object { | ||
| "height": 50, | ||
| "width": 150, | ||
| }, | ||
| undefined, | ||
| ] | ||
| } | ||
| /> | ||
| </View> | ||
| `; | ||
| exports[`<ImageBackground /> should shallow render as <ForwardRef(ImageBackground)> when not mocked 1`] = ` | ||
| <ImageBackground | ||
| source={ | ||
| Object { | ||
| "uri": "foo-bar.jpg", | ||
| } | ||
| } | ||
| style={ | ||
| Object { | ||
| "height": 50, | ||
| "width": 150, | ||
| } | ||
| } | ||
| /> | ||
| `; | ||
| exports[`<ImageBackground /> should shallow render as <ImageBackground> when mocked 1`] = ` | ||
| <ImageBackground | ||
| source={ | ||
| Object { | ||
| "uri": "foo-bar.jpg", | ||
| } | ||
| } | ||
| style={ | ||
| Object { | ||
| "height": 50, | ||
| "width": 150, | ||
| } | ||
| } | ||
| /> | ||
| `; |
Oops, something went wrong.