-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[bug]: Sheet error for screen reader users #4302
Comments
Proposed fix in Sheet component:
|
First thing first you should install visually hidden component from RadixUI as Shadcn is built on top of it.
Then use it as following: <Sheet>
<SheetTrigger asChild>
{/* Trigger Logic */}
</SheetTrigger>
<SheetContent>
<SheetHeader>
<VisuallyHidden>
<SheetTitle>Nav Content</SheetTitle>
</VisuallyHidden>
<SheetDescription className="flex items-center flex-col justify-between h-[300px]">
{/* Descrciption Logic */}
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet> I hope that helps! |
This happens with CommandDialog component as well, but there's no CommandDialogTitle to fix this. |
I get the same error but in the component drawer. the solution is to add the className
|
Describe the bug
When using the Sheet component I get two errors:
DialogContent
requires aDialogTitle
for the component to be accessible for screen reader users.If you want to hide the
DialogTitle
, you can wrap it with our VisuallyHidden component.Warning: Missing Description or aria-describedby={undefined} for {DialogContent}.
Affected component/components
Sheet
How to reproduce
Using the https://ui.shadcn.com/blocks#dashboard-05 sample. Reduce width so that the Sheet shows; warnings in the console.
Codesandbox/StackBlitz link
No response
Logs
System Info
Before submitting
The text was updated successfully, but these errors were encountered: