Shadcn Warning: Missing `Description` or `aria-describedby={undefined}` for {DialogContent}

Question

I'm getting the following warning in my JavaScript console every time I open my Sheet component.

Warning: Missing Description or aria-describedby={undefined} for {DialogContent}.

I'm confused because I don't use any Dialog components in my sheet, so why is this happening and how do I get rid of this warning? Here's my relevant code for the Sheet component:

<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>

Answer 1

The Shadcn Sheet component is an extension of the Dialog component, and so <SheetContent> requires a <SheetDescription> just like a regular Dialog component requires. Just add a sheet description underneath your sheet content and the error will go away.

<SheetContent side="right">
  <SheetHeader>
    <SheetDescription>description goes here</SheetDescription>
  </SheetHeader>
</SheetContent>

If you don't want the description to show up in your application, you can use Tailwind's sr-only class.

<SheetDescription className="sr-only">
  description goes here
</SheetDescription>

Answer 2

In my case using with React, Typescript and Shadcn UI in Nextjs "@radix-ui/react-dialog": "^1.1.1" here

It was missing a <DialogDescription>

This fixed the warning for me.

   <Dialog open={isOpen} onOpenChange={setIsOpen}>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>My Title</DialogTitle>

        <DialogDescription>Fixed the warning</DialogDescription>

      </DialogHeader>
      <div>Some other content</div>
    </DialogContent>
  </Dialog>