Accessibility

TimePicker using Flatlist#

In order for screen readers to interact with the time picker correctly, it is neccessary to wrap <FLatlist/> in <View/> and assign all accessibility properties to this. To make the time picker scrollable for visually impaired users, the accessibilityRole property must be set to adjustable. This will make assitive technologies suggest that the user swipes up or down to adjust the components values.

<View
  accessible
  accessibilityLabel="Time picker"
  accessibilityRole="adjustable"
  accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
  onAccessibilityActions={handleActions}
>
  <Flatlist />
</View>

To dictate how much the component should be adjusted on each swipe, create an action handler that handle action requests.

const handleActions = (event: AccessibilityActionEvent) => {
  switch (event.nativeEvent.actionName) {
    case 'increment':
      setWheelValue(currentValue + 1);
      break;
    case 'decrement':
      setWheelValue(currentValue - 1);
      break;
  }
};

In order for TalkBack to ignore the <Flatlist/> and the content on each index, use the importantForAccessibility property and set it to 'no-hide-descendants'. This will make sure the screen reader focus is only on the <View>. This is very important as it lets the user swipe right or left to other <Wheel> components in the time picker (e.g from a hour-picker -> minute picker), without having to swipe through each element in its list.

<View
  accessible
  accessibilityLabel="Time picker"
  accessibilityRole="adjustable"
  accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
  onAccessibilityActions={handleActions}
>
  <Flatlist importantForAccessibility="no-hide-descendants" ref={flatListRef} />
</View>

Up until now, only the value of the time picker is adjusted. In the example above, we get the ref of the <Flatlist/> so that it can be used to visually adjust the component as well. This is done with the scrollToIndex method from <FlatList/>. If you want the screen reader to announce the value it scrolled to, use the utility function a11yAnnouncement.

useEffect(() => {
  flatListRef.current?.scrollToIndex({ animated: true, index: value });
  a11yAnnouncement(value);
}, [value]);