feat: add dark mode and audit viewer-frontend accessibility

Add next-themes light/dark/system theming with an accessible toggle in every header, and close out an a11y pass across the viewer app: skip-to-content link, main landmarks and heading hierarchy on every route, focus-trapped dialog semantics for the photo viewer modals, aria-label/live-region coverage for dynamic messages and icon buttons, and dark: variants for previously light-only colors.
2026-07-14 16:24:51 -04:00
parent e54c60912c
commit c011c8078e
32 changed files with 371 additions and 146 deletions
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { SessionProviderWrapper } from "@/components/SessionProviderWrapper";
+import { ThemeProviderWrapper } from "@/components/ThemeProviderWrapper";
 import "./globals.css";

 const inter = Inter({
@@ -19,11 +20,19 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.variable} font-sans antialiased`}>
-        <SessionProviderWrapper>
-          {children}
-        </SessionProviderWrapper>
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[200] focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          Skip to main content
+        </a>
+        <ThemeProviderWrapper>
+          <SessionProviderWrapper>
+            {children}
+          </SessionProviderWrapper>
+        </ThemeProviderWrapper>
      </body>
    </html>
  );