From 6f579e22a409ece442a424c63375b38b23fa6f51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vasilj=20Milo=C5=A1evi=C4=87?= <eboyee@gmail.com>
Date: Sun, 27 Jul 2025 14:40:00 +0200
Subject: [PATCH] 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.
---
 packages/web/src/components/UI/Command.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/UI/Command.tsx b/packages/web/src/components/UI/Command.tsx
index 704e4567..f2c19345 100644
--- a/packages/web/src/components/UI/Command.tsx
+++ b/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>