Android: Disabled States does not announce or disable function for some components

[amarlette]

Description

Does not announce "disabled" on the following components:

• Button Button does not announce "disabled" #30934
• Image Image does not announce "disabled" #30935
• ImageBackground ImageBackground does not announce "disabled" #30936
• Text Text Component does not announce "disabled" #30937
• TextInput TextInput Component does not announce "disabled" #30938
• Slider Slider Component does not announce "disabled" #30939
• Picker Picker Component does not announce "disabled" #30940
• ProgressBarAndroid ProgressBarAndroid Component does not announce "disabled" #30941

Doesn't disable click functionality of the following components:

• Button Button Component doesn't disable click functionality when disabled #30943
• Switch Switch Component doesn't disable click functionality when disabled #30944
• Slider Slider Component doesn't disable click functionality when disabled #30945
• Picker Picker Component doesn't disable click functionality when disabled #30946 (Picker's own "enabled" property works correctly here)
• Text Text Component doesn't disable click functionality when disabled #30947
• TextInput TextInput Component doesn't disable click functionality when disabled #30948
• Pressable Pressable Component doesn't disable click functionality when disabled #30949
• TouchableHighlight TouchableHighlight Component doesn't disable click functionality when disabled #30950
• TouchableOpacity TouchableOpacity Component doesn't disable click functionality when disabled #30951
• TouchableNativeFeedback TouchableNativeFeedback Component doesn't disable click functionality when disabled #30952
• TouchableWithoutFeedback TouchableWithoutFeedback Component doesn't disable click functionality when disabled #30953

This behavior is usually due to there being both a "disabled" prop on the component itself, that does not necessarily sync with the accessibilityState's "disabled" field. When "disabled" is set, we should just automatically set accessibilityState: disabled as well so that they stay in sync. (You can see an example of this fix in the linked Pressable issue).

When testing a component, be sure to test both the accessibilityState and the components own disabled prop if one exists, and make sure all combinations of them work as expected. This commit has a great example of snapshot tests added to ensure the component behaves as expected.

Issue #30246 is similar to this issue and should be taken into account when creating a solution.

React Native version:

v0.63

Expected Results

When a component is "disabled", screen readers should announce this as part of their focus announcement. Clicks to these elements should also have no effect.

If a component has both a "disabled" prop and allows "accessibilityState: disabled", the "disabled" prop should be the authority on the state of the component (ignoring accessibilityState: disabled).

Snack

https://snack.expo.io/d1Ikg7nqo

Android details

To disable an element for Talkback, the AccessibilityNodeInfo's enabled property should be set to false and the clickable, longClickable, or focusable attribute should be true (one of these is likely already true if the element was clickable, it's important that it remains that way).

If an AccessibilityAction of AccessibilityNodeInfo.ACTION_CLICK, AccessibilityNodeInfo.ACTION_LONG_CLICK, or AccessibilityAction.ACTION_CONTEXT_CLICK is set on the AccessibilityNodeInfo, it should be removed.

All of the above can be achieved automatically by simply setting the enabled property of the View itself to false, but this means that the components own "disabled" prop (if one exists, such as with ), and the accessibilityState's "disabled" field, must remain in sync.

[lunaleaps]

@blavalla Is the expectation that accessibilityState: disabled and disabled prop to function the same way? What is the purpose of having both options then? Should we consolidate to one way?

[blavalla]

@lunaleaps, I would expect both properties to have the same experience. As for why they are separate, it's likely because the "disabled" prop also applies some sort of visual indicator of its state (dimming the element, etc.) which is what it is often used for. The accessibilityState: disabled only applies to the accessibility system, so won't do anything visually to the element itself. The accessibilityState: disabled prop is also part of a set of props that are on many different components (here), and disabled seems to be something implemented on a component-by-component basis.

When disabled is set we should probably just automatically set accessibilityState: disabled as well, or alternatively in the mapping of RN props to the native Views, we should consider this prop in the same way we consider accessibilityState: disabled. I can't think of a valid reason for these two properties to ever be out of sync, so we should probably make sure they don't get that way.

[fabOnReact]

@blavalla

I published PRs #33076 #33070 callstack/react-native-slider#354 to fix this issues.

The PRs are in DRAFT. I will complete the PRs in a couple of days.
Thanks 🙏