Para mi aplicación React, todo lo que quiero hacer es tomar la funcionalidad actual de Tab y Shift Tab, pero hacer que las flechas arriba/abajo hagan lo mismo.

Sé que puedes emular este comportamiento con Reacts "useRef" y "focus", pero mi aplicación tendrá elementos renderizados dinámicamente que siempre están cambiando.

Estoy trabajando con un componente recursivo que llena un árbol recursivo según la entrada de los usuarios. También planeo permitir que el orden de los nodos secundarios se pueda ordenar (por varios campos y orden de clasificación).

Por lo tanto, no hay una manera (fácil) de saber qué "ref" sería el elemento anterior/siguiente. Esto hace que "ref.current.focus()" sea prácticamente inutilizable.

Pero una vez que se renderiza el Dom, Tab y Shift Tab funcionan exactamente como yo quiero...

... Solo quiero que las teclas de flecha arriba/abajo hagan esto en su lugar (es decir, la flecha hacia arriba haría la acción de tabulación Shift y la flecha hacia abajo haría la acción de tabulación).

¿Hay alguna forma de enviar programáticamente una pulsación de tecla Tab/Shift Tab en una aplicación React?

¿O tal vez de alguna manera cambiar el enfoque al "hermano" anterior/siguiente después de que se construya el DOM (es decir, ref.current.nextSibling.focus())?

Parece que no puedo hacer que ninguno de estos enfoques funcione.