accessibilityLabel for Picker not read by VoiceOver

[mitchdowney]

@react-native-picker/picker 1.16.5
iOS 14

I can't get the accessibilityLabel to be read by VoiceOver on an iOS device with a simple Picker example. Instead it is reading the currently selected PickerItem for the focused Picker. Am I doing something wrong? Or does the accessibilityLabel prop on the Picker not get read by VoiceOver?

In the example below I would like the word "hours" read before

In the render:

<Picker
  accessibilityLabel={translate('hours')}
  enabled={!isActive}
  onValueChange={(itemValue) => {
    handleUpdateSleepTimer(itemValue, currentMinute, currentSecond)
  }}
  selectedValue={currentHour}>
  {hourItems}
</Picker>

How the hourItems is defined:

const generatePickerNumberItems = (total: number, key: string) => {
  const arr = [] as any
  for (let i = 0; i < total; i++) {
    arr.push(<Picker.Item key={i + key} label={i.toString()} value={i} />)
  }

  return arr
}

const hourItems = generatePickerNumberItems(24, 'hourItems')

It also seems that I cannot change the accessibilityLabel or accessibilityHint for the PickerItems, so I have no way of announcing to the user this Picker value represents the selected number of hours.

[mitchdowney]

I just updated our app to use @react-native-picker/picker 2.4.0, and I'm still running into this issue. It's making the Sleep Timer in Podverse almost unusable for screen reader users, as we can't announce each individual "hours" "minutes" "seconds" column.

Are we the only ones running into this issue? Other than setting an accessibilityLabel to the component, I'm not sure what else we're supposed to do to make this work.

Also, when I test the iOS Clock app and use its picker for sleep alarms, it reads "5 hours" or "30 minutes"...maybe the accessibilityLabel needs to be added to the Picker.Item rather than the Picker?

[duraz0rz]

It looks like accessibility-related props aren't being added to the final picker element at all. This is what I get as the rendered JSX when I was trying to write tests using accessibilityLabel.

Test:

    it("loads a list of songs from the server", async () => {
      const { debug, getByLabelText } = await subject()

      debug("subject output")

      const dropdown = getByLabelText("Pick a song")

      expect(dropdown.children).toHaveLength(songs.length)
    })

Code under test:

  ... //snip
  return (
    <>
      <Text>Pick a song...</Text>
      <Picker accessibilityLabel="Pick a song">
        {listOfSongs}
      </Picker>
    </>
  )

Output of debug() in the test:

     Array [
      <Text>
        Pick a song...
      </Text>,
      <View>
        <RNCPicker
          items={
            Array [
              Object {
                "label": "hello",
                "testID": "hello",
                "textColor": undefined,
                "value": "hello",
              },
              Object {
                "label": "Goodbye",
                "testID": "Goodbye",
                "textColor": undefined,
                "value": "Goodbye",
              },
            ]
          }
          numberOfLines={1}
          onChange={[Function anonymous]}
          selectedIndex={0}
          style={
            Array [
              Object {
                "height": 216,
              },
              undefined,
            ]
          }
          testID="song-picker"
        />
      </View>,
    ]

[paperbackdragon]

I'm also running into this issue, using the Picker with React Native Windows. Any accessibilityLabel I pass it is not being read by Narrator.

[Naturalclar]

🎉 This issue has been resolved in version 2.4.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[paperbackdragon]

@Naturalclar I believe this still might be an issue for iOS, since I only really fixed it for Windows. Would you be able to re-open it?

[ha3]

Hi @Naturalclar I can confirm that this issue still persists with 2.4.4

[jaaywags]

Still seeing this on 2.7.5

[Naturalclar]

Reopening it for iOS

[kastwey]

Hi, @Naturalclar I'm a blind engineer. I'm using this component in an iOS development, and I can confirm that this issue still persists on this platform. Could you please take a look at it? I would try to fix it, but my Objective C skills are nil. Thanks in advance!

[Naturalclar]

🎉 This issue has been resolved in version 2.8.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[kastwey]

@Naturalclar Yeaaaah! ¡Tested with Voice over and it works like a charm! Thanks!!!!!!!!!!!!!