Al usar transform: translate para animar la entrada y salida de un cajón, presionar la tecla de tabulación en Chrome alterará el diseño de la página para enfocar los contenidos ocultos del cajón.
La solución que casi funciona: añadir visibility: hidden el cajón cuando está cerrado, evitando que sus elementos sean enfocables. Sin embargo, el cajón debe estar visible durante la animación de cierre. Por lo tanto, al presionar la pestaña durante la animación de cierre, se reproduce el problema.
https://jsfiddle.net/uje5m1o8/6/
La posición del botón de alternar ahora es permanentemente incorrecta. Se mueve hacia arriba fuera de la pantalla.
Estoy buscando una manera de evitar que esto suceda. Preferiría que esto funcione con una cantidad arbitraria de contenido dentro del cajón, por lo que no es preferible agregar manualmente tabIndex=-1 a todo lo que hay en el cajón.
Agregue una verificación para ver si la animación está en progreso y evite la navegación con la pestaña durante ese tiempo. Sin embargo, podría haber una mejor solución.
let animInProg = false const toggle = () => { anim() const drawer = document.querySelector('#drawer') drawer.classList.toggle('drawer-open') drawer.classList.toggle('drawer-closed') } const toggleButton = document.querySelector('#toggle-button') toggleButton.addEventListener('click', toggle) function anim(){ animInProg = true; return setTimeout(()=>{ animInProg = false; }, 500) } document.addEventListener('keydown', (e)=>{ if(animInProg && e.key == 'Tab'){ e.preventDefault() } }) #interaction-box { width: 80%; height: 200px; margin: auto; background-color: cyan; position: relative; overflow: hidden; } #drawer { position: absolute; bottom: 0; background-color: red; width: 100%; height: 50%; display: flex; justify-content: center; align-items: flex-end; } .drawer-closed { transform: translateY(100%); visibility: hidden; transition: visibility 0ms 500ms, transform 500ms ease-in-out; } .drawer-open { transition: transform 500ms ease-in-out; } <div id="interaction-box"> <button id="toggle-button"> Toggle Drawer </button> <br /> Text 1 <br /> Text 2 <br /> Text 3 <br /> Text 4 <br /> Text 5 <br /> Text 6 <br /> Text 7 <br /> Text 8 <br /> Text 9 <div id="drawer" class="drawer-closed"> <button> Button Inside Drawer! </button> </div> </div>