fix(ui): fix DialogContent requires a DialogTitle

tszhong0411 · Jul 26, 2024 · c6530c6 · c6530c6
1 parent 67d5d58
commit c6530c6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/brown-mugs-chew.md b/.changeset/brown-mugs-chew.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+fix DialogContent requires a DialogTitle
diff --git a/packages/ui/src/command.tsx b/packages/ui/src/command.tsx
@@ -6,7 +6,8 @@ import { Command as CommandPrimitive } from 'cmdk'
 import { SearchIcon } from 'lucide-react'
 import { forwardRef } from 'react'
 
-import { Dialog, DialogContent } from './dialog'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from './dialog'
+import { VisuallyHidden } from './visually-hidden'
 
 export const Command = forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -34,6 +35,10 @@ export const CommandDialog = (props: CommandDialogProps) => {
   return (
     <Dialog {...rest}>
       <DialogContent className='overflow-hidden p-0 shadow-lg'>
+        <VisuallyHidden>
+          <DialogTitle>Command Menu</DialogTitle>
+          <DialogDescription>Search a command</DialogDescription>
+        </VisuallyHidden>
         <Command
           className={cn(
             '[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium',