Additional keyboard navigation scenario

[ryanmearns]

I was having a play around with your keyboard navigation, and I want to suggest an improvement.

Problem: When a user uses the keyboard to navigate the list, the list item should be in focus.

Solution: Create a roving focus prop using the index and the current item index in a separate inner item.

Here is the code based on the original keyboard navigation to do it: https://codesandbox.io/s/react-virtuoso-focused-item-jv35gp?file=/App.js

I'm happy to make a PR if this is of interest.

[petyosi]

That's a good example, thank you very much for sharing it. I am not sure if mousemove should trigger a re-focus (a click should, obviously). I'm also not entirely sure if using the native focus is the way to go, as it might interfere with the browser tabbing. Imagine a list of 1000 items - a keyboard-exclusive user would get "stuck" in the list.

I wish I had more time to spend on the details of accessible lists :(.