在 Chrome 中按 Tab 通过强制移动元素来聚焦屏幕外元素，破坏页面布局

Question

问题

当使用transform: translate 动画抽屉进出时，在 Chrome 中按 Tab 键将改变页面布局，使隐藏的抽屉内容成为焦点。

几乎可行的解决方案：在抽屉关闭时将visibility: hidden 添加到抽屉，防止其元素成为焦点。然而，抽屉必须在关闭动画期间可见。因此，在关闭动画期间按 Tab 会重现此问题。

示例

https://jsfiddle.net/uje5m1o8/6/

1. 打开抽屉
2. 关闭抽屉
3. 当抽屉处于关闭动画的中间时，按几次 Tab。

切换按钮的位置现在永久不正确。它向上移出屏幕。

目标

我正在寻找阻止这种情况发生的方法。我希望它可以处理抽屉中任意数量的内容，因此手动将tabIndex=-1 添加到抽屉中的所有内容是不可取的。

Answer 1

添加一个检查以查看动画是否正在进行，并在此期间阻止使用选项卡进行导航。不过可能有更好的解决方案。

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>