Browse Source
Add visually hidden DialogTitle to the CommandDialog
Added a visually hidden DialogTitle to the CommandDialog component in Command.tsx to maintain accessibility while keeping the clean UI of the command palette.
pull/742/head
Vasilj Milošević
12 months ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with
5 additions and
1 deletions
packages/web/src/components/UI/Command.tsx
@ -1,4 +1,5 @@
import { Dialog , DialogContent } from "@components/UI/Dialog.tsx" ;
import { Dialog , DialogContent , DialogTitle } from "@components/UI/Dialog.tsx" ;
import { VisuallyHidden } from "@radix-ui/react-visually-hidden" ;
import { cn } from "@core/utils/cn.ts" ;
import type { DialogProps } from "@radix-ui/react-dialog" ;
import { Command as CommandPrimitive } from "cmdk" ;
@ -24,6 +25,9 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
return (
< Dialog { ...props } >
< DialogContent className = "overflow-hidden p-0 shadow-2xl [&_[dialog-overlay]]:bg-red-100" >
< VisuallyHidden asChild >
< DialogTitle > Command Menu < / DialogTitle >
< / VisuallyHidden >
< Command className = "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 [&_[cmdk-group]]:px-2 [&_[cmdk-group]_+[cmdk-group]]:pt-0 [&_[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 >