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
parent
commit
6f579e22a4
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 6
      packages/web/src/components/UI/Command.tsx

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

Loading…
Cancel
Save