Skip to content

[Dialog] Visually hidden element without hidden attribute #2947

Closed
@nicoqh

Description

@nicoqh

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.18

Reproduction URL

https://codesandbox.io/p/devbox/empty-browser-glzqwd

Describe your issue

<div class="space-y-6">
    <Dialog ... />
    <Item />
    <Item />
    <Item />
</div>

Tailwind's spacing utilities don't affect hidden elements (.space-y-6 > :not([hidden]) ~ :not([hidden])). But there's an element that renders in place of <Dialog> which is visually hidden, but without a hidden attribute. The result is that a top margin is added to the first <Item>.

A solution could be to add the hidden attribute, or use aria-hidden which is even less tied to Tailwind.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions