Tab accessibility on web (expo-web)

[m4ttheweric]

Hi,

I am using expo, specifically expo for web, to build a login form. I have some pretty straightforward code, 2 inputs, and a submit button. I have some icons being used in the accessoryLeft on both inputs.

When I attempt to tab between the two inputs in Chrome, it takes 11 keystrokes on the tab key to move from one input to the next and you can see the outline move through the icon in the accessoryLeft in what appears to be layers of the svg elements.

I don't see any way to control this but it seems like icons and other elements should probably get the tabIndex="-1" in the resulting html so as to avoid this kind of issue.

Is there a way to specific what the next focused element is when tabbing out of an input?

The regular react-native solution of handling the onSubmitEditing and focusing into the next field via ref does not work unless you hit the enter key in the browser.

I am using the latest version of UI Kitten and expo SDK 39.

[m4ttheweric]

Ok, for anyone else hitting this issue, this is how I worked around it:

<Input
onKeyPress={e => {
   if (
      Platform.OS === 'web' &&
      e.nativeEvent.key === 'Tab'
   ) {
      e.preventDefault();
      passwordRef.current.focus();
   }
}}
/>

passwordRef is the ref to the password input, and it's important to include preventDefault() or it will add an extra tab to your outcome.