From 58ca3014d8d450e18d31e6e22fbaf9db37fe432b Mon Sep 17 00:00:00 2001
From: Amit Haridas <amit.wh@gmail.com>
Date: Sat, 6 Jun 2026 20:45:13 +0530
Subject: [PATCH] fix(modals): drop shadcn-style aria-describedby to silence
 Radix warning

Every DialogContent had aria-describedby="X-desc" and every
DialogDescription had a matching id="X-desc". That pattern is the
default shadcn/ui recipe, but it breaks Radix 1.1.x.

Root cause: Radix auto-generates a descriptionId via useId() (e.g. :r0:)
and stores it in the Dialog context. The DescriptionWarning effect does
`document.getElementById(descriptionId)` and warns if the element is
missing. When the description element's id is overridden to
"welcome-desc", the DOM has id="welcome-desc" but the context still has
:r0:, so the lookup misses and the warning fires on every dialog open.

Fix: drop both overrides. Let Radix manage the id and aria-describedby
itself. Screen-reader semantics are unchanged (Radix still wires
Content -> Description via the auto-generated id).

Touched: 12 modal files (11 DialogContent/DialogDescription pairs +
SettingsSheet which uses Sheet). +1 regression test in
WelcomeDialog.test.tsx that spies on console.warn and asserts the
"Missing Description" message is never emitted.

Tests: 306/306 pass (was 305).

Long-term memory: radix-aria-describedby-anti-pattern.md captures the
do-not-reintroduce rule for future agents.
---
 .../components/modals/AboutDialog.tsx         |  4 ++--
 .../modals/AsciiGeneratorDialog.tsx           |  4 ++--
 .../components/modals/ConfirmDialog.tsx       |  4 ++--
 .../components/modals/ExportBatchDialog.tsx   |  4 ++--
 .../components/modals/ExportDocxDialog.tsx    |  4 ++--
 .../components/modals/ExportHtmlDialog.tsx    |  4 ++--
 .../components/modals/ExportPdfDialog.tsx     |  4 ++--
 .../components/modals/FindInFilesDialog.tsx   |  4 ++--
 .../components/modals/SettingsSheet.tsx       |  4 ++--
 .../modals/TableGeneratorDialog.tsx           |  4 ++--
 .../components/modals/WelcomeDialog.tsx       |  4 ++--
 .../components/modals/WordExportDialog.tsx    |  4 ++--
 tests/component/modals/WelcomeDialog.test.tsx | 23 +++++++++++++++++++
 13 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/renderer/components/modals/AboutDialog.tsx b/src/renderer/components/modals/AboutDialog.tsx
index bd7c9ed..f8679bd 100644
--- a/src/renderer/components/modals/AboutDialog.tsx
+++ b/src/renderer/components/modals/AboutDialog.tsx
@@ -17,10 +17,10 @@ export function AboutDialog() {
 
   return (
     <Dialog open={isOpen} onOpenChange={(o) => !o && closeModal()}>
-      <DialogContent aria-describedby="about-desc">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>About MarkdownConverter</DialogTitle>
-          <DialogDescription id="about-desc">
+          <DialogDescription>
             Professional Markdown editor and universal file converter.
           </DialogDescription>
         </DialogHeader>
diff --git a/src/renderer/components/modals/AsciiGeneratorDialog.tsx b/src/renderer/components/modals/AsciiGeneratorDialog.tsx
index 4938ea5..36a7921 100644
--- a/src/renderer/components/modals/AsciiGeneratorDialog.tsx
+++ b/src/renderer/components/modals/AsciiGeneratorDialog.tsx
@@ -33,10 +33,10 @@ export function AsciiGeneratorDialog() {
 
   return (
     <Dialog open onOpenChange={(o) => !o && closeModal()}>
-      <DialogContent aria-describedby="ascii-desc" className="max-w-2xl">
+      <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>ASCII generator</DialogTitle>
-          <DialogDescription id="ascii-desc">Type text, pick a font, see ASCII art</DialogDescription>
+          <DialogDescription>Type text, pick a font, see ASCII art</DialogDescription>
         </DialogHeader>
         <div className="space-y-3">
           <div>
diff --git a/src/renderer/components/modals/ConfirmDialog.tsx b/src/renderer/components/modals/ConfirmDialog.tsx
index f082d5f..4acbbd5 100644
--- a/src/renderer/components/modals/ConfirmDialog.tsx
+++ b/src/renderer/components/modals/ConfirmDialog.tsx
@@ -17,10 +17,10 @@ export function ConfirmDialog(props: ConfirmProps) {
 
   return (
     <Dialog open onOpenChange={(o) => !o && handleCancel()}>
-      <DialogContent aria-describedby="confirm-body">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
-          <DialogDescription id="confirm-body">{body}</DialogDescription>
+          <DialogDescription>{body}</DialogDescription>
         </DialogHeader>
         <DialogFooter>
           <Button variant="ghost" onClick={handleCancel}>
diff --git a/src/renderer/components/modals/ExportBatchDialog.tsx b/src/renderer/components/modals/ExportBatchDialog.tsx
index 4f4af6a..1571d9d 100644
--- a/src/renderer/components/modals/ExportBatchDialog.tsx
+++ b/src/renderer/components/modals/ExportBatchDialog.tsx
@@ -37,10 +37,10 @@ export function ExportBatchDialog({ sourcePaths }: { sourcePaths: string[] }) {
 
   return (
     <Dialog open onOpenChange={(o) => !o && closeModal()}>
-      <DialogContent aria-describedby="batch-desc">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>Batch export</DialogTitle>
-          <DialogDescription id="batch-desc">{sourcePaths.length} files</DialogDescription>
+          <DialogDescription>{sourcePaths.length} files</DialogDescription>
         </DialogHeader>
         <div className="space-y-3 text-sm">
           <div>
diff --git a/src/renderer/components/modals/ExportDocxDialog.tsx b/src/renderer/components/modals/ExportDocxDialog.tsx
index 769075f..8a6e371 100644
--- a/src/renderer/components/modals/ExportDocxDialog.tsx
+++ b/src/renderer/components/modals/ExportDocxDialog.tsx
@@ -41,10 +41,10 @@ export function ExportDocxDialog({ sourcePath }: { sourcePath: string }) {
 
   return (
     <Dialog open onOpenChange={(o) => !o && closeModal()}>
-      <DialogContent aria-describedby="docx-desc">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>Export to DOCX</DialogTitle>
-          <DialogDescription id="docx-desc">{sourcePath}</DialogDescription>
+          <DialogDescription>{sourcePath}</DialogDescription>
         </DialogHeader>
         <div className="space-y-3 text-sm">
           <div>
diff --git a/src/renderer/components/modals/ExportHtmlDialog.tsx b/src/renderer/components/modals/ExportHtmlDialog.tsx
index 9c84aaa..7fa31f7 100644
--- a/src/renderer/components/modals/ExportHtmlDialog.tsx
+++ b/src/renderer/components/modals/ExportHtmlDialog.tsx
@@ -43,10 +43,10 @@ export function ExportHtmlDialog({ sourcePath }: { sourcePath: string }) {
 
   return (
     <Dialog open onOpenChange={(o) => !o && closeModal()}>
-      <DialogContent aria-describedby="html-desc">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>Export to HTML</DialogTitle>
-          <DialogDescription id="html-desc">{sourcePath}</DialogDescription>
+          <DialogDescription>{sourcePath}</DialogDescription>
         </DialogHeader>
         <div className="space-y-3 text-sm">
           <label className="flex items-center gap-2">
diff --git a/src/renderer/components/modals/ExportPdfDialog.tsx b/src/renderer/components/modals/ExportPdfDialog.tsx
index 59572f2..4b7fffd 100644
--- a/src/renderer/components/modals/ExportPdfDialog.tsx
+++ b/src/renderer/components/modals/ExportPdfDialog.tsx
@@ -56,10 +56,10 @@ export function ExportPdfDialog({ sourcePath }: { sourcePath: string }) {
 
   return (
     <Dialog open onOpenChange={(o) => !o && closeModal()}>
-      <DialogContent aria-describedby="pdf-desc">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>Export to PDF</DialogTitle>
-          <DialogDescription id="pdf-desc">{sourcePath}</DialogDescription>
+          <DialogDescription>{sourcePath}</DialogDescription>
         </DialogHeader>
         <div className="space-y-3 text-sm">
           <div>
diff --git a/src/renderer/components/modals/FindInFilesDialog.tsx b/src/renderer/components/modals/FindInFilesDialog.tsx
index 5159d70..2e5c43d 100644
--- a/src/renderer/components/modals/FindInFilesDialog.tsx
+++ b/src/renderer/components/modals/FindInFilesDialog.tsx
@@ -47,10 +47,10 @@ export function FindInFilesDialog() {
 
   return (
     <Dialog open onOpenChange={(o) => !o && closeModal()}>
-      <DialogContent aria-describedby="find-desc" className="max-w-2xl">
+      <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>Find in files</DialogTitle>
-          <DialogDescription id="find-desc">
+          <DialogDescription>
             {rootPath ? `Search in ${rootPath}` : 'No folder open'}
           </DialogDescription>
         </DialogHeader>
diff --git a/src/renderer/components/modals/SettingsSheet.tsx b/src/renderer/components/modals/SettingsSheet.tsx
index 6d2f436..439919d 100644
--- a/src/renderer/components/modals/SettingsSheet.tsx
+++ b/src/renderer/components/modals/SettingsSheet.tsx
@@ -15,10 +15,10 @@ export function SettingsSheet() {
 
   return (
     <Sheet open onOpenChange={(o) => !o && closeModal()}>
-      <SheetContent aria-describedby="settings-desc" side="right" className="w-full sm:max-w-[480px]">
+      <SheetContent side="right" className="w-full sm:max-w-[480px]">
         <SheetHeader>
           <SheetTitle>Settings</SheetTitle>
-          <SheetDescription id="settings-desc">Editor, theme, and export preferences</SheetDescription>
+          <SheetDescription>Editor, theme, and export preferences</SheetDescription>
         </SheetHeader>
         <Tabs defaultValue="editor" className="mt-4">
           <TabsList className="grid w-full grid-cols-5">
diff --git a/src/renderer/components/modals/TableGeneratorDialog.tsx b/src/renderer/components/modals/TableGeneratorDialog.tsx
index c992986..e84d085 100644
--- a/src/renderer/components/modals/TableGeneratorDialog.tsx
+++ b/src/renderer/components/modals/TableGeneratorDialog.tsx
@@ -60,10 +60,10 @@ export function TableGeneratorDialog() {
 
   return (
     <Dialog open onOpenChange={(o) => !o && closeModal()}>
-      <DialogContent aria-describedby="table-desc" className="max-w-2xl">
+      <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>Table generator</DialogTitle>
-          <DialogDescription id="table-desc">Specify rows × columns to generate a markdown table</DialogDescription>
+          <DialogDescription>Specify rows × columns to generate a markdown table</DialogDescription>
         </DialogHeader>
         <div className="space-y-3">
           <div className="flex gap-3">
diff --git a/src/renderer/components/modals/WelcomeDialog.tsx b/src/renderer/components/modals/WelcomeDialog.tsx
index 04329cc..defbcda 100644
--- a/src/renderer/components/modals/WelcomeDialog.tsx
+++ b/src/renderer/components/modals/WelcomeDialog.tsx
@@ -17,10 +17,10 @@ export function WelcomeDialog() {
 
   return (
     <Dialog open onOpenChange={(o) => !o && handleClose()}>
-      <DialogContent aria-describedby="welcome-desc" className="max-w-xl">
+      <DialogContent className="max-w-xl">
         <DialogHeader>
           <DialogTitle>Welcome to MarkdownConverter</DialogTitle>
-          <DialogDescription id="welcome-desc">
+          <DialogDescription>
             A polished editor for Markdown, with PDF, DOCX, and HTML export.
           </DialogDescription>
         </DialogHeader>
diff --git a/src/renderer/components/modals/WordExportDialog.tsx b/src/renderer/components/modals/WordExportDialog.tsx
index 37c4f5f..654f151 100644
--- a/src/renderer/components/modals/WordExportDialog.tsx
+++ b/src/renderer/components/modals/WordExportDialog.tsx
@@ -65,10 +65,10 @@ export function WordExportDialog({ sourcePath }: { sourcePath: string }) {
 
   return (
     <Dialog open onOpenChange={(o) => !o && closeModal()}>
-      <DialogContent aria-describedby="word-desc">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>Export to Word (.docx)</DialogTitle>
-          <DialogDescription id="word-desc">{sourcePath}</DialogDescription>
+          <DialogDescription>{sourcePath}</DialogDescription>
         </DialogHeader>
         <div className="space-y-3 text-sm">
           <div>
diff --git a/tests/component/modals/WelcomeDialog.test.tsx b/tests/component/modals/WelcomeDialog.test.tsx
index 5e84823..f86a894 100644
--- a/tests/component/modals/WelcomeDialog.test.tsx
+++ b/tests/component/modals/WelcomeDialog.test.tsx
@@ -31,4 +31,27 @@ describe('WelcomeDialog', () => {
     await userEvent.click(screen.getByRole('button', { name: /get started/i }));
     expect(useSettingsStore.getState().welcomeDismissed).toBe(true);
   });
+
+  // Regression guard: Radix Dialog emits a console.warn when the Content's
+  // aria-describedby points at an id that isn't in the DOM. The default
+  // shadcn/ui pattern (custom id="X-desc" on DialogDescription) breaks that
+  // link because Radix's internal descriptionId is auto-generated via useId.
+  // The fix is to drop the override and let Radix manage the id itself.
+  it('does not emit the Radix "Missing Description" warning', async () => {
+    const warnings: string[] = [];
+    const spy = vi.spyOn(console, 'warn').mockImplementation((...args) => {
+      warnings.push(args.map(String).join(' '));
+    });
+    try {
+      render(<WelcomeDialog />);
+      // Effects that fire the warning run in a microtask; one tick is enough.
+      await Promise.resolve();
+      const offending = warnings.filter((w) =>
+        /Missing\s+`?Description`?|aria-describedby=\{undefined\}/.test(w),
+      );
+      expect(offending).toEqual([]);
+    } finally {
+      spy.mockRestore();
+    }
+  });
 });