Rendering in a dialog causes console errors due to missing `DialogTitle`

[mrseanbaines]

Rendering in a dialog causes console errors coming from Radix (here) due to a missing DialogTitle:

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

Minimal reproduction here (code copied from cmdk README examples): https://codesandbox.io/p/sandbox/flwvwr

[angelopedroso]

Any update?

[corgitolecorgi]

Hello !
I fix it with this temporary adding this two lines :

<DialogTitle hidden={true}></DialogTitle>
<DialogDescription hidden={true}></DialogDescription>

in command.tsx for the CommandDialog

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

It give me this :

const CommandDialog = ({children, ...props}: DialogProps) => {
    return (
        <Dialog {...props}>
            <DialogTitle hidden={true}></DialogTitle>
            <DialogDescription hidden={true}></DialogDescription>
            <DialogContent className="overflow-hidden p-0">
                <Command
                    className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
                    {children}
                </Command>
            </DialogContent>
        </Dialog>
    )
}

[blai30]

Hopefully this gets fixed inside the Command.Dialog component since i know it depends on radix-ui primitives. Maybe we can pass a title prop or something? And maybe put the DialogTitle nested under radix-ui's VisuallyHidden component? (or have that optional)