Re: [w3ctag/design-reviews] Early design review: CSS Toggles (Issue #730)

> toggle-visibility seems like a pretty thin abstraction to be worth the extra API surface. Isn't it possible to do with the rest of the syntax with only a couple lines of code?

Having the connection between toggle and content-visibility be expressed *explicitly* like this should aid in reliably inferring accessibility semantics and relationships; this exact behavior is a vital part of several common and important aria patterns.

But also, achieving the full functionality here is *not* actually trivial. It's not *hard*, but it requires some scripting to, for example, activate the toggle when the element becomes automatically shown (due to becoming relevant to the user). Making the whole suite work together in some simple package is quite valuable for what we expect to be a super common use-case.

> Not sure if I misunderstood something, can't you create a cycle like this:

Nope, the `at <state>` part of toggle-root is only used to establish the initial state of the toggle when the property causes one to be freshly created. It has zero effect on a toggle after creation; there is no way, in CSS, to set the current active value of a toggle. (It can only be set by user activation, or direct scripting, neither of which can loop in a relevant way.)

> possibly because syntax and values (at, set keywords and author-defined identifiers) are mixed and on the same level.

Yeah, this has been a minor concern of mine as well. It might be worth making both counter names and state names use dashed-ident; it's a little more typing (and some checking in the scripting API), but it makes it immediately obvious what is author-defined vs CSS-defined, and avoids potential future issues with syntax ambiguity.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/730#issuecomment-1124298690
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/730/1124298690@github.com>