[bug]: Sheet error for screen reader users

[stefandevo]

Describe the bug

When using the Sheet component I get two errors:

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

`DialogContent` requires a `DialogTitle` 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.

For more information, see https://radix-ui.com/primitives/docs/components/dialog 

---

Warning: Missing `Description` or `aria-describedby={undefined}` for {DialogContent}. 
    at DescriptionWarning (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dialog/dist/index.mjs:457:11)

System Info

All browsers.

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[stefandevo]

Proposed fix in Sheet component:

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      <VisuallyHidden>
        <SheetTitle>Sheet Content</SheetTitle>
        <SheetDescription>
          This is a hidden description for screen readers.
        </SheetDescription>
      </VisuallyHidden>
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
));
SheetContent.displayName = SheetPrimitive.Content.displayName;

[Maqed]

First thing first you should install visually hidden component from RadixUI as Shadcn is built on top of it.

npm install @radix-ui/react-visually-hidden

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!

[leandronn]

This happens with CommandDialog component as well, but there's no CommandDialogTitle to fix this. It also happens in the shadcn site in the Command Dialog example (https://ui.shadcn.com/docs/components/command):

[soni-canra-wiguna]

I get the same error but in the component drawer. the solution is to add the className sr-only.

<DrawerHeader>
     <DrawerTitle className="sr-only">title</DrawerTitle>
         <DrawerDescription className="sr-only">description</DrawerDescription>
</DrawerHeader>

[gsmatheus]

This happens with CommandDialog component as well, but there's no CommandDialogTitle to fix this. It also happens in the shadcn site in the Command Dialog example (https://ui.shadcn.com/docs/components/command):

For the command, I found a temporary solution for my project:

import { DialogTitle, type DialogProps } from "@radix-ui/react-dialog";
....
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  return (
    <Dialog {...props}>
      <DialogTitle></DialogTitle>
      <DialogContent className="overflow-hidden p-0">
        ....
      </DialogContent>
    </Dialog>
  );
};

Passing an empty DialogTitle worked for me and stopped the error, so I'll use it until an official fix is released.

[alexander-densley]

+1