I am toying with an idea of rewriting our current Backbone-based app in React. One piece of functionality that is giving me headache is keyboard navigation. The app must be navigable using keyboard. Here is roughly what this looks like:
There is a header element with several buttons. There is also a main area with navigable elements that is built dynamically, from the results of a network request. The elements in the main area are arranged on the screen in a sort of grid (usually, 2 rows of 3 elements each, though on the mockup I showed rows of 2 elements).
The focus is initially on Element 1 (though if no elements have been fetched, then I guess a header button should be focused). Using arrow keys, one should be able to navigate within a component (from Element 1 to Element 2 with the right arrow key; from Element 2 to Element 1 with the left arrow key; from Element 1 to Element 3 with the down arrow key, and so on), and between components (from Element 1 to the header’s Button 1 with the up arrow ket; from header’s Button 1 to Element 1 with the down key, etc.). The elements that don't fit on the screen should be brought in view with the press of an arrow button when focused on an appropriate element (e.g., pressing right arrow when focused on Element 2 should "scroll" the main area to the right and bring Element 5 into the viewport).
Currently, in the original Backbone-based app, this functionality is achieved by adding a custom attribute to all navigable elements and then using a third-party jQuery-based library that calculates the absolute positions of the elements on the screen and moves the focus from one element to the next depending on how they are positioned relative to each other. What would be an idiomatic React (+ Redux, if possible) way to reproduce this behavior?