咨询：无JavaScript实现抽屉式Webform聚焦保持展开的无障碍方案

我是无障碍领域的新手，正在学习相关知识。我搭建了一个小型项目，将资讯/文章、webform放在左侧的抽屉组件中，初始状态为闭合，鼠标悬停或获得焦点时展开（类似浏览器标签页，但位于容器左侧）。Tab键可正常访问包括webform在内的所有元素，但当Tab切换到抽屉内的webform元素时，抽屉会因自身失去焦点而关闭。请问是否存在无需JavaScript的方法，让抽屉在Tab切换内部webform元素时保持展开状态？

代码片段 #

CSS #

.form {
  position: relative;
  padding: 30px 50px;
  margin-bottom: 10px;
  color: #aaa;
  background: rgba(25, 25, 25, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 5px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  transition: 1250ms;
  transform: translateX(-517px);
  max-width: 100%;
}

.form:hover,
.form:focus,
.form:active {
  transform: none;
  z-index: 9999;
}

.article2 {
  border-color: #00b7ff;
}

HTML #

<div class="article2 form" tabindex="5">
  <h3>Kontaktforms</h3>
  <form>
    <h2>Kontakta oss</h2>
    <label for="name">Namn</label>
    <input type="text" id="name" name="name" tabindex="6" required />

    <label for="email">E-postadress</label>
    <input type="email" id="email" name="email" tabindex="7" required />

    <label for="message">Meddelande</label>
    <textarea id="message" name="message" tabindex="8" required></textarea>

    <input type="submit" value="Skicka" />
  </form>
</div>

解决方案 #

可以用CSS的:focus-within伪类实现，它会在元素本身或内部任意子元素获得焦点时触发样式，完美适配你的场景：

修改CSS中的触发选择器，将.form:focus替换为.form:focus-within：

.form:hover,
.form:focus-within,
.form:active {
  transform: none;
  z-index: 9999;
}

原理很直接：当Tab切换到抽屉内的表单元素时，:focus-within会检测到容器内有元素获得焦点，从而保持抽屉的展开样式，直到焦点完全离开整个抽屉容器。这种方法完全不需要JavaScript，同时符合无障碍交互的要求。

内容的提问来源于stack exchange，提问作者Niels von Daake