Skip to content

Commit

Permalink
Text Component does not announce disabled and disables click function…
Browse files Browse the repository at this point in the history
…ality when disabled (#33076)

Summary:
This issue fixes #30937 fixes #30947 fixes #30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:

1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR #31252)

Related PR #33070 PR callstack/react-native-slider#354

[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289

## Changelog

[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled

Pull Request resolved: #33076

Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}`  and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}`  and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])

[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)

[10]: 17095c6
[11]: 6ab7ab3

Reviewed By: blavalla

Differential Revision: D34211793

Pulled By: ShikaSD

fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
  • Loading branch information
fabOnReact authored and facebook-github-bot committed Feb 15, 2022
1 parent 370c65b commit 7b2d817
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 1 deletion.
13 changes: 12 additions & 1 deletion Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,20 @@ const Text: React.AbstractComponent<

const [isHighlighted, setHighlighted] = useState(false);

const _disabled =
restProps.disabled != null
? restProps.disabled
: props.accessibilityState?.disabled;
const _accessibilityState =
_disabled !== props.accessibilityState?.disabled
? {...props.accessibilityState, disabled: _disabled}
: props.accessibilityState;

const isPressable =
(onPress != null ||
onLongPress != null ||
onStartShouldSetResponder != null) &&
restProps.disabled !== true;
_disabled !== true;

const initialized = useLazyInitialization(isPressable);
const config = useMemo(
Expand Down Expand Up @@ -174,7 +183,9 @@ const Text: React.AbstractComponent<
<NativeText
{...restProps}
{...eventHandlersForText}
disabled={_disabled}
accessible={accessible !== false}
accessibilityState={_accessibilityState}
allowFontScaling={allowFontScaling !== false}
ellipsizeMode={ellipsizeMode ?? 'tail'}
isHighlighted={isHighlighted}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@ public abstract class ReactTextAnchorViewManager<T extends View, C extends React
};
private static final String TAG = "ReactTextAnchorViewManager";

@ReactProp(name = "accessible")
public void setAccessible(ReactTextView view, boolean accessible) {
view.setFocusable(accessible);
}

// maxLines can only be set in master view (block), doesn't really make sense to set in a span
@ReactProp(name = ViewProps.NUMBER_OF_LINES, defaultInt = ViewDefaults.NUMBER_OF_LINES)
public void setNumberOfLines(ReactTextView view, int numberOfLines) {
Expand Down

0 comments on commit 7b2d817

Please sign in to comment.