如何让用户使用空格键和 Enter 键与切换按钮进行交互？

Question

我在这个示例之后使用复选框的标签制作了一个切换按钮。用户应该能够使用鼠标/触控板和键盘来控制切换按钮。鼠标/触控板控件工作正常，用户可以使用键盘上的 Tab 键聚焦/选择切换按钮。我不知道如何按空格键和回车键切换按钮。

我搜索了 Stack Overflow，并尝试了使用事件处理程序来处理输入和/或标签元素上的按键和按键事件的解决方案，以触发toggleContent 函数。我还尝试了一种解决方案，在触发toggleContent 函数之前检查输入(13) 的键码。由于似乎没有任何效果，我恢复到最后一个工作代码，该代码允许用户使用 Tab 键选择切换按钮，但不能使用空格键或 Enter 键切换按钮。

这是我的 HTML：

<div>
     <input type="checkbox" id="toggle" class="toggle" name="checkbox">
     <label for="toggle" id="label" tabindex="0"></label>
</div>

这是我的JS：

const checkbox = document.getElementById("toggle");

const basic = document.getElementById("basic");
const professional = document.getElementById("professional");
const master = document.getElementById("master");

function toggleContent () {
  if (this.checked) {
    basic.innerHTML = "19.99";
    professional.innerHTML = "24.99";
    master.innerHTML = "39.99";
  } else {
    basic.innerHTML = "199.99";
    professional.innerHTML = "249.99";
    master.innerHTML = "399.99";
  }  
}

checkbox.addEventListener('change', toggleContent);

可以在此处找到完整的代码和部署。

如何允许用户使用键盘上的空格键和 Enter 键与切换按钮进行交互？

Answer 1

创建切换按钮的常见方法是使用 aria-pressed 属性。它代表按钮的当前状态。它的文档描述为：

将 aria-pressed 添加到具有按钮角色的元素中，可以将 按钮变为切换按钮。 aria-pressed 属性仅 与切换按钮相关。它代表按钮的当前状态 “按下”状态。

我们还需要确保按钮具有可访问的名称，以便我们知道它会切换什么。为此，我们可以使用 aria-label。

使用

<button>

元素还具有额外的好处，它可以自动与空格键和输入键配合使用。

const button = document.getElementById("toggle");

function toggleContent () {
  const isToggled = button.getAttribute('aria-pressed') === 'true';
  button.setAttribute('aria-pressed', !isToggled);
  
  if(isToggled) {
    // Show monthly prices
  } else {
    // Show annual prices
  }
}

button.addEventListener('click', toggleContent);

#toggle {
  background: lightblue;
  width: 4.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
}

#toggle .inner {
  background: white;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transition: transform 0.2s ease-out;
}

#toggle[aria-pressed="true"] .inner {
  transform: translateX(calc(100% - 0.4rem));
}

<button id="toggle" type="button" aria-pressed="false" aria-label="Show monthly prices">
     <div class="inner"></div>
</button>