mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Marc Mulcahy
7df3eea1a7
Summary: React Native components need a mechanism to specify their value to assistive technologies. This PR adds the notion of accessibilityValueDescription-- a property which either contains a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum). On iOS, the range-based info if present is converted into a percentage and added to the accessibilityValue property of the UIView. If text is present as part of the accessibilityValueDescription, it is used instead of the range-based information. On Android, any range-based information in accessibilityValueDescription is exposed in the AccessibilityNodeInfo's RangeInfo. Text which is part of accessibilityValueDescription is appended to the content description. ## Changelog [GENERAL] [Change] - add accessibilityValuedescription property. Pull Request resolved: https://github.com/facebook/react-native/pull/26169 Test Plan: Added two new accessibility examples to RNTester, one which uses text and another which uses range-based info in accessibilityValueDescription. Verified that they both behave correctly on both Android and iOS. Differential Revision: D17444730 Pulled By: cpojer fbshipit-source-id: 1fb3252a90f88f7cafe1cbf7db08c03f14cc2321
57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const ReactNativeStyleAttributes = require('./ReactNativeStyleAttributes');
|
|
|
|
const UIView = {
|
|
pointerEvents: true,
|
|
accessible: true,
|
|
accessibilityActions: true,
|
|
accessibilityLabel: true,
|
|
accessibilityLiveRegion: true,
|
|
accessibilityRole: true,
|
|
accessibilityState: true,
|
|
accessibilityValue: true,
|
|
accessibilityHint: true,
|
|
importantForAccessibility: true,
|
|
nativeID: true,
|
|
testID: true,
|
|
renderToHardwareTextureAndroid: true,
|
|
shouldRasterizeIOS: true,
|
|
onLayout: true,
|
|
onAccessibilityAction: true,
|
|
onAccessibilityTap: true,
|
|
onMagicTap: true,
|
|
onAccessibilityEscape: true,
|
|
collapsable: true,
|
|
needsOffscreenAlphaCompositing: true,
|
|
style: ReactNativeStyleAttributes,
|
|
};
|
|
|
|
const RCTView = {
|
|
...UIView,
|
|
|
|
// This is a special performance property exposed by RCTView and useful for
|
|
// scrolling content when there are many subviews, most of which are offscreen.
|
|
// For this property to be effective, it must be applied to a view that contains
|
|
// many subviews that extend outside its bound. The subviews must also have
|
|
// overflow: hidden, as should the containing view (or one of its superviews).
|
|
removeClippedSubviews: true,
|
|
};
|
|
|
|
const ReactNativeViewAttributes = {
|
|
UIView: UIView,
|
|
RCTView: RCTView,
|
|
};
|
|
|
|
module.exports = ReactNativeViewAttributes;
|