x-collapse does not hide collapsed content from the accessibility tree

[philwolstenholme]

Hi,

Big fan of Alpine! Thanks for all the time that has been put into it :)

I was checking out x-collapse and noticed that visually collapsed content is not hidden/removed from the accessibility tree, so keyboard users can tab to focusable elements that should be hidden, and the content may be announced to screenreader users.

At the moment we just hide content with overflow: hidden; height: 0px; but this isn't enough to hide content from assistive tech.

One way to hide the content safely would be to add a hidden attribute after the transition has ended and the content has been collapsed (or add it on load), and remove the attribute before un-collapsing the content.

The hidden attribute approach is particularly nice as it will play nicely with Tailwind's https://tailwindcss.com/docs/space utility. The utility won't add space around content that has been hidden with hidden:

.space-y-1>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.25rem * var(--tw-space-y-reverse))
}

You could also add display:none; as an inline style alternative, but it wouldn't play nicely with Tailwind's space utilities.

[klickreflex]

I agree this is a big problem, I had to remove most of my uses of x-collapse for now because it's so confusing for keyboard navigation.

[SimoTod]

I'm sure Caleb would be happy to accept a PR for this if someone wants to have a go

[philwolstenholme]

I might have a go at a PR, that sounds interesting. If I've not replied in a few days then someone else, feel free to do a PR of your own instead.

[philwolstenholme]

1hr later… #2353 😄

[philwolstenholme]

@calebporzio I've raised a PR for this one :) #2353

[philwolstenholme]

@alexanderbluhm if you could stick that HTML, CSS, and JS into a Codepen I'm sure someone here (maybe me!) could take a look at your spacing issue, but we'd need to see the code first :)

Are you using Tailwind's space between utilities by any chance?

[alexanderbluhm]

@philwolstenholme Sure, thanks for offering help!
Here is the Codepen. I added a light red border to the collapse element. I would expect that I don't see any border since I added x-show https://codepen.io/il4miy/pen/bGrmwwe?editors=1000

[philwolstenholme]

@alexanderbluhm , ah, so, x-show works a bit differently when combined with x-collapse. Instead of hiding the element completely it just sets its height to 0, so your margin-top was still being applied. My PR will change that, but in the meantime you can move your margin-top to inside the element that is being collapsed, like this: https://codepen.io/philw_/pen/RwZeGxN?editors=1100

I also added x-cloak (https://alpinejs.dev/directives/cloak) to make your collapsed content not flash when the page loads.

[alexanderbluhm]

@philwolstenholme I also tested this approach but the animation felt laggy/jumpy then.
What I did now to solve this was instead of the mt-2 on the p I added a spacing div with h-2.
Now it works fine! Thank you. Looking forward to your PR.

[philwolstenholme]

Yeah, I noticed the lagginess too! I'm glad you figured it out :)