fix: resolve five accessibility problems

src/accessibility.test.ts

@@ -0,0 +1,101 @@
+// @ts-expect-error - node fs in vitest environment
+import fs from "node:fs";
+// @ts-expect-error - node path in vitest environment
+import path from "node:path";
+import { describe, it, expect } from "vitest";
+
+declare const process: { cwd: () => string };
+
+// WCAG relative luminance calculation
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (0 <= h && h < 60) [r, g, b] = [c, x, 0];
+  else if (60 <= h && h < 120) [r, g, b] = [x, c, 0];
+  else if (120 <= h && h < 180) [r, g, b] = [0, c, x];
+  else if (180 <= h && h < 240) [r, g, b] = [0, x, c];
+  else if (240 <= h && h < 300) [r, g, b] = [x, 0, c];
+  else if (300 <= h && h < 360) [r, g, b] = [c, 0, x];
+  return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
+}
+
+function getLuminance(r: number, g: number, b: number): number {
+  const [rs, gs, bs] = [r, g, b].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+
+function getContrastRatio(rgb1: [number, number, number], rgb2: [number, number, number]): number {
+  const lum1 = getLuminance(...rgb1);
+  const lum2 = getLuminance(...rgb2);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+
+describe("Accessibility Standards", () => {
+  const cssPath = path.resolve(process.cwd(), "src/index.css");
+  const indexCss = fs.readFileSync(cssPath, "utf-8");
+
+  it("ensures dark mode borders hit at least 3:1 contrast ratio against background", () => {
+    // Extract dark mode border and background
+    const darkSectionMatch = indexCss.match(/\.dark\s*\{([^}]+)\}/);
+    expect(darkSectionMatch).toBeTruthy();
+    const darkSection = darkSectionMatch![1];
+
+    const borderMatch = darkSection.match(/--border:\s*(\d+)\s+(\d+)%\s+(\d+)%/);
+    const bgMatch = darkSection.match(/--background:\s*(\d+)\s+(\d+)%\s+(\d+)%/);
+
+    expect(borderMatch).toBeTruthy();
+    expect(bgMatch).toBeTruthy();
+
+    const borderHsl: [number, number, number] = [
+      parseInt(borderMatch![1], 10),
+      parseInt(borderMatch![2], 10),
+      parseInt(borderMatch![3], 10),
+    ];
+    const bgHsl: [number, number, number] = [
+      parseInt(bgMatch![1], 10),
+      parseInt(bgMatch![2], 10),
+      parseInt(bgMatch![3], 10),
+    ];
+
+    const borderRgb = hslToRgb(...borderHsl);
+    const bgRgb = hslToRgb(...bgHsl);
+    const contrastRatio = getContrastRatio(borderRgb, bgRgb);
+
+    expect(contrastRatio).toBeGreaterThanOrEqual(3.0);
+  });
+
+  it("includes prefers-reduced-motion block in index.css", () => {
+    expect(indexCss).toContain("@media (prefers-reduced-motion: reduce)");
+    expect(indexCss).toMatch(/animation-duration:\s*0\.01ms/);
+    expect(indexCss).toMatch(/transition-duration:\s*0\.01ms/);
+  });
+
+  it("does not have text below 12px in source files", () => {
+    const sourceFiles = import.meta.glob<string>("./**/*.{tsx,ts,css}", {
+      query: "?raw",
+      import: "default",
+      eager: true,
+    });
+    const sub12pxRegex = /text-\[(?:[0-9]|1[0-1])px\]/;
+
+    const offendingFiles: string[] = [];
+    for (const [filePath, content] of Object.entries(sourceFiles)) {
+      if (!filePath.includes("accessibility.test.ts") && sub12pxRegex.test(content)) {
+        offendingFiles.push(filePath);
+      }
+    }
+
+    expect(offendingFiles).toEqual([]);
+  });
+});

src/components/prompts/PromptCard.test.tsx

@@ -1,11 +1,14 @@
-import { render, screen } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { MemoryRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PromptCard } from "./PromptCard";
 
+let mockUser: { id: string } | null = null;
+let mockProfile: { id: string } | null = null;
+
 vi.mock("@/hooks/useAuth", () => ({
-  useAuth: () => ({ user: null, profile: null, loading: false }),
+  useAuth: () => ({ user: mockUser, profile: mockProfile, loading: false }),
 }));
 
 vi.mock("@/hooks/use-toast", () => ({
@@ -52,6 +55,11 @@ describe("PromptCard", () => {
     tags: ["portrait", "realistic"],
   };
 
+  beforeEach(() => {
+    mockUser = null;
+    mockProfile = null;
+  });
+
   it("renders accuracy rating when provided explicitly with ratingCount > 0", () => {
     renderPromptCard({
       ...baseProps,
@@ -71,4 +79,45 @@ describe("PromptCard", () => {
     expect(ratingElement).toBeInTheDocument();
     expect(ratingElement).toHaveTextContent("Not rated");
   });
+
+  it("renders mobile menu trigger with legible overlay styling without hardcoded text-black", () => {
+    renderPromptCard(baseProps);
+
+    const [mobileTrigger] = screen.getAllByLabelText("More options");
+    expect(mobileTrigger).toBeInTheDocument();
+    expect(mobileTrigger.className).toContain("rounded-full");
+    expect(mobileTrigger.className).toContain("backdrop-blur-sm");
+    expect(mobileTrigger.className).not.toContain("text-black");
+  });
+
+  it("opens delete confirmation in an accessible Radix dialog for prompt owner", async () => {
+    mockUser = { id: "creator-1" };
+    mockProfile = { id: "creator-1" };
+    renderPromptCard(baseProps);
+
+    // Click desktop dropdown trigger (second "More options" button) to view owner actions
+    const [, desktopTrigger] = screen.getAllByLabelText("More options");
+    fireEvent.pointerDown(desktopTrigger, { button: 0, ctrlKey: false });
+    fireEvent.keyDown(desktopTrigger, { key: "ArrowDown" });
+
+    const deleteMenuItem = screen.getByText("Delete");
+    fireEvent.click(deleteMenuItem);
+
+    // Radix dialog should be present with role="dialog"
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toBeInTheDocument();
+    expect(screen.getByText("Delete Prompt?")).toBeInTheDocument();
+    expect(
+      screen.getByText("This will permanently delete this prompt and its image. This cannot be undone.")
+    ).toBeInTheDocument();
+
+    const cancelButton = screen.getByRole("button", { name: "Cancel" });
+    const deleteButton = screen.getByRole("button", { name: "Delete" });
+    expect(cancelButton).toBeInTheDocument();
+    expect(deleteButton).toBeInTheDocument();
+
+    // Clicking cancel should dismiss the dialog
+    fireEvent.click(cancelButton);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
 });

src/components/prompts/PromptCard.tsx

@@ -25,6 +25,15 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "@/components/ui/drawer";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 interface PromptCardProps {
   id: string;
@@ -257,10 +266,10 @@ export function PromptCard({
           <Drawer open={mobileMenuOpen} onOpenChange={setMobileMenuOpen} dismissible={true}>
             <DrawerTrigger asChild>
               <button
-                className="p-1.5"
+                className="p-1.5 rounded-full bg-background/80 hover:bg-background/90 text-foreground backdrop-blur-sm border border-border/50 shadow-sm transition-colors"
                 aria-label="More options"
               >
-                <MoreVertical className="h-5 w-5 text-black drop-shadow-md" />
+                <MoreVertical className="h-4 w-4" />
               </button>
             </DrawerTrigger>
 
@@ -619,7 +628,7 @@ export function PromptCard({
               aria-label="Not yet rated"
             >
               <Star className="h-3 w-3 text-muted-foreground/50" />
-              <span className="text-[11px] sm:text-xs">Not rated</span>
+              <span className="text-xs">Not rated</span>
             </span>
           )}
         </div>
@@ -641,32 +650,32 @@ export function PromptCard({
       />
 
       {/* Delete Confirmation Dialog */}
-      {showDeleteDialog && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowDeleteDialog(false)}>
-          <div className="bg-background p-6 rounded-lg shadow-lg max-w-md mx-4" onClick={(e) => e.stopPropagation()}>
-            <h3 className="text-lg font-semibold mb-2">Delete Prompt?</h3>
-            <p className="text-sm text-muted-foreground mb-4">
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Delete Prompt?</DialogTitle>
+            <DialogDescription>
               This will permanently delete this prompt and its image. This cannot be undone.
-            </p>
-            <div className="flex gap-3 justify-end">
-              <button
-                onClick={() => setShowDeleteDialog(false)}
-                disabled={isDeleting}
-                className="px-4 py-2 text-sm border border-border rounded-sm hover:bg-secondary transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleDelete}
-                disabled={isDeleting}
-                className="px-4 py-2 text-sm bg-destructive text-destructive-foreground rounded-sm hover:bg-destructive/90 transition-colors disabled:opacity-50"
-              >
-                {isDeleting ? "Deleting..." : "Delete"}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteDialog(false)}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Deleting..." : "Delete"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </article>
   );
 }

src/components/prompts/SharePromptDialog.tsx

@@ -199,7 +199,7 @@ export function SharePromptDialog({
               >
                 <Icon className="h-5 w-5" />
               </span>
-              <span className="w-full text-center truncate text-[11px] text-muted-foreground group-hover:text-foreground transition-colors">
+              <span className="w-full text-center truncate text-xs text-muted-foreground group-hover:text-foreground transition-colors">
                 {target.name}
               </span>
             </button>
@@ -214,7 +214,7 @@ export function SharePromptDialog({
             <span className="h-12 w-12 rounded-full bg-secondary border border-border flex items-center justify-center transition-transform duration-200 group-hover:scale-105">
               <MoreHorizontal className="h-5 w-5 text-foreground" />
             </span>
-            <span className="w-full text-center truncate text-[11px] text-muted-foreground group-hover:text-foreground transition-colors">
+            <span className="w-full text-center truncate text-xs text-muted-foreground group-hover:text-foreground transition-colors">
               More
             </span>
           </button>

src/index.css

@@ -114,8 +114,8 @@
     --destructive: 0 50% 45%;
     --destructive-foreground: 38 45% 90%;
 
-    --border: 220 12% 16%;
-    --input: 220 12% 16%;
+    --border: 220 12% 40%;
+    --input: 220 12% 40%;
     --ring: 38 50% 55%;
 
     --sidebar-background: 220 15% 8%;
@@ -124,10 +124,21 @@
     --sidebar-primary-foreground: 220 15% 6%;
     --sidebar-accent: 220 12% 14%;
     --sidebar-accent-foreground: 38 45% 85%;
-    --sidebar-border: 220 12% 16%;
+    --sidebar-border: 220 12% 40%;
     --sidebar-ring: 38 50% 55%;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
   * {
     @apply border-border;
     box-sizing: border-box;

src/pages/PromptDetail.tsx

@@ -403,15 +403,15 @@ export default function PromptDetail() {
                     >
                       <Star className="h-3 sm:h-3.5 w-3 sm:w-3.5 fill-gold text-gold" />
                       <span className="tabular-nums">{accuracyRating.toFixed(1)}</span>
-                      <span className="text-muted-foreground text-[11px]">({ratingCount})</span>
+                      <span className="text-muted-foreground text-xs">({ratingCount})</span>
                     </span>
                   ) : (
                     <span
                       className="flex items-center gap-1 text-muted-foreground"
                       title="Not yet rated"
                     >
                       <Star className="h-3 sm:h-3.5 w-3 sm:w-3.5 text-muted-foreground/50" />
-                      <span className="text-[11px]">Not rated</span>
+                      <span className="text-xs">Not rated</span>
                     </span>
                   )}
                   <span className="text-xs px-2 py-0.5 bg-secondary rounded-sm">
@@ -490,7 +490,7 @@ export default function PromptDetail() {
                       </div>
                       <div>
                         <h4 className="text-xs sm:text-sm font-semibold leading-none text-foreground">Prompt Accuracy Rating</h4>
-                        <p className="text-[11px] text-muted-foreground mt-0.5">
+                        <p className="text-xs text-muted-foreground mt-0.5">
                           How consistently this prompt delivers the expected result
                         </p>
                       </div>
@@ -503,7 +503,7 @@ export default function PromptDetail() {
                             <span>{accuracyRating.toFixed(1)}</span>
                             <span className="text-xs text-muted-foreground font-normal">/ 5.0</span>
                           </div>
-                          <div className="text-[10px] text-muted-foreground">
+                          <div className="text-xs text-muted-foreground">
                             {ratingCount} {ratingCount === 1 ? 'rating' : 'ratings'}
                           </div>
                         </>
@@ -512,7 +512,7 @@ export default function PromptDetail() {
                           <div className="text-xs sm:text-sm font-medium text-muted-foreground flex items-center gap-1 justify-end">
                             <span>Not yet rated</span>
                           </div>
-                          <div className="text-[10px] text-muted-foreground">
+                          <div className="text-xs text-muted-foreground">
                             Be the first to rate
                           </div>
                         </>