I am searching for a way to dynamically create a tabindex for each element in my React application. There are multiple components containing input elements I want to create a tabindex for and I am not sure how to coordinate them and avoid collision.
My React application is consisting of multiple tables containing input elements. At runtime the tables can be extended by the user creating additional input elements. I want to alter the direction in which the user tabs through those inputs, but I am not sure how I can generate a tabindex for each element.
The ways I came up with so far:
- have a fixed offset for each table (but I have no idea how many inputs may be in a single table and
tabindexshould stay below 32767 so I cant just assume huge gaps) - pass
tabindexoffset on to table and get amount of usedtabindexfrom React object to calculate next offset (seems to me like it would break modularity and awkward to implement) - tracking the next
tabindexthrough global state (hacky and would probably break when the table is extended) - tracking the next
tabindexthrough dom tree (no idea how to implement)
Is there a tool or a common practice for tabindex creation I am missing?