Merge pull request #812 from tszhong0411/pack-3-dialogcontent-require…

…s-a-dialogtitle fix(ui): fix DialogContent requires a DialogTitle
tszhong0411 · Jul 26, 2024 · 63e8688 · 63e8688
2 parents 67d5d58 + c6530c6
commit 63e8688
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',