Example of Aria Management for Typeahead in React Native

index.js

class TypeaheadInput extends Component {
  constructor() {
    this._dropdownDomId = `typeahead-${Math.random()}`;
    // This is really fake, but it does need to be bound on the text input
    this.state = {
      focusedItemIdx: 0
    }
  }
  render() {
    const focusedItemDomId = `typeaheadItem-${focusedItemIdx}`;
    <View>
      <AppTextInput
        accessibilityRole="combobox"
        ariaActiveDescendant={this.state.focusedId}
        ariaAutocomplete="list"
        ariaExpanded={results.length > 0}
        ariaLabel='Search for autocomplete'
        ariaOwns={this._dropdownDomId}
        ariaRole="combobox"
        autoComplete={'off'}
        onKeyPress={this._handleKeyPress}
      />
      {results.length > 0 ? <TypeaheadDropdown focusedItemDomId={focusedItemDomId} focusedItemIdx={this.state.focusedItemIdx} /> : null}
    </View>
  }

  // If the key is an arrow or enter or some such, we move focus or handle it like a menu
  _handleKeyPress = () => {
    this.setState(state => ({ focusedItemIdx: state.focusedItemIdx + 1 }));
  }
}

class TypeaheadDropdown extends Component {
  render() {
    <View
      accessibilityRole="listbox"
      aria-multiselectable="false"
      id={domId}
    >
      {this.props.items.map((item, i) => <View
        accessibilityRole="option"
        children={item.value}
        id={i === this.props.focusedItemIdx ? this.props.focusedItemDomId : undefined}
      />)}
    </View>
  }
}