为什么在 Chrome 中按按钮上的 Enter 不会导致 :active 状态？

Question

在当前 Chrome (80) 中检查以下代码片段：

foo.addEventListener('click', () => {
  console.log('button activated');
})

button:active {
  background-color: yellow;
}

<button type="button" id="foo">Activate me using Click, Enter, Space</button>

Chrome在单击button:active（向左或向右）按钮或使用 激活按钮时应用样式，但在使用 激活时则不应用样式。Space Enter

button:activeFirefox 仅在单击（仅鼠标左键）按钮时应用样式。

有人知道吗

1. 这应该如何运作，以及
2. button:active无论使用哪种激活方法，如何让按钮显示？

我非常喜欢基于 CSS 的解决方案。使用关键侦听器添加/删除类将是一个非常丑陋的解决方案，并且不在这个问题的范围内。

编辑

必须有，或者至少应该有一种标准方法，让用户使用Enter其操作的视觉反馈来激活按钮。这种行为是否没有在某处指定？如果是的话，我可以将其作为 Mozilla 错误跟踪器和 Chromium 问题跟踪器上的问题提出。

Answer 1

规范似乎对此很清楚：

伪:active类在用户激活元素时应用。例如，在用户按下鼠标按钮和释放鼠标按钮之间。在具有多个鼠标按钮的系统上，:active仅适用于主要或主要激活按钮（通常是“左”鼠标按钮）及其任何别名。

https://drafts.c​​sswg.org/selectors-3/#sel-active

因此它没有明确提到使用键盘激活元素，但它确实说明了

[...]当用户激活某个元素时[...]

由于用户在发出Enter或时显然会激活按钮Space，因此 Firefox 和 Chrome 似乎都明显违反了此处的规范。

最重要的是，Chrome在右键单击按钮:active时也适用（规范中明确指出不应出现这种情况）。

将在 CSSWG 跟踪器中提交问题，以使规范的这一部分更加明确。这是： https: //github.com/w3c/csswg-drafts/issues/4787