Could or should x-collapse retain display:none from x-show when collapsed?

[atorockio]

Hello! I appreciate all the work of @calebporzio and others on Alpine and the new plugins. My team uses it to add bits of interactivity to our new MODX sites which has been working out great!

We are trying out x-collapse and encountered an accessibility issue. Because x-collapse does not set the collapsed element to display: none, like x-show does by itself, any focusable elements inside the collapsed element are still focusable but not visible.

I can think of ways to work around this but it seems like it would be simplest to use display: none for collapsed elements in the plugin. Should we deal with the accessibility separately or is this bug?

[Tim-Wils]

@atorockio Tried it with x-on:transitionend here: https://codepen.io/tim-wils/pen/OJjyXZy it doesn't fully work removing the hidden class, but it was a start.

Maybe it's more convenient to create a PR https://github.com/alpinejs/alpine/blob/main/packages/collapse/src/index.js#L51 where el here is set to el.style.display = 'none'; in the onComplete of the animation.
Or more flexibility with collapsed/shown events on the element: maybe dispatch a collapsed event el.dispatchEvent(new CustomEvent('collapsed')) so you can do <p x-show="expanded" x-collapse x-on:collapsed="$el.style.display='none'">...</p>

[atorockio]

Checking in on this I see that the x-collapse plugin now sets display: none and hidden on collapsed items. Perfect!