View is still focusable after accessibilityState is set to disabled, but no screen reader output

[paperbackdragon]

Problem Description

If you make a View that's focusable and has an accessibility label, then set the accessibility state to have disabled: true, you can still tab to it (it's still focusable), but screen readers like Narrator don't read anything when it's focused.

I think one of two things could fix this:

• Have the screen reader read out the component as usual, but also have it say that it's disabled
• OR, make the component not focusable if it's disabled

Steps To Reproduce

I was able to reproduce this in the "Accessible" sample app by adding this code and including <TestView> in what gets rendered:

export const TestView: () => JSX.Element = () => {
  return (
    <View
      focusable
      accessible
      accessibilityLabel={'test label'}
      accessibilityRole="button"
      accessibilityState={{disabled: true}}>
      <Text>Test</Text>
    </View>
  );
};

Notice you can tab to the "Test" component in the UI, but narrator won't read anything, unless you comment out the accessibilityState prop.

Expected Results

See problem description - either the screen reader should announce this component, or you shouldn't be able to focus it at all.

CLI version

7.0.4

Environment

System:
    OS: Windows 10 10.0.25174
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 100.04 GB / 127.71 GB
  Binaries:
    Node: 16.9.1 - D:\CxCache\OneDrive.NodeJS.Windows.1.0.0\tools\nodejs\node.EXE
    Yarn: 1.22.11 - D:\CxCache\OneDrive.NodeJS.Windows.1.0.0\tools\nodejs\yarn.CMD
    npm: 7.21.1 - D:\CxCache\OneDrive.NodeJS.Windows.1.0.0\tools\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.17134.0, 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.11.32602.291 (Visual Studio Enterprise 2019), 17.2.32630.192 (Visual Studio Enterprise 2022)
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.68.2 => 0.68.2
    react-native-windows: 0.68.9 => 0.68.9
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

No response

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2019

Build Configuration

Debug

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

No response

[chrisglein]

First thing to do here will be to replicate on other platforms and compare behavior.

[chrisglein]

Potentially related: https://github.com/facebook/react-native/pull/34287

[AgneLukoseviciute]

related: https://github.com/microsoft/react-native-windows/issues/8875. Next step is to confirm that the root cause is the same for both, in which case this will be a matter of checking the disabled/enabled state when deciding on isTabStop value for that control.