Implement reusable JSON-LD, reduced-motion gating, and keyboard/screen-reader hardening for Lighthouse a11y/SEO

src/components/a11y/LiveRegion.tsx

@@ -0,0 +1,68 @@
+import React, { createContext, memo, useCallback, useContext, useState } from 'react';
+
+interface LiveRegionContextValue {
+  announce: (message: string, politeness?: 'polite' | 'assertive') => void;
+}
+
+const LiveRegionContext = createContext<LiveRegionContextValue | null>(null);
+
+export const LiveRegionProvider: React.FC<{ children: React.ReactNode }> = memo(({ children }) => {
+  const [politeMessage, setPoliteMessage] = useState('');
+  const [assertiveMessage, setAssertiveMessage] = useState('');
+
+  const announce = useCallback((message: string, politeness: 'polite' | 'assertive' = 'polite') => {
+    if (politeness === 'assertive') {
+      setAssertiveMessage('');
+      window.setTimeout(() => setAssertiveMessage(message), 30);
+      return;
+    }
+
+    setPoliteMessage('');
+    window.setTimeout(() => setPoliteMessage(message), 30);
+  }, []);
+
+  return (
+    <LiveRegionContext.Provider value={{ announce }}>
+      {children}
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        style={{
+          position: 'absolute',
+          width: 1,
+          height: 1,
+          margin: -1,
+          padding: 0,
+          overflow: 'hidden',
+          clip: 'rect(0 0 0 0)',
+          border: 0,
+        }}
+      >
+        {politeMessage}
+      </div>
+      <div
+        aria-live="assertive"
+        aria-atomic="true"
+        style={{
+          position: 'absolute',
+          width: 1,
+          height: 1,
+          margin: -1,
+          padding: 0,
+          overflow: 'hidden',
+          clip: 'rect(0 0 0 0)',
+          border: 0,
+        }}
+      >
+        {assertiveMessage}
+      </div>
+    </LiveRegionContext.Provider>
+  );
+});
+
+LiveRegionProvider.displayName = 'LiveRegionProvider';
+
+export const useLiveRegion = (): LiveRegionContextValue['announce'] => {
+  const ctx = useContext(LiveRegionContext);
+  return ctx?.announce ?? (() => undefined);
+};

src/components/builder/components/CommandPalette.tsx

@@ -27,6 +27,7 @@ import {
   Command,
   X,
 } from 'lucide-react';
+import { useFocusTrap } from '@/hooks/useFocusTrap';
 
 export interface PaletteCommand {
   id: string;
@@ -60,6 +61,8 @@ const CommandPalette: React.FC<Props> = memo(({ isOpen, onClose, commands }) =>
   const [recentIds, setRecentIds] = useState<string[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(isOpen, panelRef, onClose);
 
   // FIX: Push state to history to intercept mobile back button
   useEffect(() => {
@@ -235,6 +238,11 @@ const CommandPalette: React.FC<Props> = memo(({ isOpen, onClose, commands }) =>
       `}</style>
 
       <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        tabIndex={-1}
         style={{
           width: '100%',
           maxWidth: 560,

src/components/builder/components/ImportDialogue.tsx

@@ -1,6 +1,7 @@
 // src/components/builder/components/ImportDialog.tsx
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { Download, X } from 'lucide-react';
+import { useFocusTrap } from '@/hooks/useFocusTrap';
 
 interface Props {
   isOpen: boolean;
@@ -16,6 +17,7 @@ const ImportDialog = memo<Props>(({ isOpen, onClose, onLoad, anchorRef }) => {
     top: number;
     left: number;
   } | null>(null);
+  useFocusTrap(isOpen, popoverRef, onClose);
 
   useEffect(() => {
     if (!isOpen) return;
@@ -70,6 +72,10 @@ const ImportDialog = memo<Props>(({ isOpen, onClose, onLoad, anchorRef }) => {
   return (
     <div
       ref={popoverRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Import poster from URL"
+      tabIndex={-1}
       className="z-50"
       style={{
         position: 'fixed',

src/components/builder/components/layout/Inspector.tsx

@@ -54,6 +54,8 @@ const Inspector: React.FC<Props> = memo(({ config, setConfig }) => {
     <SidebarLayout
       header={
         <div
+          role="tablist"
+          aria-label="Inspector tabs"
           className="flex rounded-lg p-0.5 gap-0.5"
           style={{
             background: 'var(--film-char)',
@@ -64,7 +66,10 @@ const Inspector: React.FC<Props> = memo(({ config, setConfig }) => {
             <button
               key={id}
               onClick={() => setActiveTab(id)}
-              aria-pressed={currentTab === id}
+              role="tab"
+              id={`inspector-tab-${id}`}
+              aria-selected={currentTab === id}
+              aria-controls={`inspector-panel-${id}`}
               className={clsx(
                 'flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-md text-[11px] font-medium transition-all duration-150 outline-none select-none syne-font',
                 currentTab !== id && INACTIVE_TAB_HOVER_CLASSES
@@ -82,14 +87,20 @@ const Inspector: React.FC<Props> = memo(({ config, setConfig }) => {
         </div>
       }
     >
-      <PropertyPanel
-        config={config}
-        setConfig={setConfig}
-        selectedIds={selectedIds}
-        selectedLogo={selectedLogo}
-        selectedMinimalElements={selectedMinimalElements}
-        mode={currentTab}
-      />
+      <div
+        role="tabpanel"
+        id={`inspector-panel-${currentTab}`}
+        aria-labelledby={`inspector-tab-${currentTab}`}
+      >
+        <PropertyPanel
+          config={config}
+          setConfig={setConfig}
+          selectedIds={selectedIds}
+          selectedLogo={selectedLogo}
+          selectedMinimalElements={selectedMinimalElements}
+          mode={currentTab}
+        />
+      </div>
     </SidebarLayout>
   );
 });

src/components/builder/components/layout/MobileDock.tsx

@@ -58,7 +58,9 @@ const MobileDock: React.FC<{
             <button
               key={id}
               role="tab"
+              id={`mobile-dock-tab-${id}`}
               aria-selected={isActive}
+              aria-controls="builder-mobile-sheet"
               onClick={() => handleTab(id)}
               className={`min-w-0 basis-0 flex-1 flex flex-col items-center justify-center gap-1 mx-0.5 my-1.5 rounded-xl transition-all duration-200 ${isActive ? 'bg-[rgba(196,124,46,0.1)]' : 'hover:bg-[rgba(196,124,46,0.07)] active:scale-95'}`}
             >

src/components/builder/index.tsx

@@ -44,6 +44,7 @@ import {
 import { usePosterHistory } from './hooks/usePosterHistory';
 import ContextMenu, { type ContextMenuState, type LayerTargetId } from './components/ContextMenu';
 import CommandPalette, { type PaletteCommand } from './components/CommandPalette';
+import { LiveRegionProvider, useLiveRegion } from '@/components/a11y/LiveRegion';
 
 const STORAGE_KEY = 'posterium_config_v2';
 const MAX_QUERY_CONFIG_LENGTH = 12000; // Guard against oversized URL payloads/memory abuse in base64 config loading.
@@ -308,6 +309,7 @@ const StudioLayout: React.FC<{
     viewOptions,
     toggleViewOption,
   } = useEditor();
+  const announce = useLiveRegion();
 
   const [isResetOpen, setIsResetOpen] = useState(false);
   const [isImportOpen, setIsImportOpen] = useState(false);
@@ -359,6 +361,13 @@ const StudioLayout: React.FC<{
   useEffect(() => {
     configRatingsRef.current = config.ratings;
   });
+  const prevSelectionCountRef = useRef(0);
+  useEffect(() => {
+    const selectedCount = selectedIds.size + (selectedLogo ? 1 : 0) + selectedMinimalElements.size;
+    if (selectedCount === prevSelectionCountRef.current) return;
+    prevSelectionCountRef.current = selectedCount;
+    announce(selectedCount > 0 ? `${selectedCount} badges selected` : 'Selection cleared');
+  }, [announce, selectedIds, selectedLogo, selectedMinimalElements]);
 
   const dispatchZoom = useCallback(
     (delta: number) => window.dispatchEvent(new CustomEvent('canvas-zoom', { detail: delta })),
@@ -1504,6 +1513,10 @@ const StudioLayout: React.FC<{
           {/* Mobile Panel (In-flow flex item) */}
           {!isFullscreen && (
             <div
+              id="builder-mobile-sheet"
+              role="dialog"
+              aria-modal="false"
+              aria-label="Builder controls panel"
               className={clsx(
                 'lg:hidden flex flex-col shrink-0 w-full bg-[var(--film-dark)] transition-[height] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] overflow-hidden z-20',
                 mobileSheetMode !== 'hidden'
@@ -1663,19 +1676,21 @@ const BuilderApp: React.FC = () => {
   }, [handleLoadConfig, setConfig]);
 
   return (
-    <EditorProvider>
-      <StudioLayout
-        config={config}
-        setConfig={setConfig}
-        handleReset={handleReset}
-        baseUrl={baseUrl}
-        handleLoadConfig={handleLoadConfig}
-        undo={undo}
-        redo={redo}
-        canUndo={canUndo}
-        canRedo={canRedo}
-      />
-    </EditorProvider>
+    <LiveRegionProvider>
+      <EditorProvider>
+        <StudioLayout
+          config={config}
+          setConfig={setConfig}
+          handleReset={handleReset}
+          baseUrl={baseUrl}
+          handleLoadConfig={handleLoadConfig}
+          undo={undo}
+          redo={redo}
+          canUndo={canUndo}
+          canRedo={canRedo}
+        />
+      </EditorProvider>
+    </LiveRegionProvider>
   );
 };
 

src/components/dashboard/FilmReelSection/DesktopReel.tsx

@@ -4,6 +4,7 @@ import { useScrollReel } from '@/lib/dashboard/hooks/index';
 import { SprocketStrip } from '../primitives';
 import { API } from '@/lib/dashboard/constants';
 import { ProgressiveImage } from '@/components/shared/ProgressiveImage';
+import { useAnimation } from '@/hooks/useAnimation';
 
 const ROW_CONFIGS = [
   { height: 234, count: 24 },
@@ -70,6 +71,7 @@ const CollagePoster = memo<{
 CollagePoster.displayName = 'CollagePoster';
 
 const DesktopReel = memo(() => {
+  const animationsAllowed = useAnimation();
   const containerRef = useRef<HTMLDivElement>(null);
   const trackRef = useRef<HTMLDivElement>(null);
   const progressFillRef = useRef<HTMLDivElement>(null);
@@ -116,7 +118,7 @@ const DesktopReel = memo(() => {
     };
   }, []);
 
-  useScrollReel(containerRef, trackRef, progressFillRef);
+  useScrollReel(containerRef, trackRef, progressFillRef, animationsAllowed);
 
   return (
     <div ref={containerRef} style={{ position: 'relative' }}>
@@ -164,7 +166,7 @@ const DesktopReel = memo(() => {
                 marginTop: 2,
               }}
             >
-              Scroll to advance
+              {animationsAllowed ? 'Scroll to advance' : 'Static preview'}
             </div>
           </div>
           <span
@@ -306,10 +308,11 @@ const DesktopReel = memo(() => {
               ref={progressFillRef}
               style={{
                 height: '100%',
-                width: '0%',
+                width: animationsAllowed ? '0%' : '100%',
                 borderRadius: 99,
                 background: 'linear-gradient(90deg, var(--film-amber), #D4A245)',
                 transition: 'none',
+                animation: animationsAllowed ? 'none' : 'pulse-dot 1.4s ease-in-out infinite',
               }}
             />
           </div>

src/components/dashboard/HeroSection.tsx

@@ -1,6 +1,7 @@
 import { memo, useState, useCallback, useEffect, useRef } from 'react';
 import { ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';
 import { API } from '@/lib/dashboard/constants';
+import { useAnimation } from '@/hooks/useAnimation';
 
 interface HeroPoster {
   id: string;
@@ -101,6 +102,7 @@ const CORNER_STYLE = (c: (typeof CORNERS)[number]): React.CSSProperties => ({
 });
 
 const CyclingPoster = memo(() => {
+  const animationsAllowed = useAnimation();
   const [activeIdx, setActiveIdx] = useState(0);
   const [transitioning, setTransitioning] = useState(false);
   const [loaded, setLoaded] = useState<Record<number, boolean>>({});
@@ -159,6 +161,11 @@ const CyclingPoster = memo(() => {
   const doTransition = useCallback(
     (next: number) => {
       if (next === activeIdxRef.current || transitioningRef.current || !isPosterReady(next)) return;
+      if (!animationsAllowed) {
+        setActiveIdx(next);
+        finishTransition();
+        return;
+      }
       clearTransitionTimers();
       transitioningRef.current = true;
       setTransitioning(true);
@@ -170,7 +177,7 @@ const CyclingPoster = memo(() => {
       }, 50);
       guardTimerRef.current = setTimeout(finishTransition, 1400);
     },
-    [clearTransitionTimers, finishTransition, isPosterReady]
+    [animationsAllowed, clearTransitionTimers, finishTransition, isPosterReady]
   );
 
   const goTo = useCallback(
@@ -181,12 +188,13 @@ const CyclingPoster = memo(() => {
   );
 
   const restartInterval = useCallback(() => {
+    if (!animationsAllowed) return;
     if (intervalRef.current) clearInterval(intervalRef.current);
     intervalRef.current = setInterval(() => {
       if (!isVisibleRef.current || transitioningRef.current) return;
       goTo((activeIdxRef.current + 1) % TOTAL);
     }, 4500);
-  }, [goTo]);
+  }, [animationsAllowed, goTo]);
 
   useEffect(() => {
     if (!loaded[0]) return;
@@ -278,7 +286,7 @@ const CyclingPoster = memo(() => {
                 display: 'block',
                 opacity: i === activeIdx ? 1 : 0,
                 willChange: transitioning ? 'opacity' : 'auto',
-                transition: 'opacity 0.35s ease',
+                transition: animationsAllowed ? 'opacity 0.35s ease' : 'none',
                 pointerEvents: 'none',
               }}
             />
@@ -293,9 +301,9 @@ const CyclingPoster = memo(() => {
               zIndex: 1,
               background: 'linear-gradient(110deg,#151310 25%,#1e1b16 50%,#151310 75%)',
               backgroundSize: '200% 100%',
-              animation: 'shimmer 1.6s linear infinite',
-            }}
-          />
+                animation: animationsAllowed ? 'shimmer 1.6s linear infinite' : 'none',
+              }}
+            />
         )}
         {failed[activeIdx] && (
           <div
@@ -367,9 +375,9 @@ const CyclingPoster = memo(() => {
                 width: i === activeIdx ? 20 : 6,
                 height: 6,
                 borderRadius: 3,
-                transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)',
-                flexShrink: 0,
-              }}
+                 transition: animationsAllowed ? 'all 0.3s cubic-bezier(0.16,1,0.3,1)' : 'none',
+                 flexShrink: 0,
+               }}
             />
           ))}
         </div>