Re: [csswg-drafts] Add an `::interest-button` pseudo element to interest invokers (#12437)

Thanks for the great discussion just now. I feel like we roughly agreed with the *problem* statement, which is that we need a way for touchscreen and AR users to show interest in an element easily, without potential a11y or other foot guns. As discussed, I think we're at these potential solutions to this problem:

1. The proposed `::interest-button` pseudo element approach. E.g.: `<a interestfor></a><style>a::interest-button {content: "?"}</style>`
    - Pros: Behavior is correct by default, and hard to mess up.
    - Cons: Feels weird to add a pseudo element on all elements (but only originated on `<a interestfor>` and `<button interestfor>`). Positioning is too constrained - always shows up in a particular relative position (after the element, before ::after).
2. Add a new HTML element that, when a child of an interest invoker link or button, shows interest when clicked, and isn't focusable by default. So: `<a interestfor=foo>Link text <interestforbutton> ? </interestforbutton></a>`.
    - Pros: Can be placed anywhere within the invoker element. Can have the correct focus/a11y behavior by default.
    - Cons: Maybe funny to add a special element just for this?
3. (Alternative to HTML above) Add an attribute on the `<span>` element that gives it the special behavior above. E.g.: `<a interestfor>Link text <span showsinterest> ? </span></a>`
    - Pros: Same benefits as new HTML element.
    - Cons: ?
4. Add a JS API that shows interest. E.g.: `<a interestfor=foo><span onclick="this.parentElement.triggerInterest()"> ? </span></a>`.
    - Pros: no "funny" magic in CSS or HTML. Just JS.
    - Cons: Non-declarative - requires JS. Several a11y footguns: Using `<span onclick>` is a known anti-pattern, so it's confusing to say "use it in this one special case". Also because of the latter and because the behavior is button-like, developers are likely to instead do `<button onclick=...>` which would be incorrect from an a11y perspective because the button is focusable.

I believe all of these meet the use case, to varying degrees.

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


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

Received on Thursday, 8 January 2026 17:57:04 UTC