diff --git a/packages/react-native/Libraries/Components/View/ViewAccessibility.js b/packages/react-native/Libraries/Components/View/ViewAccessibility.js index 18da75effcb1d7..c3e254bcd45250 100644 --- a/packages/react-native/Libraries/Components/View/ViewAccessibility.js +++ b/packages/react-native/Libraries/Components/View/ViewAccessibility.js @@ -136,11 +136,11 @@ export type AccessibilityActionEvent = SyntheticEvent< >; export type AccessibilityState = { - disabled?: boolean, - selected?: boolean, + disabled?: ?boolean, + selected?: ?boolean, checked?: ?boolean | 'mixed', - busy?: boolean, - expanded?: boolean, + busy?: ?boolean, + expanded?: ?boolean, ... }; diff --git a/packages/react-native/Libraries/Text/Text.js b/packages/react-native/Libraries/Text/Text.js index e42fdae81882f0..128473b060d51d 100644 --- a/packages/react-native/Libraries/Text/Text.js +++ b/packages/react-native/Libraries/Text/Text.js @@ -61,33 +61,38 @@ const Text: React.AbstractComponent< const [isHighlighted, setHighlighted] = useState(false); - let _accessibilityState; + const _accessibilityLabel = ariaLabel ?? accessibilityLabel; + + let _accessibilityState: ?TextProps['accessibilityState'] = + accessibilityState; if ( - accessibilityState != null || ariaBusy != null || ariaChecked != null || ariaDisabled != null || ariaExpanded != null || ariaSelected != null ) { - _accessibilityState = { - busy: ariaBusy ?? accessibilityState?.busy, - checked: ariaChecked ?? accessibilityState?.checked, - disabled: ariaDisabled ?? accessibilityState?.disabled, - expanded: ariaExpanded ?? accessibilityState?.expanded, - selected: ariaSelected ?? accessibilityState?.selected, - }; + if (_accessibilityState != null) { + _accessibilityState = { + busy: ariaBusy ?? _accessibilityState.busy, + checked: ariaChecked ?? _accessibilityState.checked, + disabled: ariaDisabled ?? _accessibilityState.disabled, + expanded: ariaExpanded ?? _accessibilityState.expanded, + selected: ariaSelected ?? _accessibilityState.selected, + }; + } else { + _accessibilityState = { + busy: ariaBusy, + checked: ariaChecked, + disabled: ariaDisabled, + expanded: ariaExpanded, + selected: ariaSelected, + }; + } } - const _disabled = - restProps.disabled != null - ? restProps.disabled - : _accessibilityState?.disabled; - - const nativeTextAccessibilityState = - _disabled !== _accessibilityState?.disabled - ? {..._accessibilityState, disabled: _disabled} - : _accessibilityState; + const _accessibilityStateDisabled = _accessibilityState?.disabled; + const _disabled = restProps.disabled ?? _accessibilityStateDisabled; const isPressable = (onPress != null || @@ -190,7 +195,6 @@ const Text: React.AbstractComponent< : processColor(restProps.selectionColor); let style = restProps.style; - if (__DEV__) { if (PressabilityDebug.isEnabled() && onPress != null) { style = [restProps.style, {color: 'magenta'}]; @@ -205,13 +209,6 @@ const Text: React.AbstractComponent< numberOfLines = 0; } - const hasTextAncestor = useContext(TextAncestor); - - const _accessible = Platform.select({ - ios: accessible !== false, - default: accessible, - }); - let _selectable = restProps.selectable; const processedStyle = flattenStyle(style); @@ -236,41 +233,59 @@ const Text: React.AbstractComponent< } } - const _hasOnPressOrOnLongPress = - props.onPress != null || props.onLongPress != null; + const _nativeID = id ?? nativeID; + + const hasTextAncestor = useContext(TextAncestor); + if (hasTextAncestor) { + return ( + + ); + } + + // If the disabled prop and accessibilityState.disabled are out of sync but not both in + // falsy states we need to update the accessibilityState object to use the disabled prop. + if ( + _disabled !== _accessibilityStateDisabled && + ((_disabled != null && _disabled !== false) || + (_accessibilityStateDisabled != null && + _accessibilityStateDisabled !== false)) + ) { + _accessibilityState = {..._accessibilityState, disabled: _disabled}; + } + + const _accessible = Platform.select({ + ios: accessible !== false, + android: + accessible == null ? onPress != null || onLongPress != null : accessible, + default: accessible, + }); - return hasTextAncestor ? ( - - ) : ( + return ( , >; export type AccessibilityState = { - disabled?: boolean, - selected?: boolean, + disabled?: ?boolean, + selected?: ?boolean, checked?: ?boolean | \\"mixed\\", - busy?: boolean, - expanded?: boolean, + busy?: ?boolean, + expanded?: ?boolean, ... }; export type AccessibilityValue = $ReadOnly<{|