mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
62021eb8d1
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
60 lines
2.4 KiB
JavaScript
60 lines
2.4 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.
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import ReactTestRenderer from 'react-test-renderer';
|
|
import Button from '../Button';
|
|
|
|
describe('<Button />', () => {
|
|
it('should render as expected', () => {
|
|
expect(ReactTestRenderer.create(<Button title="Test Button" />)).toMatchSnapshot();
|
|
});
|
|
|
|
it('should be disabled and it should set accessibilityState to disabled when disabled={true}', () => {
|
|
expect(
|
|
ReactTestRenderer.create(<Button title="Test Button" disabled={true} />)
|
|
).toMatchSnapshot();
|
|
});
|
|
|
|
it('should be disabled when disabled={true} and accessibilityState={{disabled: true}}', () => {
|
|
expect(
|
|
ReactTestRenderer.create(<Button title="Test Button" disabled={true} accessibilityState={{disabled: true}} />)
|
|
).toMatchSnapshot();
|
|
});
|
|
|
|
it('should be disabled when disabled is empty and accessibilityState={{disabled: true}}', () => {
|
|
expect(
|
|
ReactTestRenderer.create(<Button title="Test Button" accessibilityState={{disabled: true}} />)
|
|
).toMatchSnapshot();
|
|
});
|
|
|
|
it('should overwrite accessibilityState with value of disabled prop', () => {
|
|
expect(ReactTestRenderer.create(<Button title="Test Button" disabled={true} accessibilityState={{disabled: false}} />)
|
|
).toMatchSnapshot();
|
|
});
|
|
|
|
it('should not be disabled when disabled={false} and accessibilityState={{disabled: true}}', () => {
|
|
expect(ReactTestRenderer.create(<Button title="Test Button" disabled={false} accessibilityState={{disabled: true}} />)
|
|
).toMatchSnapshot();
|
|
});
|
|
|
|
it('should not be disabled when disabled={false} and accessibilityState={{disabled: false}}', () => {
|
|
expect(ReactTestRenderer.create( <Button title="Test Button" disabled={false} accessibilityState={{disabled: false}} />)
|
|
).toMatchSnapshot();
|
|
});
|
|
|
|
it('should be set importantForAccessibility={no-hide-descendants} when importantForAccessibility={no-hide-descendants}', () => {
|
|
expect(ReactTestRenderer.create( <Button title="Test Button" importantForAccessibility={'no-hide-descendants'} />)
|
|
).toMatchSnapshot();
|
|
});
|
|
|
|
it('should be set importantForAccessibility={no-hide-descendants} when importantForAccessibility={no}', () => {
|
|
expect(ReactTestRenderer.create( <Button title="Test Button" importantForAccessibility={'no'} />)
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|