Narrator: Picker reads "collapsed" state twice after selecting an option from the Flyout

[jagorrin]

Environment

If you are using latest version:

1. react-native -v: 3.0.4
2. react-native run-windows --info:
   System:
   OS: Windows 10 10.0.18363
   CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
   Memory: 14.31 GB / 31.84 GB
   Binaries:
   Node: 10.15.0 - C:\Program Files\nodejs\node.EXE
   Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
   npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
   npmPackages:
   @react-native-community/cli: ^4.10.1 => 4.10.1
   react: 16.9.0 => 16.9.0
   react-native: 0.61.5 => 0.61.5
   react-native-windows: 0.61.14 => 0.61.14
   Installed UWP SDKs:
   10.0.14393.0
   10.0.15063.0
   10.0.16299.0
   10.0.17134.0
   10.0.17749.0
   10.0.17763.0
   10.0.18362.0
3. reg query "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock"
   HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock
   AllowDevelopmentWithoutDevLicense REG_DWORD 0x1
   AllowAllTrustedApps REG_DWORD 0x1

Then, specify:

• Target Platform Version(s): 10.0.18362.0

• Target Device(s): Desktop

• Visual Studio Version: 2017

• Build Configuration: Debug

Steps to Reproduce

1. Follow the "Getting Started" steps here to create a sample RNW app
2. Add a Picker to the app with some sample Picker.Item components as children
3. Launch the app
4. Enable Narrator in Windows
5. Using your keyboard, use [TAB] to navigate to the Picker
6. Press [ENTER] to interact with the Picker and display the Flyout with the available options
7. Select an option and press [ENTER]
8. Listen to the Narrator announcement upon the closure of the Flyout

Expected Behavior

Narrator will read the currently selected value of the Picker, followed by "Combo box, collapsed".

Actual Behavior

Narrator will read the currently selected value of the Picker, followed by "Combo box, collapsed, collapsed". The state "collapsed" should not be read aloud twice by Narrator.

Reproducible Demo

GitHub Repository

[kmelmon]

@kaiguo can you debug this as a first step? Wondering if this also happens with in-box XAML.

[kaiguo]

@jagorrin I created a test app same as your setup, react 16.9.0, react-native 0.61.5, react-native-windows 0.61.14, but wasn't able to repro it.

Here's the code I tested:

export default class App extends React.Component {
  state = {
    value: 'key1',
  };

  render() {
    return (
      <View>
        <Picker
          selectedValue={this.state.value}
          style={{width:150, margin:100}}
          onValueChange={(v) => this.setState({value: v})}>
          <Picker.Item label="hello" value="key0" />
          <Picker.Item label="world" value="key1" />
        </Picker>
      </View>
    );
  }
};

Can you share a minimal repro app if you are still seeing the issue? Thanks!

[jagorrin]

@kaiguo A minimal repro app is linked at the end of the issue under "Reproducible Demo"

[kaiguo]

@jagorrin, I wasn't able to repro it with your repro app either, I'm guessing it's probably a bug of in-box xaml in OS that got fixed. I'm on 20159.rs_onecore_dep.200625-1700.

[jagorrin]

I updated my OS to the most recent version and can confirm that I am no longer observing this issue.