Add dark mode and accessibility features for improved user experience

Integrate a dark mode, an accessibility panel with options for dyslexia, high contrast, and text scaling, and enhance keyboard navigation. Update documentation to reflect these changes. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 923ae0e3-a363-4db8-b04a-e8baca2a1330 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: bbd001b6-1b5f-4425-9310-55a9081dabf8 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8af7d2ec-2cc3-4ece-8af3-9f071488d072/923ae0e3-a363-4db8-b04a-e8baca2a1330/vOeFCU4 Replit-Helium-Checkpoint-Created: true
2026-04-04 11:45:46 +00:00
parent 176b49d796
commit 78eb58844e
8 changed files with 365 additions and 51 deletions
@@ -0,0 +1,105 @@
+import React from "react";
+import { Accessibility, Moon, Sun, Type, Contrast, ZoomIn } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useAccessibility } from "@/hooks/use-accessibility";
+
+interface ToggleRowProps {
+  icon: React.ReactNode;
+  label: string;
+  description: string;
+  active: boolean;
+  onToggle: () => void;
+}
+
+function ToggleRow({ icon, label, description, active, onToggle }: ToggleRowProps) {
+  return (
+    <button
+      onClick={onToggle}
+      className={`w-full flex items-center gap-3 p-3 rounded-sm transition-colors text-left
+        ${active
+          ? "bg-primary/15 text-primary ring-1 ring-primary/30"
+          : "hover:bg-muted text-foreground/70 hover:text-foreground"
+        }`}
+      aria-pressed={active}
+    >
+      <span className="flex-shrink-0 text-current">{icon}</span>
+      <div className="min-w-0">
+        <p className="text-sm font-medium leading-none mb-0.5">{label}</p>
+        <p className="text-[11px] text-muted-foreground leading-snug">{description}</p>
+      </div>
+      <span
+        className={`ml-auto flex-shrink-0 w-8 h-4 rounded-full transition-colors relative
+          ${active ? "bg-primary" : "bg-border"}`}
+        aria-hidden="true"
+      >
+        <span className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow transition-transform
+          ${active ? "translate-x-4" : "translate-x-0.5"}`} />
+      </span>
+    </button>
+  );
+}
+
+export function AccessibilityPanel() {
+  const { darkMode, dyslexiaFont, highContrast, largeText,
+    toggleDark, toggleDyslexia, toggleHighContrast, toggleLargeText } = useAccessibility();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+          aria-label="Options d'accessibilité"
+          title="Options d'accessibilité"
+        >
+          <Accessibility className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        sideOffset={8}
+        className="w-72 p-3 space-y-1"
+        aria-label="Panneau d'accessibilité"
+      >
+        <p className="text-[10px] font-mono font-bold uppercase tracking-widest text-muted-foreground px-1 pb-1">
+          Accessibilité
+        </p>
+
+        <ToggleRow
+          icon={darkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+          label="Mode sombre"
+          description="Réduit la fatigue visuelle en faible luminosité"
+          active={darkMode}
+          onToggle={toggleDark}
+        />
+        <ToggleRow
+          icon={<Type className="h-4 w-4" />}
+          label="Police dyslexie"
+          description="Espacement et police optimisés pour la lecture"
+          active={dyslexiaFont}
+          onToggle={toggleDyslexia}
+        />
+        <ToggleRow
+          icon={<Contrast className="h-4 w-4" />}
+          label="Contraste élevé"
+          description="Améliore la lisibilité pour les malvoyants et daltoniens"
+          active={highContrast}
+          onToggle={toggleHighContrast}
+        />
+        <ToggleRow
+          icon={<ZoomIn className="h-4 w-4" />}
+          label="Texte agrandi"
+          description="Augmente la taille de tous les textes (+20 %)"
+          active={largeText}
+          onToggle={toggleLargeText}
+        />
+
+        <p className="text-[10px] text-muted-foreground/60 px-1 pt-1 leading-relaxed">
+          Vos préférences sont enregistrées localement.
+        </p>
+      </PopoverContent>
+    </Popover>
+  );
+}