Al fin luego de tanto trabajar pudimos dar con el resultado de esta escollo que muchos usuarios de esta web han presentado. Si tienes algún detalle que compartir no dejes de dejar tu comentario.
Solución:
Dar el div a tabindex, por lo que será enfocable. En su caso, un tabindex de -1 sería mejor, ya que permitiría enfocar el elemento pero permanecer inaccesible por la pestaña key.
El tabindex global attribute indica si se puede enfocar su elemento, y si/dónde participa en la navegación secuencial del teclado (generalmente con la tecla Tab keyde ahí el nombre).
Un valor negativo (generalmente tabindex=”-1″) significa que el elemento debe ser enfocable, pero no debe ser accesible a través de la navegación secuencial del teclado. Es sobre todo útil para crear widgets accesibles con JavaScript.
A continuación, puede agregar un detector de eventos keydown al elemento y comprobar el código de tecla del evento.
document.getElementById("someId").addEventListener("keydown", function(event)
//do something on keydown
if(event.keyCode==13)
//enter key was pressed
if (event.keyCode >= 65 && event.keyCode <= 90)
//input was a-z
);
Puede permitir que un elemento reciba el foco dándole un índice de tabulación.
Mientras esté enfocado key los eventos deben ser capturados en él.
Si desea que el elemento sea enfocable usando la pestaña keyasígnele un índice mayor que -1.
ejemplo sencillo
Al final de todo puedes encontrar las aclaraciones de otros desarrolladores, tú además tienes la libertad de mostrar el tuyo si lo deseas.