akveo / akveo/react-native-ui-kitten

Tab accessibility on web (expo-web)

Open
#1,314 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
10.7k
Forks
962
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.