Fluentui: Use tab to switch focus in DetailsList

[micnyk]

I have a DetailsWith with custom columns which render TextField components as inputs.

I want to have possibility to switch focus between these inputs by TAB key. Now it works only with right arrow.

Please add support to configure which key should be used to switch focus.

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx#L377

[betrue-final-final]

Why do you want to use tab? Is there a specific scenario? DetailsList is a gridlist, which has specific behavior that keyboard users, and especially blind users expect. Part of the reason is that tab is meant to take you to the next control, because if there is a tab for every item in the list, you could get stuck in there for a lot of key presses.

[michaelangotti]

@aditima for visibility

[Jahnp]

Chatted with @betrue-final-final in the hallway. The way this scenario should work is that you Tab to the DetailsList, arrow between rows and columns, Enter to activate inputs within each column, and Escape to back out to navigating between rows and columns. This is to prevent a user from getting "tab trabbed" in a DetailsList--if they tabbed between each input within each row, it'd be very easy to get stuck in the list and not be able to navigate back out.

Because of this I'd be pretty inclined to close this--but would love to hear @aditima's thoughts as well.

[aditima]

@micnyk - yes I agree with @betrue-final-final and @Jahnp. It has been a pain historically to navigate between various sections in a page if Tab is the only focus mechanism. In Fabric, we have attempted to use the arrow keys as much as possible for navigating inside a component. Hope this helps!