feat(a11y): add DialogContext auto-labelling with aria-labelledby/describedby

Introduce DialogContext using React.useId() that auto-wires aria-labelledby
and aria-describedby on DialogContent, with matching ids on DialogTitle and
DialogDescription. Adds role="dialog" and aria-modal="true". All 12+ existing
consumers get proper ARIA labels without any call-site changes.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/ui/dialog.tsx

@@ -3,6 +3,23 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 
+/* ------------------------------------------------------------------ */
+/*  DialogContext — auto-wires aria-labelledby / aria-describedby     */
+/* ------------------------------------------------------------------ */
+
+interface DialogContextValue {
+  titleId: string;
+  descriptionId: string;
+}
+
+const DialogContext = React.createContext<DialogContextValue | null>(null);
+
+function useDialogContext() {
+  return React.useContext(DialogContext);
+}
+
+/* ------------------------------------------------------------------ */
+
 interface DialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -10,6 +27,10 @@ interface DialogProps {
 }
 
 function Dialog({ open, onOpenChange, children }: DialogProps) {
+  const reactId = React.useId();
+  const titleId = `${reactId}-dialog-title`;
+  const descriptionId = `${reactId}-dialog-desc`;
+
   React.useEffect(() => {
     if (open) {
       document.body.style.overflow = 'hidden';
@@ -24,34 +45,43 @@ function Dialog({ open, onOpenChange, children }: DialogProps) {
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50">
-      <div
-        className="fixed inset-0 bg-black/80 animate-in fade-in-0"
-        onClick={() => onOpenChange(false)}
-      />
-      <div className="fixed inset-0 flex items-center justify-center p-4">
-        {children}
+    <DialogContext.Provider value={{ titleId, descriptionId }}>
+      <div className="fixed inset-0 z-50">
+        <div
+          className="fixed inset-0 bg-black/80 animate-in fade-in-0"
+          onClick={() => onOpenChange(false)}
+        />
+        <div className="fixed inset-0 flex items-center justify-center p-4">
+          {children}
+        </div>
       </div>
-    </div>
+    </DialogContext.Provider>
   );
 }
 
 const DialogContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'relative z-50 w-full max-w-lg rounded-lg border bg-background p-6 shadow-lg animate-in fade-in-0 zoom-in-95',
-      className,
-    )}
-    onClick={(e) => e.stopPropagation()}
-    {...props}
-  >
-    {children}
-  </div>
-));
+>(({ className, children, ...props }, ref) => {
+  const ctx = useDialogContext();
+  return (
+    <div
+      ref={ref}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={ctx?.titleId}
+      aria-describedby={ctx?.descriptionId}
+      className={cn(
+        'relative z-50 w-full max-w-lg rounded-lg border bg-background p-6 shadow-lg animate-in fade-in-0 zoom-in-95',
+        className,
+      )}
+      onClick={(e) => e.stopPropagation()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
 DialogContent.displayName = 'DialogContent';
 
 function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
@@ -60,15 +90,25 @@ function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
   );
 }
 
-function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+function DialogTitle({ className, id, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  const ctx = useDialogContext();
   return (
-    <h2 className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+    <h2
+      id={id ?? ctx?.titleId}
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
   );
 }
 
-function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+function DialogDescription({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  const ctx = useDialogContext();
   return (
-    <p className={cn('text-sm text-muted-foreground', className)} {...props} />
+    <p
+      id={id ?? ctx?.descriptionId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
   );
 }