feat(frontend): Sprint Fix 4 — React Router, accessibility, translations

5 issues fixed:

- #24: Add react-router-dom v7, replace useState-based view routing with
URL-based Routes: /, /admin, /reader/:manuscriptId, /editor/:pageId.
F5 reloads to same page, browser back button works, shareable URLs.
- #18: Fix Editor→Back navigation: navigate(-1) returns to Reader (was
always going to Home due to setState({ name: 'home' }))
- #15: RetroCheckbox now uses a real <input type="checkbox"> (sr-only)
with proper htmlFor/id, keyboard accessible (Tab + Space)
- #16: Accessibility improvements across retro components:
- RetroMenuBar: <div> → <nav aria-label="Menu principal">
- RetroIcon: add aria-label={label} to button
- RetroInput: add htmlFor + auto-generated id
- RetroSelect: add htmlFor + auto-generated id
- #35: TranslationPanel shows FR and EN based on profile active_layers
(was hardcoded to French only)

TypeScript compiles clean. 563 backend tests pass, 0 regressions.

https://claude.ai/code/session_01UB4he7RdRPHLvNjky4X8Sw

frontend/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "openseadragon": "^4.1.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.14.0"
   },
   "devDependencies": {
     "@types/openseadragon": "^3.0.10",

frontend/src/App.tsx

@@ -1,49 +1,16 @@
-import { useState } from 'react'
+import { Routes, Route } from 'react-router-dom'
 import Admin from './pages/Admin.tsx'
 import Editor from './pages/Editor.tsx'
 import Home from './pages/Home.tsx'
 import Reader from './pages/Reader.tsx'
 
-type View =
-  | { name: 'home' }
-  | { name: 'reader'; manuscriptId: string; profileId: string }
-  | { name: 'admin' }
-  | { name: 'editor'; pageId: string }
-
 export default function App() {
-  const [view, setView] = useState<View>({ name: 'home' })
-
-  if (view.name === 'reader') {
-    return (
-      <Reader
-        manuscriptId={view.manuscriptId}
-        profileId={view.profileId}
-        onBack={() => setView({ name: 'home' })}
-        onEdit={(pageId) => setView({ name: 'editor', pageId })}
-      />
-    )
-  }
-
-  if (view.name === 'admin') {
-    return <Admin onHome={() => setView({ name: 'home' })} />
-  }
-
-  if (view.name === 'editor') {
-    return (
-      <Editor
-        pageId={view.pageId}
-        onBack={() => setView({ name: 'home' })}
-      />
-    )
-  }
-
   return (
-    <Home
-      onOpenManuscript={(manuscriptId, profileId) =>
-        setView({ name: 'reader', manuscriptId, profileId })
-      }
-      onOpenPage={(pageId) => setView({ name: 'editor', pageId })}
-      onAdmin={() => setView({ name: 'admin' })}
-    />
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/admin" element={<Admin />} />
+      <Route path="/reader/:manuscriptId" element={<Reader />} />
+      <Route path="/editor/:pageId" element={<Editor />} />
+    </Routes>
   )
 }

frontend/src/components/TranslationPanel.tsx

@@ -22,25 +22,50 @@ interface Props {
   translation: Translation | null
   editorial: EditorialInfo
   visible: boolean
+  /** Active layers from profile — controls which languages are shown */
+  activeLayers?: string[]
 }
 
-const TranslationPanel: FC<Props> = ({ translation, editorial, visible }) => {
+const TranslationPanel: FC<Props> = ({ translation, editorial, visible, activeLayers }) => {
   if (!visible) return null
 
+  const showFr = !activeLayers || activeLayers.includes('translation_fr')
+  const showEn = !activeLayers || activeLayers.includes('translation_en')
+
   return (
     <div className="p-2">
       <div className="flex items-center justify-between mb-2">
-        <span className="text-retro-xs font-bold">Traduction (FR)</span>
+        <span className="text-retro-xs font-bold">Traduction</span>
         <RetroBadge variant={STATUS_VARIANTS[editorial.status]}>
           {STATUS_LABELS[editorial.status]}
         </RetroBadge>
       </div>
-      {translation?.fr ? (
-        <p className="text-retro-sm whitespace-pre-wrap font-retro leading-relaxed">
-          {translation.fr}
-        </p>
-      ) : (
-        <p className="text-retro-sm text-retro-darkgray">Traduction non disponible.</p>
+      {showFr && (
+        <div className="mb-2">
+          <div className="text-retro-xs font-bold text-retro-darkgray mb-1">FR</div>
+          {translation?.fr ? (
+            <p className="text-retro-sm whitespace-pre-wrap font-retro leading-relaxed">
+              {translation.fr}
+            </p>
+          ) : (
+            <p className="text-retro-sm text-retro-darkgray">Traduction FR non disponible.</p>
+          )}
+        </div>
+      )}
+      {showEn && (
+        <div>
+          <div className="text-retro-xs font-bold text-retro-darkgray mb-1">EN</div>
+          {translation?.en ? (
+            <p className="text-retro-sm whitespace-pre-wrap font-retro leading-relaxed">
+              {translation.en}
+            </p>
+          ) : (
+            <p className="text-retro-sm text-retro-darkgray">Traduction EN non disponible.</p>
+          )}
+        </div>
+      )}
+      {!showFr && !showEn && (
+        <p className="text-retro-sm text-retro-darkgray">Aucune couche de traduction active.</p>
       )}
     </div>
   )

frontend/src/components/retro/RetroCheckbox.tsx

@@ -1,3 +1,5 @@
+import { useId } from 'react'
+
 interface Props {
   /** Label text next to the checkbox */
   label: string
@@ -18,9 +20,11 @@ export default function RetroCheckbox({
   disabled = false,
   className = '',
 }: Props) {
+  const id = useId()
+
   return (
     <label
-      onClick={() => { if (!disabled) onChange(!checked) }}
+      htmlFor={id}
       className={`
         inline-flex items-center gap-[6px]
         text-retro-sm font-retro
@@ -29,7 +33,16 @@ export default function RetroCheckbox({
         ${className}
       `}
     >
+      <input
+        id={id}
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        disabled={disabled}
+        className="sr-only"
+      />
       <span
+        aria-hidden="true"
         className={`
           inline-flex items-center justify-center
           w-[13px] h-[13px]

frontend/src/components/retro/RetroIcon.tsx

@@ -22,6 +22,7 @@ export default function RetroIcon({
     <button
       type="button"
       onClick={onClick}
+      aria-label={label}
       className={`
         flex flex-col items-center gap-1
         p-2 w-[80px]

frontend/src/components/retro/RetroInput.tsx

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes } from 'react'
+import { useId, type InputHTMLAttributes } from 'react'
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
   /** Optional label rendered above the input */
@@ -6,14 +6,18 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 export default function RetroInput({ label, className = '', ...rest }: Props) {
+  const generatedId = useId()
+  const inputId = rest.id ?? generatedId
+
   return (
     <div className="flex flex-col gap-[2px]">
       {label && (
-        <label className="text-retro-xs font-retro font-medium text-retro-black">
+        <label htmlFor={inputId} className="text-retro-xs font-retro font-medium text-retro-black">
           {label}
         </label>
       )}
       <input
+        id={inputId}
         className={`
           px-2 py-[3px]
           text-retro-sm font-retro

frontend/src/components/retro/RetroMenuBar.tsx

@@ -17,7 +17,8 @@ interface Props {
 
 export default function RetroMenuBar({ items = [], right, className = '' }: Props) {
   return (
-    <div
+    <nav
+      aria-label="Menu principal"
       className={`
         flex items-center
         bg-retro-gray
@@ -51,6 +52,6 @@ export default function RetroMenuBar({ items = [], right, className = '' }: Prop
           {right}
         </div>
       )}
-    </div>
+    </nav>
   )
 }

frontend/src/components/retro/RetroSelect.tsx

@@ -1,4 +1,4 @@
-import type { SelectHTMLAttributes } from 'react'
+import { useId, type SelectHTMLAttributes } from 'react'
 
 interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
   /** Optional label rendered above the select */
@@ -8,14 +8,18 @@ interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
 }
 
 export default function RetroSelect({ label, options, className = '', ...rest }: Props) {
+  const generatedId = useId()
+  const selectId = rest.id ?? generatedId
+
   return (
     <div className="flex flex-col gap-[2px]">
       {label && (
-        <label className="text-retro-xs font-retro font-medium text-retro-black">
+        <label htmlFor={selectId} className="text-retro-xs font-retro font-medium text-retro-black">
           {label}
         </label>
       )}
       <select
+        id={selectId}
         className={`
           px-2 py-[3px]
           text-retro-sm font-retro

frontend/src/main.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App.tsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 )

frontend/src/pages/Admin.tsx

@@ -1,4 +1,5 @@
 import { type FormEvent, useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   fetchCorpora,
   fetchManuscripts,
@@ -36,10 +37,6 @@ import {
 
 type IngestSubTab = 'urls' | 'manifest' | 'files'
 
-interface Props {
-  onHome: () => void
-}
-
 // ── Feedback helpers ───────────────────────────────────────────────────────
 
 function ErrorMsg({ message }: { message: string }) {
@@ -542,7 +539,9 @@ function CorpusDetail({ corpus, onDeleted }: { corpus: Corpus; onDeleted: () =>
 
 // ── Admin (main component) ─────────────────────────────────────────────────
 
-export default function Admin({ onHome }: Props) {
+export default function Admin() {
+  const navigate = useNavigate()
+  const onHome = () => navigate('/')
   const [corpora, setCorpora] = useState<Corpus[]>([])
   const [selectedCorpusId, setSelectedCorpusId] = useState<string | null>(null)
   const [showCreate, setShowCreate] = useState(false)

frontend/src/pages/Editor.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 import {
   applyCorrections,
   getHistory,
@@ -16,11 +17,6 @@ import {
   RetroBadge,
 } from '../components/retro'
 
-interface Props {
-  pageId: string
-  onBack: () => void
-}
-
 type Panel = 'transcription' | 'commentary' | 'regions' | 'history'
 
 const PANEL_LABELS: Record<Panel, string> = {
@@ -30,7 +26,9 @@ const PANEL_LABELS: Record<Panel, string> = {
   history: 'Historique',
 }
 
-export default function Editor({ pageId, onBack }: Props) {
+export default function Editor() {
+  const { pageId = '' } = useParams()
+  const navigate = useNavigate()
   const [master, setMaster] = useState<PageMaster | null>(null)
   const [history, setHistory] = useState<VersionInfo[]>([])
   const [activePanel, setActivePanel] = useState<Panel>('transcription')
@@ -144,7 +142,7 @@ export default function Editor({ pageId, onBack }: Props) {
         <RetroWindow title="Erreur" className="w-80">
           <div className="p-4 text-retro-sm">
             {error}
-            <div className="mt-2"><RetroButton onClick={onBack}>Retour</RetroButton></div>
+            <div className="mt-2"><RetroButton onClick={() => navigate(-1)}>Retour</RetroButton></div>
           </div>
         </RetroWindow>
       </div>
@@ -159,7 +157,7 @@ export default function Editor({ pageId, onBack }: Props) {
       {/* ── Menu bar ───────────────────────────────────────────────── */}
       <RetroMenuBar
         items={[
-          { label: 'IIIF Studio', onClick: onBack },
+          { label: 'IIIF Studio', onClick: () => navigate('/') },
           { label: `Editeur — ${master?.folio_label ?? pageId}` },
         ]}
         right={

frontend/src/pages/Home.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import SearchBar from '../components/SearchBar.tsx'
 import { RetroMenuBar, RetroWindow, RetroIcon } from '../components/retro'
 import {
@@ -16,13 +17,8 @@ const PROFILE_GLYPHS: Record<string, string> = {
   'modern-handwritten':   '\u{270D}',
 }
 
-interface Props {
-  onOpenManuscript: (manuscriptId: string, profileId: string) => void
-  onOpenPage?: (pageId: string) => void
-  onAdmin: () => void
-}
-
-export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
+export default function Home() {
+  const navigate = useNavigate()
   const [corpora, setCorpora] = useState<Corpus[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -43,7 +39,7 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
 
     const cached = manuscripts[corpus.id]
     if (cached) {
-      if (cached.length === 1) onOpenManuscript(cached[0].id, corpus.profile_id)
+      if (cached.length === 1) navigate(`/reader/${cached[0].id}?profile=${corpus.profile_id}`)
       return
     }
 
@@ -52,7 +48,7 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
     try {
       const ms = await fetchManuscripts(corpus.id)
       setManuscripts((prev) => ({ ...prev, [corpus.id]: ms }))
-      if (ms.length === 1) onOpenManuscript(ms[0].id, corpus.profile_id)
+      if (ms.length === 1) navigate(`/reader/${ms[0].id}?profile=${corpus.profile_id}`)
     } catch (e: unknown) {
       setExpandError(e instanceof Error ? e.message : 'Erreur de chargement')
     } finally {
@@ -95,10 +91,10 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
       <RetroMenuBar
         items={[
           { label: 'IIIF Studio' },
-          { label: 'Administration', onClick: onAdmin },
+          { label: 'Administration', onClick: () => navigate('/admin') },
         ]}
         right={
-          <SearchBar onSelectResult={onOpenPage ? (r) => onOpenPage(r.page_id) : undefined} />
+          <SearchBar onSelectResult={(r) => navigate(`/editor/${r.page_id}`)} />
         }
       />
 
@@ -176,7 +172,7 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
                   <button
                     type="button"
                     key={ms.id}
-                    onClick={() => onOpenManuscript(ms.id, selectedCorpus.profile_id)}
+                    onClick={() => navigate(`/reader/${ms.id}?profile=${selectedCorpus.profile_id}`)}
                     className="
                       w-full text-left px-3 py-[6px]
                       text-retro-sm font-retro

frontend/src/pages/Reader.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import type OpenSeadragon from 'openseadragon'
 import {
   fetchPages,
@@ -17,14 +18,11 @@ import TranslationPanel from '../components/TranslationPanel.tsx'
 import CommentaryPanel from '../components/CommentaryPanel.tsx'
 import { RetroMenuBar, RetroWindow, RetroButton, RetroBadge } from '../components/retro'
 
-interface Props {
-  manuscriptId: string
-  profileId: string
-  onBack: () => void
-  onEdit?: (pageId: string) => void
-}
-
-export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Props) {
+export default function Reader() {
+  const { manuscriptId = '' } = useParams()
+  const [searchParams] = useSearchParams()
+  const profileId = searchParams.get('profile') ?? ''
+  const navigate = useNavigate()
   const [pages, setPages] = useState<Page[]>([])
   const [currentIndex, setCurrentIndex] = useState(0)
   const [master, setMaster] = useState<PageMaster | null>(null)
@@ -108,7 +106,7 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
           <div className="p-4 text-retro-sm">
             Aucune page dans ce manuscrit.
             <div className="mt-2">
-              <RetroButton onClick={onBack}>Retour</RetroButton>
+              <RetroButton onClick={() => navigate('/')}>Retour</RetroButton>
             </div>
           </div>
         </RetroWindow>
@@ -125,7 +123,7 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
       {/* ── Menu bar ───────────────────────────────────────────────── */}
       <RetroMenuBar
         items={[
-          { label: 'IIIF Studio', onClick: onBack },
+          { label: 'IIIF Studio', onClick: () => navigate('/') },
           { label: profile?.label ?? profileId },
         ]}
         right={
@@ -147,11 +145,9 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
             >
               Next
             </RetroButton>
-            {onEdit && (
-              <RetroButton size="sm" onClick={() => onEdit(currentPage.id)}>
-                Editer
-              </RetroButton>
-            )}
+            <RetroButton size="sm" onClick={() => navigate(`/editor/${currentPage.id}`)}>
+              Editer
+            </RetroButton>
           </div>
         }
       />
@@ -246,7 +242,8 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
                 <TranslationPanel
                   translation={master.translation}
                   editorial={master.editorial}
-                  visible={visibleLayers.has('translation_fr')}
+                  visible={visibleLayers.has('translation_fr') || visibleLayers.has('translation_en')}
+                  activeLayers={profile?.active_layers}
                 />
                 <CommentaryPanel
                   commentary={master.commentary}