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

This seems somewhat complement for older issue #4787.

Recently, while giving a warning about *"this particular CSS trick is not keyboard-accessible, so use it only as the last resort"* for a hundredth time (0), I realised that actually I have no idea why things are exactly like this, and that **maybe** specifying something like

> *any non-prevent-defaulted (1) activation gesture (like a <kbd>spacebar</kbd> press) on any focusable element (like `<what-ever tabindex="0">`) triggers the same CSS `:active` state currently left mouse button press does*

would not make the web explode. What do you think? I see no backward compatibility dangers in this at this point, only that for keyboard and assistive technology users some stuff that already works for mouse users would start working for the first time in the history, what sounds like a pretty nice thing to me.

To demonstrate how sad current inconsistent state is (and how hard it is to explain it to a novice), I made a [small "game"](https://myfonj.github.io/tst/css-active-keyboard-activation-test-game.html):

https://github.com/user-attachments/assets/39464153-89f3-4f40-a864-268fb4fb47fe

<details><summary>Video description</summary>
"Press to find out…" above list of rectangles of slightly varying sizes, each with a text "Who am I?" inside followed with a blank space.
There is also an On-Screen keyboard on the side. At first, mouse pointers gradually points on each item pressing it, what makes it change a colour and reveal text in the blank area. These revealed fragments read "I am a…" and the type of the element: button, link, span, SVG and MATHML. Then the on-screen keyboard is used, pressing the Space Bar button/key for the activation and changing to a next item with the Tab button/ley. Only the "button" element reveals its hidden text this way.
</details>

This recording is from current MS Edge, which, unlike Firefox (2), at least does `:active` with a Space Bar on `button`s. 

--- 

(0) Was probably at SO under https://stackoverflow.com/q/79578932/540955 
(1) Not sure about that "non-prevent-defaulted" thing, since it seems that `:active` works regardless the events (non-)propagation, and even on `disabled` form elements.
(2) Some time ago I've made a [test and got results from both browsers](https://bugzilla.mozilla.org/show_bug.cgi?id=68851#c29) for an ancient but closely related Firefox feature request.

-- 
GitHub Notification of comment by myfonj
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7332#issuecomment-2849458915 using your GitHub account


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

Received on Sunday, 4 May 2025 21:49:06 UTC