petyosi
commented
2 years ago 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 :(.
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.