自定义复选框实现上的 tabindex

Question

我正在使用一个自定义复选框切换，点击后效果很好，问题是我也希望可以通过键盘访问它，但我不知道如何使其可聚焦。我尝试将

tabindex="1"

添加到标签中，并向其添加

:focus-visible

CSS，但我似乎无法使用 Enter 键打开/关闭它。

const toggle = document.querySelector('.toggle-input');

toggle.addEventListener('change', function() {
  console.log(toggle.checked);
});

.instruction {
  font-size:20px;
  font-weight:bold;
  font-family:sans-serif;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 100px;
  margin: 100px 0 0;
  padding: 4px;
  border-radius: 40px;
}

.toggle:focus-visible {
  outline: red dotted 2px!important;
  outline-offset: 2px;
}

.toggle:before,
.toggle:after {
  content: "";
  display: table;
}

.toggle:after {
  clear: both;
}

.toggle-bg {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100%;
  height: 100%;
  background-color: #C0E6F6;
  border-radius: 40px;
  border: 4px solid #81C0D5;
  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid red;
  border-radius: 40px;
  z-index: 2;
  opacity: 0;
}

.toggle-switch {
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 50px;
  background-color: #F5EB42;
  border: 4px solid #E4C74D;
  border-radius: 50%;
  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-input:checked ~ .toggle-switch {
  margin-left: 0;
  border-color: #DEE1C5;
  background-color: #FFFDF2;
}

.toggle-input:checked ~ .toggle-bg {
  background-color: #484848;
  border-color: #202020;
}

.toggle-input:checked ~ .toggle-switch .toggle-switch-figure {
  margin-left: 40px;
  opacity: 0;
  transform: scale(0.1);
}

.toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt {
  transform: scale(1);
}

<div class="instruction">Click here and then tab into toggle</div>

<label class="toggle" tabindex="1">
  <input class="toggle-input" type="checkbox" />
  <div class="toggle-bg"></div>
  <div class="toggle-switch"></div>  
</label>

Answer 1

你应该看看这里

警告：建议您仅使用 0 和 -1 作为 tabindex 值。避免使用大于 0 的 tabindex 值和可以更改可聚焦 HTML 元素顺序的 CSS 属性（排序 Flex 项目）。这样做使得依赖使用键盘进行导航或辅助技术来导航和操作页面内容的人变得困难。相反，请按逻辑顺序编写包含元素的文档。

const label = document.querySelector(".toggle");
const toggle = document.querySelector(".toggle-input");

toggle.addEventListener("change", function() {
  console.log(toggle.checked);
});

label.addEventListener("keypress", (e) => {
  if ((e.code = "Enter" && toggle.checked)) {
    toggle.checked = false;
  } else {
    toggle.checked = true;
  }
});

.instruction {
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 100px;
  margin: 100px 0 0;
  padding: 4px;
  border-radius: 40px;
}

.toggle:focus-visible {
  outline: red dotted 2px !important;
  outline-offset: 2px;
}

.toggle:before,
.toggle:after {
  content: "";
  display: table;
}

.toggle:after {
  clear: both;
}

.toggle-bg {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100%;
  height: 100%;
  background-color: #c0e6f6;
  border-radius: 40px;
  border: 4px solid #81c0d5;
  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid red;
  border-radius: 40px;
  z-index: 2;
  opacity: 0;
}

.toggle-switch {
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 50px;
  background-color: #f5eb42;
  border: 4px solid #e4c74d;
  border-radius: 50%;
  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-input:checked~.toggle-switch {
  margin-left: 0;
  border-color: #dee1c5;
  background-color: #fffdf2;
}

.toggle-input:checked~.toggle-bg {
  background-color: #484848;
  border-color: #202020;
}

.toggle-input:checked~.toggle-switch .toggle-switch-figure {
  margin-left: 40px;
  opacity: 0;
  transform: scale(0.1);
}

.toggle-input:checked~.toggle-switch .toggle-switch-figureAlt {
  transform: scale(1);
}

<div class="instruction">Click here and then tab into toggle</div>

<label class="toggle" tabindex="0">
      <input class="toggle-input" type="checkbox" />
      <div class="toggle-bg"></div>
      <div class="toggle-switch"></div>
</label>