[csswg-drafts] [selectors] Should `:active` match spacebar down? (#7332)

jonathantneal has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] Should `:active` match spacebar down? ==
[From the Selectors Level 4 specification](https://drafts.csswg.org/selectors/#the-active-pseudo)
> The `:active` pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

The `:active` pseudo-class is useful for providing immediate feedback about the expected click behavior of an element.

Its usage is well documented, in sources from [Adobe](https://xd.adobe.com/ideas/process/ui-design/designing-interactive-buttons-states/), [Google](https://material.io/design/interaction/states.html#pressed), [Salesforce](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview), [Tailwind](https://v2.tailwindcss.com/docs/hover-focus-and-other-states#active), and [CSS Tricks](https://css-tricks.com/css-basics-styling-links-like-boss/#aa-style-each-link-state).

The `:active` pseudo-class is versatile for pointers, in that it is not limited to specific elements.

[Example from MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:active#examples):
```css
p:active { background: #eee; }
```

There is a keyboard limitation to the `:active` pseudo-class that many sources do not mention. Between the time a user presses the spacebar and releases it, the `:active` pseudo-class is only ever applied to a `<button>` element. Some resources may even suggest that the pointer-triggered `:active` and the keyboard-triggered `:active` should always work the same.

> The `:active` pseudo-class is used to style an element that has been “activated” either by a pointing device or by a tap on a touchscreen device. **It can also be triggered by the keyboard, just like the `:focus` pseudo-class.**
> — [An Ultimate Guide To CSS Pseudo Classes And Pseudo Elements. Smashing Magazine](https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/#active)

It is my belief that `:active` state is equally valuable to style for both keyboard and the pointer interactions.

Should the `:active` pseudo-class apply to _any_ active element between the times the user presses the spacebar and releases it?

I think opening this behavior up to all elements should be considered, or perhaps alongside some other mechanism like [`:focusable`](https://github.com/w3c/csswg-drafts/issues/7269).

I do not know for certain why `:active` does not behave this way already, but I suspect it is related to the early WWW distinctions between hyperlinks and buttons, similar to how a spacebar press-and-release does not “click” a hyperlink. This is a problematic guess, tho, since the `:active` state applies to non-clickable elements when used with a pointer.

I was confused by a note in the specification that reads “_there may be document-language or implementation-specific limits on which elements can become [`:active`](https://drafts.csswg.org/selectors/#active-pseudo)._” This note links to the [HTML5 specification](https://drafts.csswg.org/selectors/#biblio-html5) which defines a [list of activatable elements](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-active). However, the HTML5 specification does not list any special criteria for spacebar interaction, and the criteria for `:active` — which includes “if the element is [focusable](https://html.spec.whatwg.org/multipage/interaction.html#focusable)” — suggests to me that it _could_ apply to any element activated.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7332 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 1 June 2022 22:33:05 UTC