css-toggle
css-toggle copied to clipboard
Nesting and toggle-trigger event propagation
Providing opportunity for any HTML element node to (technically) become active control element, this creates possibility to produce nested active structures.
Such structures were not technically possible (e.g. nested buttons, anchor tags, inputs) or were explicitly discouraged (mainly for accessibility reasons).
Should the toggle action on "activatable" element "bubble up", like HTML DOM events do in their second propagation stage?
data:text/html,<div tabindex="0" onkeypress="alert('outer')" onclick="onkeypress()">
Activation here alerts "outer".
<div tabindex="0" onkeypress="alert('inner')" onclick="onkeypress()">
Activation here alerts "inner", then "outer".
</div>
</div>
<style>div { padding: 1em; border: solid; }</style>
If so, could "inner" trigger produce effect that cancels out "outer" trigger (e.g. sets toggle state on body that disables toggle on "outer")?
Or should they propagate in opposite ("capture") direction? Or not propagate at all and be prevented to propagate from activatable element?
What if two or more nested elements have same toggle-trigger
target?
Per discussion in #39, dbaron has written his experimental impl to match the behavior of details/summary. In short, if the click reaches summary
but passed thru an element with native activation behavior (such as a
or input
), it doesn't trigger the details open/close behavior.
I think this is the right way to go. It makes a core toggle use-case consistent with the platform's instance of it, and just makes sense in general.
Details need to be ironed out - I need to investigate exactly how summary
is specified to do this (if it's specified at all; maybe browsers just all did the same thing?), and make sure that author scripts can trigger similar behavior (so elements with on-click handlers can also be nested inside of a toggle-trigger element and similarly "swallow" the click).
It's worth noting that it's sort of an extrapolation from the existing behavior of details
/summary
, since summary
isn't an element with separate native activation behavior (other than toggling the details) -- for example a summary
can't simultaneously be a button
or a link. So I've extrapolated that case by saying that native activation behavior on the element with toggle-trigger
is different from the native activation behavior on a descendant -- a case that doesn't really occur with summary
if you think of its native behavior as instead being toggle behavior.