add a11y keys

client/ui/frontend/src/components/dialog/ConfirmDialog.tsx

@@ -4,14 +4,22 @@ import { isMacOS } from "@/lib/platform.ts";
 
 type ConfirmDialogProps = {
     children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
 };
 
 export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(function ConfirmDialog(
-    { children },
+    { children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy },
     ref,
 ) {
     return (
-        <div className={"wails-draggable select-none flex flex-col items-center"}>
+        <div
+            role="dialog"
+            aria-modal="true"
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            className={"wails-draggable select-none flex flex-col items-center"}
+        >
             <div
                 ref={ref}
                 className={cn(

client/ui/frontend/src/components/dialog/ConfirmModal.tsx

@@ -32,6 +32,9 @@ export const ConfirmModal = ({
     const { t } = useTranslation();
     const resolvedCancel = cancelLabel ?? t("common.cancel");
 
+    const srTitle = typeof title === "string" ? title : undefined;
+    const srDescription = typeof description === "string" ? description : undefined;
+
     return (
         <Dialog.Root
             open={open}
@@ -43,6 +46,8 @@ export const ConfirmModal = ({
                 maxWidthClass="max-w-sm"
                 showClose={false}
                 className="py-5"
+                srTitle={srTitle}
+                srDescription={srDescription}
                 onOpenAutoFocus={(e) => e.preventDefault()}
             >
                 <div className="flex flex-col gap-5 px-5">
@@ -54,7 +59,12 @@ export const ConfirmModal = ({
                     </div>
 
                     <DialogActions className={"flex-row justify-end gap-2.5"}>
-                        <Button variant={"secondary"} size={"xs2"} disabled={busy} onClick={onCancel}>
+                        <Button
+                            variant={"secondary"}
+                            size={"xs2"}
+                            disabled={busy}
+                            onClick={onCancel}
+                        >
                             {resolvedCancel}
                         </Button>
                         <Button

client/ui/frontend/src/components/dialog/Dialog.tsx

@@ -20,7 +20,8 @@ const Overlay = forwardRef<ElementRef<typeof DialogPrimitive.Overlay>, OverlayPr
                     "fixed inset-0 z-50 grid items-center justify-items-center overflow-y-auto px-10 py-16",
                     "bg-black/60",
                     "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-                    exitAnimation && "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+                    exitAnimation &&
+                        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
                     "duration-150 ease-out",
                     className,
                 )}
@@ -34,6 +35,8 @@ type ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     showClose?: boolean;
     maxWidthClass?: string;
     exitAnimation?: boolean;
+    srTitle?: string;
+    srDescription?: string;
 };
 
 export const Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, ContentProps>(
@@ -44,6 +47,8 @@ export const Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, Co
             showClose = true,
             maxWidthClass = "max-w-md",
             exitAnimation = false,
+            srTitle,
+            srDescription,
             ...props
         },
         ref,
@@ -70,8 +75,17 @@ export const Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, Co
                         {...props}
                     >
                         <VisuallyHidden asChild>
-                            <DialogPrimitive.Title>Dialog</DialogPrimitive.Title>
+                            <DialogPrimitive.Title>
+                                {srTitle ?? t("common.netbird")}
+                            </DialogPrimitive.Title>
                         </VisuallyHidden>
+                        {srDescription && (
+                            <VisuallyHidden asChild>
+                                <DialogPrimitive.Description>
+                                    {srDescription}
+                                </DialogPrimitive.Description>
+                            </VisuallyHidden>
+                        )}
                         {children}
                         {showClose && (
                             <DialogPrimitive.Close
@@ -82,7 +96,7 @@ export const Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, Co
                                 )}
                                 aria-label={t("common.close")}
                             >
-                                <X className="h-4 w-4" />
+                                <X className="h-4 w-4" aria-hidden="true" />
                             </DialogPrimitive.Close>
                         )}
                     </DialogPrimitive.Content>

client/ui/frontend/src/components/dialog/DialogHeading.tsx

@@ -13,10 +13,17 @@ type DialogHeadingProps = {
     children: ReactNode;
     className?: string;
     align?: DialogAlign;
+    id?: string;
 };
 
-export const DialogHeading = ({ children, className, align = "center" }: DialogHeadingProps) => (
-    <p
+export const DialogHeading = ({
+    children,
+    className,
+    align = "center",
+    id,
+}: DialogHeadingProps) => (
+    <h2
+        id={id}
         className={cn(
             "w-full text-base font-semibold text-nb-gray-50 select-none",
             alignClass[align],
@@ -24,5 +31,5 @@ export const DialogHeading = ({ children, className, align = "center" }: DialogH
         )}
     >
         {children}
-    </p>
+    </h2>
 );