mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-03 02:11:07 +05:30
amitwh
58ca3014d8
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.
77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { useAppStore } from '@/stores/app-store';
|
|
import { toast } from '@/lib/toast';
|
|
import { figletText, FIGLET_FONTS, type FigletFont } from '@/lib/figlet';
|
|
|
|
export function AsciiGeneratorDialog() {
|
|
const closeModal = useAppStore((s) => s.closeModal);
|
|
const [text, setText] = useState('Hello');
|
|
const [font, setFont] = useState<FigletFont>('Standard');
|
|
const [output, setOutput] = useState('');
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
figletText(text || ' ', font)
|
|
.then((result) => { if (!cancelled) setOutput(result); })
|
|
.catch(() => { if (!cancelled) setOutput('(render error)'); });
|
|
return () => { cancelled = true; };
|
|
}, [text, font]);
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(output);
|
|
toast.success('Copied to clipboard');
|
|
} catch {
|
|
toast.error('Failed to copy');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open onOpenChange={(o) => !o && closeModal()}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>ASCII generator</DialogTitle>
|
|
<DialogDescription>Type text, pick a font, see ASCII art</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label htmlFor="ascii-text">Text</Label>
|
|
<Textarea
|
|
id="ascii-text"
|
|
aria-label="Text"
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="ascii-font">Font</Label>
|
|
<Select value={font} onValueChange={(v) => setFont(v as FigletFont)}>
|
|
<SelectTrigger id="ascii-font" aria-label="Font"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
{FIGLET_FONTS.map((f) => (
|
|
<SelectItem key={f} value={f}>{f}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label>Output</Label>
|
|
<pre className="overflow-auto rounded border border-border bg-card/30 p-3 text-xs" data-testid="ascii-output">
|
|
{output}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={closeModal}>Close</Button>
|
|
<Button onClick={handleCopy}>Copy</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
} |