2

I'm getting the following error in my JavaScript console every time I open my Shadcn Sheet component

DialogContent requires a DialogTitle for 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:

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

1 Answer 1

6

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

<SheetContent side="right">
  <SheetTitle>Menu</SheetTitle> // Add a Sheet title
</SheetContent>

If you don't want the title to show up in your application, use radixUI's VisuallyHidden component like so:

<SheetTitle>
  <VisuallyHidden.Root>
    Menu
  </VisuallyHidden.Root>
</SheetTitle>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.