Dialogs get the hidden attribute when being closed

[innocenzi]

I'm trying out using and animating the dialog component. I'm using Tailwind CSS, which comes with a CSS reset that includes the following style:

/*
Make elements with the HTML hidden attribute stay hidden by default.
*/
[hidden] {
  display: none;
}

Using Zag, dialogs get the hidden attribute when they're being closed, which pairs poorly when using Tailwind. I am wondering:

• Does the hidden attribute have accessibility merits?
• Would it be possible to make it opt-out (or even opt-in)?

---

I'm also asking there since this is somewhat related and I don't want to create too many issues. To animate the dialog's backdrop differently than the dialog's content, I had to use Headless UI's transition component.

Ideally, my only dependency would be Zag.

Do you have recommendations for properly animating dialogs? Would a transition component similar to Headless UI's would be useful within Zag?

Thank you!

[segunadebayo]

Hi @innocenzi,

We use hidden for most components because that's the framework-agnostic way of hiding elements.

You have two options here:

• Explicitly set hidden={false} on the elements you want to remain visible and manage that attribute based on the transition timings.
• Because of this scenario, we created a "presence" machine that tracks elements' animation state and applies the hidden attribute as needed.

Here's a reference to how to set up the presence component in [Zag.js] and [Ark UI]

I hope this helps you.

[innocenzi]

Thanks for the answer! Using :hidden="false" works. I didn't try assuming this would be overridden internally by Zag. Though this would easily be forgetable, this is a correct workaround in my situation.

Wouldn't a proper way to actually hide elements to simply use display: none though? I'm afraid I still don't get why hidden is used there.

Also, regarding my second question, would you have a recommendation (other than importing 3rd-party code like Headless UI) for animating components like the dialog?

[segunadebayo]

In most browsers, hidden maps to display: none. The CSS reset in Tailwind is mostly to make it consistent for older browsers.

I'd recommend checking the Presence component I recommended above.

[innocenzi]

I didn't know about that. Thank you for the explanation! That totally makes sense.

Regarding the presence component, is it related to the hidden topic or to the animation? Haven't quite grasped what it was about.