[css-selectors-4] Should :active apply to ancestor elements during keyboard activation?

[josepharhar]

Consider the following:

<div class=parent>
  <button>button</button>
</div>
<style>
.parent {
  border: 5px solid gray;
}
button {
  border: 5px solid black;
}
.parent:active {
  border-color: red;
}
button:active {
  border-color: green;
}
</style>

The selectors spec says that :active should apply to the element and its flat tree ancestors, but activating the button with the keyboard (spacebar) has different behavior in browsers than clicking the button with a mouse.

Chrome, firefox, and safari all apply :active to the element and its ancestors when clicking the button, but when activating the button with the spacebar:

• Chrome and safari apply :active to the button but not its ancestors.
• Firefox does not apply :active to the button or its ancestors.

I think the HTML spec suggests that keyboard activating the element should make it :active, but what about the ancestor elements? I don't know why it was built this way in the browsers. This came up in a chrome bug.

[sb3nder]

Hi,
I can't say why it was built that way, but this issue might be relevant: whatwg/html#7578.
Also, I noticed that if you replace the element in your example with an <input> of type radio or checkbox, Firefox does apply :active to the input and its ancestors.