mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2025-12-24 00:00:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add visually hidden DialogTitle to the CommandDialog (#742)

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.

* add visually hidden component as explicit dependency
This commit is contained in:
Vasilj Milošević
2025-07-28 22:44:25 +02:00
committed by GitHub
parent 09f7f64099
commit a9f6afffc2
4 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

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

7
bun.lock
View File

@@ -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/meshtastic__core@2.6.4",
"@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": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
"meshtastic-web/@meshtastic/core": ["@jsr/meshtastic__core@2.6.4", "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/meshtastic__transport-http@0.2.1", "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/meshtastic__transport-web-bluetooth@0.1.2", "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": ["quickselect@1.1.1", "", {}, "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="],
"meshtastic-web/@meshtastic/core/@bufbuild/protobuf": ["@bufbuild/protobuf@2.6.0", "", {}, "sha512-6cuonJVNOIL7lTj5zgo/Rc2bKAo4/GvN+rKCrUj7GdEHRzCk8zKOfFwUsL9nAVk5rSIsRmlgcpLzTRysopEeeg=="],
"meshtastic-web/@types/node/undici-types": ["undici-types@7.8.0", "", {}, "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw=="],
"peek-stream/through2/readable-stream": ["readable-stream@2.3.8", "", { "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=="],

11
package.json
View File

@@ -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:fix": "biome format . --write",
"check": "biome check",
"check:fix": "biome check --write",
"format": "biome format",
"format:fix": "biome format . --write",
"check": "biome check",
"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"
},

6
packages/web/src/components/UI/Command.tsx
View File

@@ -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>