Implementé una cuadrícula horizontal con algunas tarjetas en ellos. La cuadrícula usa CSS scroll-snap y funciona muy bien cuando se navega con el mouse o la pantalla táctil.
El problema se produce cuando se navega por la cuadrícula con un teclado. Al presionar el tabulador después de navegar a través de la cuadrícula con las teclas de flecha, la vista vuelve al elemento que recibió el foco, no a la tarjeta a la que se ajustó actualmente.
Mi comportamiento ideal cuando presiono la pestaña es enfocarme en la tarjeta a la que se ha ajustado actualmente.
¿Alguna sugerencia para hacer esto posible?
Por lo que puedo decir, actualmente no hay forma de manejar esto de forma nativa. La respuesta de Nils Schwebel no va a ser muy elegante, pero parece la mejor manera de hacerlo.
Aquí hay un ejemplo de trabajo:
Nota: He agregado un poco de decoración pura para que sea más fácil de entender, por lo que es posible que deba seleccionar las partes relevantes después de algunas pruebas.
const main = document.getElementById("Main"), sections = document.getElementsByClassName("section"); main.addEventListener('scroll', (e) => { // Grab the position yo are scrolled to (the top of the viewport) let pos = main.scrollTop; for (let i = 0, l = sections.length; i < l; i++) { // Since our stap-align is centered, get the position of the middle of the viewport relative to the current section's top (if your snap items are not full-height, it might require using half the viewport's height instead) let relativePos = sections[i].offsetTop - pos + (sections[i].offsetHeight / 2); // Check if the point we found falls within the section if (relativePos >= 0 && relativePos < sections[i].offsetHeight) { sections[i].focus(); break; } } }); body { margin: unset; } main { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; width: 100%; height: 100vh; background-color: #222; overflow-y: auto; scroll-snap-type: y mandatory; } section { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; scroll-snap-align: center; } section:focus { border: none; outline: none; } #s1 { background-color: #d72748; } #s2 { background-color: #b51f7e; } #s3 { background-color: #e64869; } #s4 { background-color: #e79946; } section h2 { color: white; } <main id="Main"> <section class="section" id="s1" tabindex="1" aria-labelledby="a1"> <h2 id="a1">AREA 1</h2> </section> <section class="section" id="s2" tabindex="1" aria-labelledby="a3"> <h2 id="a2">AREA 2</h2> </section> <section class="section" id="s3" tabindex="1" aria-labelledby="a2"> <h2 id="a3">AREA 3</h2> </section> <section class="section" id="s4" tabindex="1" aria-labelledby="a4"> <h2 id="a4">AREA 4</h2> </section> </main>Agregaría un oyente de desplazamiento y solo verificaría si el elemento está en la parte superior de la vista de desplazamiento. Es posible que pueda modificar una de estas soluciones: ¿Cómo verificar si el elemento está visible después de desplazarse?