I’m getting the following error in my JavaScript console
DialogContentrequires aDialogTitlefor the component to be accessible for screen reader users.
I’m confused because I don’t use any Dialog components in my sheet, so why is this happening and how do I fix this error? Here’s my relevant code for the Sheet component:
<code><Sheet open={openMenu} onOpenChange={setOpenMenu}>
<SheetTrigger asChild>
<Button variant="ghost">
<MenuIcon color={location.pathname === "/" ? "white" : "black"} size="2em" />
</Button>
</SheetTrigger>
<SheetContent side="right" className="fixed z-50">
<div >
<p>Sheet Content</p>
</div>
</SheetContent>
</Sheet>
</code>
<code><Sheet open={openMenu} onOpenChange={setOpenMenu}>
<SheetTrigger asChild>
<Button variant="ghost">
<MenuIcon color={location.pathname === "/" ? "white" : "black"} size="2em" />
</Button>
</SheetTrigger>
<SheetContent side="right" className="fixed z-50">
<div >
<p>Sheet Content</p>
</div>
</SheetContent>
</Sheet>
</code>
<Sheet open={openMenu} onOpenChange={setOpenMenu}>
<SheetTrigger asChild>
<Button variant="ghost">
<MenuIcon color={location.pathname === "/" ? "white" : "black"} size="2em" />
</Button>
</SheetTrigger>
<SheetContent side="right" className="fixed z-50">
<div >
<p>Sheet Content</p>
</div>
</SheetContent>
</Sheet>
The Shadcn Sheet component is an extension of the Dialog component, and so <SheetContent> requires a <DialogTitle> just like a regular Dialog component does. Just add a dialog title underneath your sheet content and the error will go away.
<code><SheetContent side="right">
<DialogTitle>Menu</DialogTitle> // Add a dialog title
</SheetContent>
</code>
<code><SheetContent side="right">
<DialogTitle>Menu</DialogTitle> // Add a dialog title
</SheetContent>
</code>
<SheetContent side="right">
<DialogTitle>Menu</DialogTitle> // Add a dialog title
</SheetContent>