Pressable performs action on keyboard input when disabled property set to 'true'

[YajurG]

Problem Description

Currently, when a Pressable has the disabled property set to true, users can still activate it when using a keyboard input. When using a mouse to click, the Pressable doesn't activate an action. This appears to be a bug/regression and has been raised as an issue by the Accessibility Compliance team on Gallery: https://github.com/microsoft/react-native-gallery/issues/363

Steps To Reproduce

1. Open RNTester on Playground
2. Open the Pressable example page in the Components section
3. Navigate to the 'Disabled Pressable' using a keyboard
4. Press enter on the keyboard, and watch the value change

Before pressing enter:

While pressing enter:

Expected Results

When hitting enter, the Pressable value should not change.

CLI version

12.0.0-alpha.15

Environment

System:
  OS: Windows 11 10.0.22631
  CPU: "(24) x64 AMD Ryzen Threadripper PRO 3945WX 12-Cores     "
  Memory: 36.25 GB / 63.86 GB
Binaries:
  Node:
    version: 18.12.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 8.19.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-213.7172.25.2113.9123335
  Visual Studio:
    - 17.8.34309.116 (Visual Studio Enterprise 2022)
    - 16.11.34301.259 (Visual Studio Enterprise 2019)
Languages:
  Java:
    version: 18.0.2.1
    path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

No response

[jonthysell]

Can you check if this is just in main? @YajurG Can you check in 73 / 72?

[YajurG]

Checked on playground - is not an issue on 0.73-stable or 0.72-stable.

[YajurG]

Follow up to this issue - looks like the example code for Disabled Pressable is different in Gallery and Playground, which is why there is a discrepancy in the appearance of the bug - code differences below.

Playrgound example:

<Pressable disabled={true} style={[styles.row, styles.block]}>
  <Text style={styles.disabledButton}>Disabled Pressable</Text>
</Pressable>

Gallery example:

<Pressable
    accessibilityRole="button"
    accessibilityLabel={'example disabled pressable'}
    style={{
      width: 140,
      height: 50,
      borderRadius: 2,
      backgroundColor:
        Platform.OS === 'windows'
          ? PlatformColor('SystemColorButtonFaceColor')
           : 'silver',
      opacity: 0.5,
    }}
    disabled={true}>
    {({pressed}) => (
      <Text
        style={{
          textAlign: 'center',
          paddingVertical: 15,
          color: colors.text,
        }}>
        {pressed ? 'This will never be triggered.' : 'Disabled Pressable'}
       </Text>
    )}
</Pressable>

I tested Gallery example in playground in 0.72-stable and main (the above screenshots are from copying the gallery example into playground), and the issue is present there. I am trying to repro the issue in 0.73-stable but am having some build issues locally. It looks like when the component is pressed with keyboard input, the conditional is continuting to run despite the disabled property.

[Yajur-Grover]

Worked on debugging this more on main - I tried setting a break point on the disabled property check in the UpdateProperty() function in ViewViewManager, and the breakpoint was not being hit even when the disabled property was set. From cycling through all the properties that are calling UpdateProperty, UpdateProperty() is never being called by the disabled property even when it is set.

Code sample used:

     <>
      <Pressable
        accessible={true}
        disabled={true}
          style={({pressed}) => [
          {opacity: pressed ? 0.5 : 1},
            styles.row,
          styles.block,
        ]}
        testID="pressable_disabled_true">
        <Text style={styles.disabledButton}>Disabled Pressable</Text>
      </Pressable>
     </>

[Yajur-Grover]

Resolved by #12799