CODEWITHSUNDEEP
shadcnui
Jasperan
Jasperan

Reputation: 3766

Shadcn `DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users

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>

Upvotes: 23

Views: 21519

Answers (3)

Rajat Das
Rajat Das

Reputation: 187

Instead of adding an extra <VisuallyHidden.Root> component, you can simply use Tailwind's sr-only class or pure CSS (.sr-only { ... }).

This approach keeps the <SheetTitle> accessible for screen readers while visually hiding it, without introducing unnecessary DOM elements. It’s a cleaner, more efficient solution that maintains both accessibility and proper spacing.

Here's the class:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Comparison: hidden vs. sr-only

  • hidden (display: none;): Completely removes the element from the layout and the accessibility tree, meaning screen readers won’t detect it.
  • sr-only: Hides the element visually but keeps it accessible to screen readers, ensuring better accessibility without affecting layout.

Upvotes: 5

Jasperan
Jasperan

Reputation: 3766

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:

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

Upvotes: 37

Dari4sho
Dari4sho

Reputation: 101

Notice, even with VisuallyHidden applied as suggested by @Jasperan, SheetTitle will add a noticeable offset to following elements because of the nature of the CSS box model.

To avoid that, you can simply add display: none to the SheetTitle - using tailwind:

<SheetTitle className="hidden">
  <VisuallyHidden.Root>x</VisuallyHidden.Root>
</SheetTitle>

Upvotes: 1

Related Questions