Files
react-native/Libraries/Image/__tests__/ImageBackground-test.js
T
fabriziobertoglio1987 62021eb8d1 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 https://github.com/facebook/react-native/issues/30850 related https://github.com/facebook/react-native/pull/33690

## Changelog

[Android] [Fixed] - adding importantForAccessibility for Text, Button, ImageBackground

Pull Request resolved: https://github.com/facebook/react-native/pull/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]: https://github.com/facebook/react-native/pull/31296#issuecomment-1192341626 ""
[2]: https://github.com/grgr-dkrk "grgr-dkrk"
[3]: https://github.com/facebook/react-native/pull/31296 "https://github.com/facebook/react-native/issues/31296"
[4]: https://github.com/facebook/react-native/pull/31296#discussion_r616184584 "expected behaviour with prop importantForAccessibility in Button component"
[5]: https://github.com/facebook/react-native/issues/30850#issuecomment-1192286477 "importantForAccessibility=no does not allow screenreader focus on nested Text Components with accessibilityRole=link or inline Images"
[6]: https://github.com/facebook/react-native/pull/34245#issuecomment-1192446124 "testing ImageBackground importantForAccessiblity"
[7]: https://github.com/facebook/react-native/pull/34245#issuecomment-1192443589 "Button with importantForAccessibility=no"

Reviewed By: cipolleschi

Differential Revision: D38121992

Pulled By: dmitryrykun

fbshipit-source-id: 368b4dcb47d7940274820aa2e39ed5e2ca068821
2022-08-10 05:30:28 -07:00

74 lines
1.9 KiB
JavaScript

/**
* 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();
});
});