css-toggle icon indicating copy to clipboard operation
css-toggle copied to clipboard

Nesting and toggle-trigger event propagation

Open myfonj opened this issue 2 years ago • 2 comments

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?

myfonj avatar Oct 18 '22 23:10 myfonj

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).

tabatkins avatar Nov 22 '22 22:11 tabatkins

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.

dbaron avatar Nov 22 '22 22:11 dbaron