fix(web): comprehensive design review — 9 issues fixed

Critical:
- BackToTop: was listening on window, not scrollable main element
  (button never appeared). Now attaches to #main-content with $effect cleanup.

Tailwind v4 consistency:
- Prose line-height: fixed from ignored CSS variable to direct property
- Nested list borders: use @theme tokens instead of hardcoded hex
- Code/pre backgrounds: replaced oklch() with standard rgb() for browser compat
- Removed unused .badge-metadata and redundant footer element selector
- Added --color-teal-bright to @theme

Accessibility:
- PrecedentDrawer: added aria-expanded, aria-controls, proper IDs
- SearchBar: results listbox always in DOM (valid aria-controls ref),
  Escape key dismissal, truncated titles, line-clamped excerpts
- DiffViewer: commit buttons get aria-pressed, fixed dark mode contrast
- Footer links: aria-label announces "opens in new tab"
- Skip-to-content: added focus ring styles

Bug fixes:
- github.ts: removed silent error suppression in getFileHistory
- content.config.ts: generated_at now optional (some files omit it)
- Homepage stats: corrected 53 → 54 titles

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: williamzujkowski

apps/web/src/components/BackToTop.svelte

@@ -1,14 +1,27 @@
 <script lang="ts">
   let visible = $state(false);
 
-  if (typeof window !== 'undefined') {
-    window.addEventListener('scroll', () => {
-      visible = window.scrollY > 400;
-    }, { passive: true });
-  }
+  $effect(() => {
+    // The page uses overflow-y-auto on <main>, not on window.
+    // We must attach to the main element to detect scroll position.
+    const main = document.getElementById('main-content');
+    if (!main) return;
+
+    function onScroll(): void {
+      visible = main!.scrollTop > 400;
+    }
+
+    main.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      main.removeEventListener('scroll', onScroll);
+    };
+  });
 
   function scrollToTop(): void {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+    const main = document.getElementById('main-content');
+    if (main) {
+      main.scrollTo({ top: 0, behavior: 'smooth' });
+    }
   }
 </script>
 

apps/web/src/components/DiffViewer.svelte

@@ -93,9 +93,10 @@
         <li>
           <button
             class="w-full rounded px-2 py-1 text-left text-xs transition-colors {selected.includes(commit.sha)
-              ? 'bg-teal/10 dark:bg-navy'
-              : 'hover:bg-gray-100 dark:hover:bg-gray-800'}"
+              ? 'bg-teal/10 text-navy ring-1 ring-teal/30 dark:bg-teal/20 dark:text-gray-100'
+              : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'}"
             onclick={() => toggleCommit(commit.sha)}
+            aria-pressed={selected.includes(commit.sha)}
           >
             <code class="font-mono text-teal dark:text-teal">{commit.sha.slice(0, 7)}</code>
             <span class="ml-2 text-gray-700 dark:text-gray-300">{commit.message}</span>

apps/web/src/components/PrecedentDrawer.svelte

@@ -7,10 +7,11 @@
   }
 
   const COURT_ORDER: CaseAnnotation['court'][] = ['SCOTUS', 'Appellate', 'District'];
+  // Use custom theme colors (--color-amber, --color-teal, --color-slate) for consistency
   const COURT_COLORS: Record<CaseAnnotation['court'], string> = {
-    SCOTUS: 'text-amber-600 dark:text-amber-400',
-    Appellate: 'text-teal-600 dark:text-teal-400',
-    District: 'text-slate-600 dark:text-slate-400',
+    SCOTUS: 'text-amber dark:text-amber',
+    Appellate: 'text-teal dark:text-teal-bright',
+    District: 'text-slate dark:text-gray-400',
   };
 
   let { sectionId, annotations }: Props = $props();
@@ -38,16 +39,20 @@
   <!-- Toggle button -->
   <button
     onclick={() => (open = !open)}
-    class="fixed right-0 top-1/2 z-40 -translate-y-1/2 rounded-l-md bg-teal-600 px-2 py-3 text-xs font-semibold text-white shadow-lg hover:bg-teal-700"
+    class="fixed right-0 top-1/2 z-40 -translate-y-1/2 rounded-l-md bg-teal px-2 py-3 text-xs font-semibold text-white shadow-lg hover:opacity-90 transition-opacity"
     aria-label={open ? 'Close precedent drawer' : 'Open precedent drawer'}
+    aria-expanded={open}
+    aria-controls="precedent-drawer-panel"
   >
     {open ? '›' : '‹'} Cases ({annotations.length})
   </button>
 
   <!-- Drawer panel -->
   {#if open}
     <aside
-      class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto border-l border-gray-200 bg-white p-5 shadow-xl sm:w-[400px] dark:border-gray-700 dark:bg-[#0a1628]"
+      id="precedent-drawer-panel"
+      class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto border-l border-gray-200 bg-white p-5 shadow-xl sm:w-[400px] dark:border-gray-700 dark:bg-gray-950"
+      aria-label="Precedent annotations"
     >
       <div class="mb-4 flex items-center justify-between">
         <h2 class="text-lg font-bold text-slate-900 dark:text-gray-100">
@@ -76,7 +81,7 @@
                 href={c.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-sm font-medium text-teal-700 underline-offset-2 hover:underline dark:text-teal-400"
+                class="text-sm font-medium text-teal underline-offset-2 hover:underline dark:text-teal-bright"
               >{c.caseName}</a>
               <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                 {c.citation} · {c.court} · {c.date}
@@ -89,7 +94,7 @@
               {#if c.holdingSummary.length > 120}
                 <button
                   onclick={() => toggleHolding(globalIdx)}
-                  class="mt-1 text-xs text-teal-600 hover:underline dark:text-teal-400"
+                  class="mt-1 text-xs text-teal hover:underline dark:text-teal-bright"
                 >{expandedHoldings.has(globalIdx) ? 'show less' : 'show more'}</button>
               {/if}
             </li>

apps/web/src/components/SearchBar.svelte

@@ -99,6 +99,12 @@
   }
 
   function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      showResults = false;
+      activeIndex = -1;
+      return;
+    }
+
     if (!showResults || results.length === 0) return;
 
     if (event.key === 'ArrowDown') {
@@ -109,9 +115,9 @@
       activeIndex = activeIndex > 0 ? activeIndex - 1 : results.length - 1;
     } else if (event.key === 'Enter' && activeIndex >= 0) {
       event.preventDefault();
-      const selected = results[activeIndex];
-      if (selected) {
-        window.location.href = selected.url;
+      const selectedResult = results[activeIndex];
+      if (selectedResult) {
+        window.location.href = selectedResult.url;
       }
     }
   }
@@ -142,32 +148,41 @@
     />
   </div>
 
-  {#if showResults}
-    <div class="absolute left-0 top-full z-50 mt-1 max-h-80 w-72 overflow-y-auto rounded border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
+  <!-- Always render the listbox container so aria-controls is always valid when expanded -->
+  <ul
+    id="search-results"
+    role="listbox"
+    aria-label="Search results"
+    class="absolute left-0 top-full z-50 mt-1 w-72 overflow-y-auto rounded border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 {showResults ? 'max-h-80' : 'hidden'}"
+  >
+    {#if showResults}
       {#if loading}
-        <div class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">Searching...</div>
+        <li role="option" aria-selected="false" class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">Searching...</li>
       {:else if results.length === 0}
-        <div class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">No results found.</div>
+        <li role="option" aria-selected="false" class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">No results found.</li>
       {:else}
-        <ul id="search-results" class="divide-y divide-gray-100 dark:divide-gray-800" role="listbox">
-          {#each results as result, i}
-            <li role="option" id="result-{i}" aria-selected={i === activeIndex}>
-              <a
-                href={result.url}
-                class="block px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 {i === activeIndex ? 'bg-gray-100 dark:bg-gray-800' : ''}"
-              >
-                <div class="text-xs font-medium text-gray-900 dark:text-gray-100">
-                  {result.meta.title ?? 'Untitled'}
-                </div>
-                <div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
-                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                  {@html result.excerpt}
-                </div>
-              </a>
-            </li>
-          {/each}
-        </ul>
+        {#each results as result, i}
+          <li
+            role="option"
+            id="result-{i}"
+            aria-selected={i === activeIndex}
+            class="divide-y divide-gray-100 dark:divide-gray-800"
+          >
+            <a
+              href={result.url}
+              class="block px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 {i === activeIndex ? 'bg-gray-100 dark:bg-gray-800' : ''}"
+            >
+              <div class="truncate text-xs font-medium text-gray-900 dark:text-gray-100">
+                {result.meta.title ?? 'Untitled'}
+              </div>
+              <div class="mt-0.5 line-clamp-2 text-xs text-gray-500 dark:text-gray-400">
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                {@html result.excerpt}
+              </div>
+            </a>
+          </li>
+        {/each}
       {/if}
-    </div>
-  {/if}
+    {/if}
+  </ul>
 </div>

apps/web/src/content.config.ts

@@ -10,7 +10,7 @@ const statutes = defineCollection({
     chapter: z.number(),
     current_through: z.string(),
     classification: z.string(),
-    generated_at: z.string(),
+    generated_at: z.string().optional(),
   }),
 });
 

apps/web/src/layouts/BaseLayout.astro

@@ -50,7 +50,7 @@ const titleEntries = Object.entries(TITLE_NAMES)
     </script>
   </head>
   <body class="h-full bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
-    <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded focus:bg-navy focus:px-4 focus:py-2 focus:text-white">
+    <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded focus:bg-navy focus:px-4 focus:py-2 focus:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-navy">
       Skip to content
     </a>
     <div class="flex h-full flex-col lg:flex-row">
@@ -124,17 +124,17 @@ const titleEntries = Object.entries(TITLE_NAMES)
               <h2 class="mb-2 text-xs font-bold uppercase tracking-wide text-gray-700 dark:text-gray-300">Resources</h2>
               <ul class="space-y-1 text-xs">
                 <li>
-                  <a href="https://uscode.house.gov/" class="underline hover:text-teal" rel="noopener noreferrer">
+                  <a href="https://uscode.house.gov/" class="underline hover:text-teal" rel="noopener noreferrer" target="_blank" aria-label="Official U.S. Code (OLRC), opens in new tab">
                     Official U.S. Code (OLRC)
                   </a>
                 </li>
                 <li>
-                  <a href="https://github.com/civic-source/us-code" class="underline hover:text-teal" rel="noopener noreferrer">
+                  <a href="https://github.com/civic-source/us-code" class="underline hover:text-teal" rel="noopener noreferrer" target="_blank" aria-label="Source Data on GitHub, opens in new tab">
                     Source Data (GitHub)
                   </a>
                 </li>
                 <li>
-                  <a href="https://github.com/civic-source/us-code-tracker" class="underline hover:text-teal" rel="noopener noreferrer">
+                  <a href="https://github.com/civic-source/us-code-tracker" class="underline hover:text-teal" rel="noopener noreferrer" target="_blank" aria-label="Pipeline Code on GitHub, opens in new tab">
                     Pipeline Code (GitHub)
                   </a>
                 </li>

apps/web/src/lib/github.ts

@@ -31,19 +31,15 @@ export async function getFileHistory(
   path: string,
   token?: string,
 ): Promise<CommitInfo[]> {
-  try {
-    const octokit = createClient(token);
-    const response = await octokit.repos.listCommits({ owner, repo, path, per_page: 50 });
+  const octokit = createClient(token);
+  const response = await octokit.repos.listCommits({ owner, repo, path, per_page: 50 });
 
-    return response.data.map((c) => ({
-      sha: c.sha,
-      message: c.commit.message.split("\n")[0] ?? "",
-      date: c.commit.author?.date ?? "",
-      author: c.commit.author?.name ?? "unknown",
-    }));
-  } catch {
-    return [];
-  }
+  return response.data.map((c) => ({
+    sha: c.sha,
+    message: c.commit.message.split("\n")[0] ?? "",
+    date: c.commit.author?.date ?? "",
+    author: c.commit.author?.name ?? "unknown",
+  }));
 }
 
 export async function getFileDiff(
@@ -78,10 +74,10 @@ export async function getFileDiff(
 }
 
 export function isRateLimited(error: unknown): boolean {
-  return (
-    typeof error === "object" &&
-    error !== null &&
-    "status" in error &&
-    (error as { status: number }).status === 403
-  );
+  if (typeof error !== "object" || error === null || !("status" in error)) {
+    return false;
+  }
+  const status = (error as { status: number }).status;
+  // GitHub returns 403 for unauthenticated rate limits and 429 for secondary rate limits
+  return status === 403 || status === 429;
 }

apps/web/src/pages/index.astro

@@ -17,7 +17,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   <!-- Quick stats -->
   <div class="not-prose my-6 flex flex-wrap gap-4">
     <div class="rounded-lg border border-teal/30 bg-teal/5 px-5 py-3 text-center font-sans">
-      <p class="text-2xl font-bold text-teal">53</p>
+      <p class="text-2xl font-bold text-teal">54</p>
       <p class="mt-0.5 text-xs text-slate dark:text-gray-400">Titles</p>
     </div>
     <div class="rounded-lg border border-teal/30 bg-teal/5 px-5 py-3 text-center font-sans">
@@ -46,7 +46,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     </li>
     <li class="flex items-start gap-2">
       <span class="mt-0.5 text-teal" aria-hidden="true">&#x1F50D;</span>
-      <span>Provides a browsable interface for exploring all 54 titles of the US Code.</span>
+      <span>Provides a browsable interface for exploring all titles of the US Code.</span>
     </li>
   </ul>
 

apps/web/src/pages/statute/[...slug].astro

@@ -102,6 +102,7 @@ const isReserved = entry.data.title.includes('Reserved');
         target="_blank"
         rel="noopener noreferrer"
         class="rounded bg-teal/10 px-2 py-1 text-teal hover:bg-teal/20 transition-colors"
+        aria-label={`View § ${usc_section} on the Official U.S. Code, opens in new tab`}
       >
         View on OLRC →
       </a>

apps/web/src/styles/global.css

@@ -8,14 +8,15 @@
   --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --color-navy: #1B3A5C;
   --color-teal: #0D7377;
+  --color-teal-bright: #14a3a8;
   --color-amber: #D4A843;
   --color-slate: #4A5568;
 }
 
 /* Legal text readability — 18px base for comfortable reading */
 .prose {
-  --tw-prose-body-line-height: 1.85;
   font-size: 1.125rem; /* 18px */
+  line-height: 1.85; /* comfortable for long legal paragraphs */
   max-width: min(72ch, 100%);
 }
 
@@ -64,15 +65,15 @@
 
 .prose ul ul {
   padding-left: 1.75em;
-  border-left: 2px solid #0D7377;
+  border-left: 2px solid var(--color-teal);
   margin-left: 0.5em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
 
 /* Dark mode: slightly brighter teal border for nested lists */
 :where(.dark, .dark *) .prose ul ul {
-  border-left-color: #14a3a8;
+  border-left-color: var(--color-teal-bright);
 }
 
 /* At deep nesting, reduce padding to prevent horizontal overflow */
@@ -93,41 +94,27 @@
 
 /* Code/reference blocks — subtle background tint */
 .prose code {
-  background-color: #f1f5f9; /* slate-100 */
+  background-color: rgb(74 85 104 / 10%); /* slate at 10% opacity */
   padding: 0.15em 0.35em;
   border-radius: 0.25em;
   font-size: 0.875em;
 }
 
 :where(.dark, .dark *) .prose code {
-  background-color: #1e293b; /* slate-800 */
+  background-color: rgb(27 58 92 / 50%); /* navy at 50% opacity */
+  color: var(--color-gray-200, #e2e8f0);
 }
 
 .prose pre {
-  background-color: #f8fafc; /* slate-50 */
-  border: 1px solid #e2e8f0; /* slate-200 */
+  background-color: var(--color-gray-50, #f8fafc);
+  border: 1px solid var(--color-gray-200, #e2e8f0);
   border-radius: 0.375em;
   padding: 1em;
 }
 
 :where(.dark, .dark *) .prose pre {
-  background-color: #0f172a; /* slate-900 */
-  border-color: #334155; /* slate-700 */
-}
-
-/* Metadata badge contrast — light mode */
-.badge-metadata {
-  background-color: #f3f4f6; /* gray-100 */
-  color: #374151; /* gray-700 */
-}
-
-/* Footer text — ensure readable in both modes */
-footer {
-  color: #4A5568;
-}
-
-:where(.dark, .dark *) footer {
-  color: #9ca3af; /* gray-400 */
+  background-color: var(--color-gray-950, #030712);
+  border-color: var(--color-gray-700, #334155);
 }
 
 /* Print styles */