Use non-default keys to progress through tab order?

[AgainstLightning]

Greetings!

I am hoping to get some help in regards to the following: Is it possible to "tab" through via up and down arrow keys instead of tab and shift tab? In the UX I have been given, the user is to tab to a card and then arrow through the card, so that tab will always progress to the next card.

Thank you!

[stefcameron]

Hello, @AgainstLightning 👋 ,

focus-trap-react relies on focus-trap under the hood, and it does not support configuring what the forward/reverse keys are. focus-trap relies on the browser's tab behavior as much as possible for moving (i.e. letting move) the focus around within a "trap". Operating systems typically use the tab key to move focus between controls, and I'm not aware that this is configurable either.

So I don't think focus-trap/-react will help with your requirements. But then, a "card" is typically not a modal construct, so should you even be trying to trap focus in one? Even if you could configure the keys to be up/down instead of tab/shift-tab, you'd then have the problem of manually deactivating the trap whenever the user gets to the last element in the card, and if you don't know what that is, that would add to the complexity of the challenge. And unless the "card" is displayed in a way that looks modal (like a modal dialog with OK and Cancel buttons), users might think it strange that they can't click anywhere on the screen except inside the Card...

Sounds to me like you need to implement custom Tabbar and Card components that handle the tab and arrow keys in the way you want to allow the user to move between Cards at the Tabbar level, and within Cards at the Card level.