SSR Accessibility issues with Disclosure component on Nuxt3/Vue

[ffoerster]

What package within Headless UI are you using?
@headlessui/vue

What version of that package are you using?
v1.7.15

What browser are you using?
Arc / N/A

Reproduction URL
https://stackblitz.com/edit/nuxt-starter-evrrcf?file=app.vue

Describe your issue
If a <Disclosure /> component is used with the default-open prop and is rendered on the server, the initial markup has malformed aria markup (that will trigger lighthouse accessibility checks)

After opening/closing the element, correct markup is returned.

Not sure, if this is a headlessui bug or something related to nuxt/vue ssr though.

[RobinMalfait]

Hey, thank you for this bug report! 🙏

This was a fun one! We made it work in a non-Nuxt application but then ran into funny mismatch issues in a Nuxt application. For example, logging/looking at the actual data we saw the correct values, but in the DOM the incorrect values were used.

We figured out a way by restructuring some internal code to make it work with SSR and hydration.

This should be fixed by #2645, and will be available in the next release.

You can already try it using:

• npm install @headlessui/vue@insiders.

[husayt]

This alone is a fix deserving for the release to happen