Add visually hidden DialogTitle to the CommandDialog (#742)

* 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.

* add visually hidden component as explicit dependency

.gitignore

@@ -7,4 +7,4 @@ dev-dist
 __screenshots__*
 *.diff
 npm/
-
+.idea

bun.lock

@@ -6,6 +6,7 @@
       "dependencies": {
         "@bufbuild/protobuf": "^2.6.1",
         "@meshtastic/protobufs": "npm:@jsr/meshtastic__protobufs",
+        "@radix-ui/react-visually-hidden": "^1.2.3",
         "ste-simple-events": "^3.0.11",
         "tslog": "^4.9.3",
       },
@@ -54,7 +55,7 @@
       "dependencies": {
         "@bufbuild/protobuf": "^2.6.0",
         "@hookform/resolvers": "^5.1.1",
-        "@meshtastic/core": "workspace:*",
+        "@meshtastic/core": "npm:@jsr/[email protected]",
         "@meshtastic/transport-http": "npm:@jsr/meshtastic__transport-http",
         "@meshtastic/transport-web-bluetooth": "npm:@jsr/meshtastic__transport-web-bluetooth",
         "@meshtastic/transport-web-serial": "npm:@jsr/meshtastic__transport-web-serial",
@@ -1702,6 +1703,8 @@
 
     "lru-cache/yallist": ["[email protected]", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
+    "meshtastic-web/@meshtastic/core": ["@jsr/[email protected]", "https://npm.jsr.io/~/11/@jsr/meshtastic__core/2.6.4.tgz", { "dependencies": { "@bufbuild/protobuf": "^2.2.3", "@jsr/meshtastic__protobufs": "^2.6.2", "crc": "^4.3.2", "ste-simple-events": "^3.0.11", "tslog": "^4.9.3" } }, "sha512-1Kz5DK6peFxluHOJR38vFwfgeJzMXTz+3p6TvibjILVhSQC2U1nu8aJbn6w5zhRqS+j79OmtrRvdzL6VNsTkkQ=="],
+
     "meshtastic-web/@meshtastic/transport-http": ["@jsr/[email protected]", "https://npm.jsr.io/~/11/@jsr/meshtastic__transport-http/0.2.1.tgz", { "dependencies": { "@jsr/meshtastic__core": "^2.6.0" } }, "sha512-lmQKr3aIINKvtGROU4HchmSVqbZSbkIHqajowRRC8IAjsnR0zNTyxz210QyY4pFUF9hpcW3GRjwq5h/VO2JuGg=="],
 
     "meshtastic-web/@meshtastic/transport-web-bluetooth": ["@jsr/[email protected]", "https://npm.jsr.io/~/11/@jsr/meshtastic__transport-web-bluetooth/0.1.2.tgz", { "dependencies": { "@jsr/meshtastic__core": "^2.6.4" } }, "sha512-Z+5pv9RXNgY0/crKExOH3pZ6LT0HIXFmnBL7NX5AO2knOFRn+4lmxQEhhmiTTlkUfqyEfAvbjuY5u4mq9TPTdQ=="],
@@ -1756,6 +1759,8 @@
 
     "geojson-polygon-self-intersections/rbush/quickselect": ["[email protected]", "", {}, "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="],
 
+    "meshtastic-web/@meshtastic/core/@bufbuild/protobuf": ["@bufbuild/[email protected]", "", {}, "sha512-6cuonJVNOIL7lTj5zgo/Rc2bKAo4/GvN+rKCrUj7GdEHRzCk8zKOfFwUsL9nAVk5rSIsRmlgcpLzTRysopEeeg=="],
+
     "meshtastic-web/@types/node/undici-types": ["[email protected]", "", {}, "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw=="],
 
     "peek-stream/through2/readable-stream": ["[email protected]", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="],

package.json

@@ -13,21 +13,22 @@
 	},
 	"homepage": "https://meshtastic.org",
 	"workspaces": ["packages/*"],
-		"simple-git-hooks": {
+	"simple-git-hooks": {
 		"pre-commit": "bun run check:fix"
 	},
 	"scripts": {
 		"lint": "biome lint",
 		"lint:fix": "biome lint --write",
-  	"format": "biome format",
+		"format": "biome format",
-  	"format:fix": "biome format . --write",
+		"format:fix": "biome format . --write",
-  	"check": "biome check",
+		"check": "biome check",
-  	"check:fix": "biome check --write",
+		"check:fix": "biome check --write",
 		"build:npm": "deno run -A scripts/build_npm_package.ts"
 	},
 	"dependencies": {
 		"@bufbuild/protobuf": "^2.6.1",
 		"@meshtastic/protobufs": "npm:@jsr/meshtastic__protobufs",
+		"@radix-ui/react-visually-hidden": "^1.2.3",
 		"ste-simple-events": "^3.0.11",
 		"tslog": "^4.9.3"
 	},

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>