accessibilityLiveRegion reads Text changes twice

[paperbackdragon]

Problem Description

I've found that in our React Native Windows app (which uses XAML islands), a simple component such as this one ends up announcing the changed text twice, even if it's the only rendered component in the UI:

const TestComponent: () => JSX.Element = () => {
  const [text, setText] = React.useState('not set');

  return (
    <Text accessibilityLiveRegion='assertive' onPress={() => setText('set!')}>
      {text}
    </Text>
  );
};

I've put in console statements and useEffect hooks to confirm it's not being rendered twice or the variable changed twice.

Steps To Reproduce

See problem description. With a component such as that one, "set!" is read twice when you click the Text element.

Expected Results

Expected result is that "set" is only read once.

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: 99.83 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]

Need to replicate this just in XAML to see how Narrator/etc. announces this. Then look at Accessibility Insights to see if there's something in the structure causing the double announce. Also possible there's a reader-specific issue, but we should start with that.

[paperbackdragon]

@AgneLukoseviciute I keep trying to figure out what's wrong here but I feel that it's got to be something lower-level than the TypeScript layer. I can't seem to reproduce the error with just my short code snippet above in the playground app, but it's consistently reproducible in our app. I don't think I know enough about accessibilityLiveRegion to tell what could be different in the two environments to affect this. I also didn't see any difference in Accessibility Insights if I used the same code in the playground vs our app:

Our app:

Playground:

[AgneLukoseviciute]

@paperbackdragon if you use a different screen reader like JAWS or NVDA do you get the same issue? That would help narrow down whether this might be a problem with Narrator.

Since we can't repro outside of your app, a couple more questions for you:

• When trying out your code snippet in playground did you use the win32/xaml islands playground?

• Does changing the accessibilityLiveRegion prop to a different value fixes the double announcement?

[paperbackdragon]

@AgneLukoseviciute Just tried with JAWS, and it seems like I don't hear the announcement at all when the text changes. Changing the prop value doesn't affect the issue. I did notice that in our XAML islands setup, with a bare-bones app, I could reproduce the original issue with Narrator, but without XAML islands, I can't reproduce it. So perhaps that's the cause?

[AgneLukoseviciute]

@paperbackdragon got it! Yeah definitely seems like it's an issue with XAML islands then, I'm guessing the testing you've done is on a RNW xaml islands app? We'll want to check this on a non-RNW XAML islands app as well, to narrow down if it's an issue with RNW or XAML islands itself.

[paperbackdragon]

I've actually been able to spin up both a simple XAML islands app as well as a simple non-islands app and it seems like it only reproduced in the XAML islands app.

[paperbackdragon]

Clarification after talking to Agne offline: I tried RNW with XAML islands and RNW without XAML islands -- I did not try XAML islands without RNW.

[TatianaKapos]

Moving to backlog, doesn't seem like it needs to be tied to a specific release