Tab Roving – focus management for element groups

Summary

Tables and data grids in the web are everywhere – luckily, most are for data viewing, but sometimes, you'll end up needing edit functionality in a grid layout, like an Excel spreadsheet. Unfortunately, things immediately become a little trickier once a grid is made up of interactive elements like inputs. The tricky thing I want to talk about today in these interfaces is focus management. To illustrate, let's draw up the simplest of spreadsheets. We'll grab some inputs and arrange them in a grid. I've applied some styling so it looks and feels like your average spreadsheet software (except you can't edit this one). Sheet #10203040506070809101112131415161718192021222324252627282930313233343536 You can use the control buttons to tab through the table, or use the auto-play functionality if you're lazy! The currently focused cell will be highlighted in Green. Now, try selecting input 29 and see what happens! The problem If you're on a desktop or tablet using a mouse, trackpad or touchscreen, you're in luck: Just click the cell you want to target (in this case number 29) and you're done. That's quite a nice user experience! But for keyboard users, the mechanics used here quickly get unfeasible. Try it yourself: Go back up, reset the demo, and then use only the keyboard buttons to navigate to cell 29. It should take you at least 28 presses of the tab key to get there. That's a horrible experience! Sneaky cheatIf you were using your actual keyboard in the browser's actual tab sequence, you would have a superpower: You can press and hold the tab key until the focus gets to the desired element. Better than 46 presses for sure, but still not ideal! With more than a couple cells, there are two problems for keyboard users: Getting to the n-th cell requires n presses of the tab key Skipping the group of interactive elements requires all of the elements to be traversed. If you're above the grid and want to focus on a link that's below the grid, you need to go through all the input...