From 8482e6519111bfa791ee16434dfc99c75faa51c6 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Wed, 27 May 2026 14:30:16 +0200
Subject: [PATCH 01/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 647 +++++++++++++-----------------
 1 file changed, 270 insertions(+), 377 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 5526e7a2..91191be0 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -22,7 +22,6 @@ const months = buildMonths(minDate, maxDate)
 const quarterHeaders = buildQuarterHeaders(months)
 
 const nMonths = months.length
-const nQuarters = quarterHeaders.length
 
 const timelineStart = months[0].start.getTime()
 const timelineEnd = months[months.length - 1].end.getTime()
@@ -56,263 +55,199 @@ function fmtDate(iso: string | null | undefined): string {
 
   <!--
     .board-frame clips children to the border-radius without becoming a
-    scroll container (overflow: clip does not create one, unlike overflow: hidden).
-    This lets .board-header-sticky use position: sticky relative to the viewport.
+    scroll container (overflow: clip does not create one).
+    .board-scroll uses overflow-y: clip for the same reason — so that
+    position: sticky on thead cells references the viewport, not this element.
   -->
   <div
     class="board-frame"
-    style={`--n-months: ${nMonths}; --n-quarters: ${nQuarters}`}
+    style={`--n-months: ${nMonths}`}
   >
-    <!-- ── Sticky header — lives OUTSIDE .board-scroll so it can pin to the viewport ── -->
-    <!-- aria-hidden: header is in a separate DOM tree from role="grid" and cannot be
-         associated with it; date/milestone info is conveyed via gridcell aria-labels -->
-    <div class="board-header-sticky" aria-hidden="true">
-      <!--
-        .board-header-inner scrolls horizontally but hides its scrollbar.
-        JS keeps its scrollLeft in sync with .board-scroll.
-      -->
-      <div class="board-header-inner">
-        <div class="board-header-grid">
-          <!-- col 1, rows 1–2: "Project" label spans both header rows -->
-          <div class="hd-label" style="grid-column: 1; grid-row: 1 / 3">
-            Team / Project
-          </div>
-
-          <!-- row 1: Quarter header cells (desktop: month-based spans) -->
-          {
-            quarterHeaders.map((qh) => (
-              <div
-                class:list={[
-                  'hd-quarter',
-                  'hd-quarter--desktop',
-                  {
-                    'hd-quarter--current':
-                      qh.q === Math.floor(nowMonth / 3) + 1 &&
-                      qh.year === nowYear
-                  }
-                ]}
-                style={`grid-column: ${qh.colStart} / span ${qh.span}; grid-row: 1`}
-              >
-                {qh.label}
-              </div>
-            ))
-          }
-
-          <!-- row 1: Quarter header cells (mobile: one column each) -->
-          {
-            quarterHeaders.map((qh, i) => (
-              <div
-                class:list={[
-                  'hd-quarter',
-                  'hd-quarter--mobile',
-                  {
-                    'hd-quarter--current':
-                      qh.q === Math.floor(nowMonth / 3) + 1 &&
-                      qh.year === nowYear
-                  }
-                ]}
-                style={`grid-column: ${i + 2}; grid-row: 1`}
-              >
-                {qh.label}
-              </div>
-            ))
-          }
+    <div class="board-scroll">
+      <table class="board" style={`--now-pct: ${nowLeft}%`} aria-label="Projects">
+        <colgroup>
+          <col class="col-label" />
+          {months.map(() => <col class="col-month" />)}
+        </colgroup>
+
+        <thead>
+          <!-- Row 1: "Team / Project" corner label (rowspan 2) + quarter headers -->
+          <tr>
+            <th class="hd-label" rowspan="2" scope="col">Team / Project</th>
+            {
+              quarterHeaders.map((qh) => (
+                <th
+                  class:list={[
+                    'hd-quarter',
+                    {
+                      'hd-quarter--current':
+                        qh.q === Math.floor(nowMonth / 3) + 1 &&
+                        qh.year === nowYear
+                    }
+                  ]}
+                  colspan={qh.span}
+                  scope="colgroup"
+                >
+                  {qh.label}
+                </th>
+              ))
+            }
+          </tr>
+          <!-- Row 2: Month headers -->
+          <tr>
+            {
+              months.map((m) => (
+                <th
+                  class:list={[
+                    'hd-month',
+                    {
+                      'hd-month--current':
+                        m.year === nowYear && m.month === nowMonth
+                    },
+                    { 'hd-month--qstart': m.isQuarterStart }
+                  ]}
+                  scope="col"
+                >
+                  {m.label}
+                  {m.year === nowYear && m.month === nowMonth && (
+                    <span class="now-badge">Now</span>
+                  )}
+                </th>
+              ))
+            }
+          </tr>
+        </thead>
 
-          <!-- row 2: Month header cells -->
+        <tbody>
           {
-            months.map((m) => (
-              <div
-                class:list={[
-                  'hd-month',
-                  {
-                    'hd-month--current':
-                      m.year === nowYear && m.month === nowMonth
-                  },
-                  { 'hd-month--qstart': m.isQuarterStart }
-                ]}
-                style={`grid-column: ${m.col}; grid-row: 2`}
-              >
-                {m.label}
-                {m.year === nowYear && m.month === nowMonth && (
-                  <span class="now-badge">Now</span>
-                )}
-              </div>
-            ))
-          }
-        </div>
-      </div>
-    </div>
+            gridItems.map((item) => {
+              if (item.type === 'team-header') {
+                const { team, teamColor } = item
+                return (
+                  <tr>
+                    <th
+                      class="team-header"
+                      colspan={nMonths + 1}
+                      scope="rowgroup"
+                      style={`background: ${teamColor}33; --team-color: ${teamColor}`}
+                    >
+                      <div
+                        class="team-header-label"
+                        style={`background: color-mix(in srgb, ${teamColor} 20%, white)`}
+                      >
+                        {team.name}
+                      </div>
+                    </th>
+                  </tr>
+                )
+              }
+
+              const { project: proj, teamColor } = item
+              const projColor = proj.color ?? DEFAULT_PROJECT_COLOR
+              const iconEmoji = resolveIcon(proj.icon)
+              const {
+                hasDates,
+                barLeft,
+                barWidth,
+                hasCompletedBar,
+                completedBarLeft,
+                completedBarWidth,
+                hasExtension,
+                extensionLeft,
+                extensionWidth,
+                datedMilestones
+              } = computeProjectBarProps(proj, pos)
 
-    <!-- ── Scrollable body — project rows only ── -->
-    <div class="board-scroll">
-      <!--
-        Grid columns:
-          col 1          = project label (fixed, sticky left)
-          cols 2 … N+1   = one per month
-        Grid rows:
-          rows 1 …       = one per project (header rows are in .board-header-sticky above)
-        Every cell has explicit grid-column + grid-row to avoid auto-placement bugs.
-      -->
-      <div
-        class="board"
-        style={`--now-pct: ${nowLeft}%`}
-        role="grid"
-        aria-label="Projects"
-        aria-readonly="true"
-      >
-        <!-- ── rows 1+: Team headers and project rows ── -->
-        {
-          gridItems.map((item) => {
-            if (item.type === 'team-header') {
-              const { team, row, teamColor } = item
               return (
-                <div role="row" style="display: contents">
-                  <div
-                    class="team-header"
-                    role="rowheader"
-                    aria-colspan={nMonths + 1}
-                    style={`grid-column: 1 / -1; grid-row: ${row}; background: ${teamColor}33; --team-color: ${teamColor}`}
+                <tr>
+                  <th
+                    class="proj-label"
+                    scope="row"
+                    style={`background-color: color-mix(in srgb, ${teamColor} 15%, white); --team-color: ${teamColor}`}
                   >
-                    <div
-                      class="team-header-label"
-                      style={`background: color-mix(in srgb, ${teamColor} 20%, white)`}
-                    >
-                      {team.name}
-                    </div>
-                  </div>
-                </div>
-              )
-            }
+                    <span class="proj-name">
+                      {iconEmoji && (
+                        <span class="proj-icon" aria-hidden="true">
+                          {iconEmoji}
+                        </span>
+                      )}
+                      <span class="proj-name-text">{proj.name}</span>
+                    </span>
+                  </th>
+                  <td
+                    class="proj-track"
+                    colspan={nMonths}
+                    aria-label={
+                      [
+                        fmtDate(proj.startDate) &&
+                          `starts ${fmtDate(proj.startDate)}`,
+                        fmtDate(proj.targetDate) &&
+                          `target ${fmtDate(proj.targetDate)}`,
+                        datedMilestones.length > 0 &&
+                          `milestones: ${datedMilestones.map((ms) => ms.name).join(', ')}`
+                      ]
+                        .filter(Boolean)
+                        .join('; ') || 'no dates set'
+                    }
+                    style={`background-color: ${teamColor}17; --team-color: ${teamColor}`}
+                  >
+                    <div class="now-line" aria-hidden="true" />
 
-            const { project: proj, row, teamColor } = item
-            const projColor = proj.color ?? DEFAULT_PROJECT_COLOR
-            const iconEmoji = resolveIcon(proj.icon)
-            const {
-              hasDates,
-              barLeft,
-              barWidth,
-              hasCompletedBar,
-              completedBarLeft,
-              completedBarWidth,
-              hasExtension,
-              extensionLeft,
-              extensionWidth,
-              datedMilestones
-            } = computeProjectBarProps(proj, pos)
-
-            return (
-              <div role="row" style="display: contents">
-                {/* Project label — col 1, explicit row */}
-                <div
-                  class="proj-label"
-                  role="rowheader"
-                  style={`grid-column: 1; grid-row: ${row}; background-color: color-mix(in srgb, ${teamColor} 15%, white); --team-color: ${teamColor}`}
-                >
-                  <span class="proj-name">
-                    {iconEmoji && (
-                      <span class="proj-icon" aria-hidden="true">
-                        {iconEmoji}
-                      </span>
+                    {hasDates && (
+                      <div
+                        class="proj-bar"
+                        aria-hidden="true"
+                        style={`left: ${barLeft}%; width: ${barWidth}%; background: ${projColor}40; border: 1.5px solid ${projColor}aa;`}
+                      />
                     )}
-                    <span class="proj-name-text">{proj.name}</span>
-                  </span>
-                </div>
-
-                {/* Project timeline track — cols 2 to last, explicit row */}
-                <div
-                  class="proj-track"
-                  role="gridcell"
-                  aria-label={
-                    [
-                      fmtDate(proj.startDate) &&
-                        `starts ${fmtDate(proj.startDate)}`,
-                      fmtDate(proj.targetDate) &&
-                        `target ${fmtDate(proj.targetDate)}`,
-                      datedMilestones.length > 0 &&
-                        `milestones: ${datedMilestones.map((ms) => ms.name).join(', ')}`
-                    ]
-                      .filter(Boolean)
-                      .join('; ') || 'no dates set'
-                  }
-                  style={`grid-column: 2 / -1; grid-row: ${row}; background-color: ${teamColor}17; --team-color: ${teamColor}`}
-                >
-                  {/* "Today" marker */}
-                  <div class="now-line" aria-hidden="true" />
-
-                  {/* Project duration bar */}
-                  {hasDates && (
-                    <div
-                      class="proj-bar"
-                      aria-hidden="true"
-                      style={`
-                        left: ${barLeft}%;
-                        width: ${barWidth}%;
-                        background: ${projColor}40;
-                        border: 1.5px solid ${projColor}aa;
-                      `}
-                    />
-                  )}
-
-                  {/* Milestone overflow extension beyond targetDate */}
-                  {hasExtension && (
-                    <div
-                      class="proj-bar proj-bar--extension"
-                      aria-hidden="true"
-                      style={`
-                        left: ${extensionLeft}%;
-                        width: ${extensionWidth}%;
-                        border-color: ${projColor}88;
-                      `}
-                      title="Milestones extend past the project target date"
-                    />
-                  )}
 
-                  {/* Completed bar (no targetDate, resolved via completedAt) */}
-                  {hasCompletedBar && (
-                    <div
-                      class="proj-bar proj-bar--completed"
-                      aria-hidden="true"
-                      style={`
-                        left: ${completedBarLeft}%;
-                        width: ${completedBarWidth}%;
-                        background: ${projColor}28;
-                        border-color: ${projColor}99;
-                      `}
-                      title="Completed"
-                    />
-                  )}
+                    {hasExtension && (
+                      <div
+                        class="proj-bar proj-bar--extension"
+                        aria-hidden="true"
+                        style={`left: ${extensionLeft}%; width: ${extensionWidth}%; border-color: ${projColor}88;`}
+                        title="Milestones extend past the project target date"
+                      />
+                    )}
 
-                  {/* Inline milestone diamond markers */}
-                  {datedMilestones.map((ms) => {
-                    const left = pos
-                      .pctLeft(new Date(ms.targetDate!))
-                      .toFixed(2)
-                    return (
+                    {hasCompletedBar && (
                       <div
-                        class="ms-pin"
-                        role="button"
-                        aria-label={ms.name}
-                        style={`left: ${left}%`}
-                        title={ms.name}
-                        tabindex="0"
-                      >
-                        <span
-                          class="ms-diamond"
-                          aria-hidden="true"
-                          style={`background: ${projColor}`}
-                        />
-                        <span class="ms-pin-name" aria-hidden="true">
-                          {ms.name}
-                        </span>
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
-            )
-          })
-        }
-      </div>
+                        class="proj-bar proj-bar--completed"
+                        aria-hidden="true"
+                        style={`left: ${completedBarLeft}%; width: ${completedBarWidth}%; background: ${projColor}28; border-color: ${projColor}99;`}
+                        title="Completed"
+                      />
+                    )}
+
+                    {datedMilestones.map((ms) => {
+                      const left = pos
+                        .pctLeft(new Date(ms.targetDate!))
+                        .toFixed(2)
+                      return (
+                        <button
+                          class="ms-pin"
+                          aria-label={ms.name}
+                          style={`left: ${left}%`}
+                          title={ms.name}
+                        >
+                          <span
+                            class="ms-diamond"
+                            aria-hidden="true"
+                            style={`background: ${projColor}`}
+                          />
+                          <span class="ms-pin-name" aria-hidden="true">
+                            {ms.name}
+                          </span>
+                        </button>
+                      )
+                    })}
+                  </td>
+                </tr>
+              )
+            })
+          }
+        </tbody>
+      </table>
     </div>
   </div>
 </div>
@@ -327,8 +262,7 @@ function fmtDate(iso: string | null | undefined): string {
   /*
     Frame: provides the border, border-radius, and box-shadow for the whole board.
     overflow: clip clips children to the border-radius WITHOUT creating a scroll
-    container, so .board-header-sticky can use position: sticky relative to the
-    viewport (not relative to this element).
+    container, so thead th can use position: sticky relative to the viewport.
   */
   .board-frame {
     border: 1px solid #e5e7eb;
@@ -337,74 +271,64 @@ function fmtDate(iso: string | null | undefined): string {
     overflow: clip;
   }
 
-  /* ── Sticky header ── */
-  .board-header-sticky {
-    position: sticky;
-    top: var(--site-header-height);
-    z-index: 15;
-    background: #f9fafb;
-    border-bottom: 2px solid #e5e7eb;
-  }
-
   /*
-    .board-header-inner scrolls horizontally to mirror .board-scroll,
-    but its scrollbar is hidden — scrolling is driven by JS sync.
+    overflow-y: clip (unlike overflow-y: auto/hidden) does not create a scroll
+    container, so position: sticky on thead cells references the viewport rather
+    than this element.
   */
-  .board-header-inner {
+  .board-scroll {
     overflow-x: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-  .board-header-inner::-webkit-scrollbar {
-    display: none;
+    overflow-y: clip;
   }
 
-  /* Header grid — same column template as .board */
-  .board-header-grid {
-    display: grid;
-    grid-template-columns: 300px repeat(var(--n-months), minmax(88px, 1fr));
-    min-width: calc(300px + var(--n-months) * 88px);
+  /* ── Table ── */
+  .board {
+    table-layout: fixed;
+    border-collapse: separate;
+    border-spacing: 0;
+    width: max(calc(300px + var(--n-months) * 88px), 100%);
     font-family: 'Titillium', Arial, sans-serif;
     font-size: var(--step--1);
     color: #1a1a1a;
   }
 
-  /* ── Scrollable body ── */
-  .board-scroll {
-    overflow-x: auto;
+  .col-label {
+    width: 300px;
   }
 
-  /* ── Body grid ── */
-  .board {
-    display: grid;
-    grid-template-columns: 300px repeat(var(--n-months), minmax(88px, 1fr));
-    min-width: calc(300px + var(--n-months) * 88px);
-    column-gap: 0;
-    font-family: 'Titillium', Arial, sans-serif;
-    font-size: var(--step--1);
-    color: #1a1a1a;
+  .col-month {
+    width: 88px;
   }
 
-  /* ── "Project" label — sticky left so it stays visible on horizontal scroll ── */
-  .hd-label {
+  /* ── Sticky thead ── */
+  thead th {
     position: sticky;
-    left: 0;
-    z-index: 5;
+    top: var(--site-header-height);
     background: #f9fafb;
+    z-index: 10;
+  }
+
+  thead tr:last-child th {
+    border-bottom: 2px solid #e5e7eb;
+  }
+
+  /* ── "Team / Project" corner cell — sticky on both axes ── */
+  .hd-label {
+    left: 0;
+    z-index: 15;
     border-right: 1px solid #e5e7eb;
     padding: 0 0.75rem;
-    display: flex;
-    align-items: center;
     font-weight: 700;
     font-size: var(--step--2);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #555;
+    text-align: left;
+    vertical-align: middle;
   }
 
   /* ── Quarter header cells (row 1) ── */
   .hd-quarter {
-    background: #f9fafb;
     border-bottom: 1px solid #d1d5db;
     border-right: 2px solid #d1d5db;
     padding: 0.35rem 0.75rem;
@@ -413,10 +337,10 @@ function fmtDate(iso: string | null | undefined): string {
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #555;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    text-align: center;
     white-space: nowrap;
+    overflow: hidden;
+    vertical-align: middle;
   }
 
   .hd-quarter--current {
@@ -426,18 +350,14 @@ function fmtDate(iso: string | null | undefined): string {
 
   /* ── Month header cells (row 2) ── */
   .hd-month {
-    background: #f9fafb;
     border-right: 1px solid #e8e8e8;
     padding: 0.25rem 0.5rem;
     font-size: var(--step--2);
     font-weight: 500;
     color: #777;
     text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2px;
     white-space: nowrap;
+    vertical-align: middle;
   }
 
   .hd-month--qstart {
@@ -451,7 +371,7 @@ function fmtDate(iso: string | null | undefined): string {
   }
 
   .now-badge {
-    display: inline-block;
+    display: block;
     font-size: 0.55rem;
     font-weight: 700;
     background: var(--color-primary);
@@ -460,6 +380,7 @@ function fmtDate(iso: string | null | undefined): string {
     padding: 0.1em 0.4em;
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    margin: 2px auto 0;
   }
 
   /* ── Team header row ── */
@@ -471,6 +392,7 @@ function fmtDate(iso: string | null | undefined): string {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.06em;
+    padding: 0;
   }
 
   .team-header-label {
@@ -488,12 +410,10 @@ function fmtDate(iso: string | null | undefined): string {
     position: sticky;
     left: 0;
     z-index: 4;
-    /* background-color set via inline style as opaque color-mix() */
     border-right: 1px solid var(--team-color);
     padding: 0 0.75rem;
-    display: flex;
-    align-items: center;
-    min-height: 3.25rem;
+    vertical-align: middle;
+    height: 3.25rem;
   }
 
   .proj-name {
@@ -521,13 +441,9 @@ function fmtDate(iso: string | null | undefined): string {
   /* ── Project timeline track ── */
   .proj-track {
     position: relative;
-    background-color: color-mix(
-      in srgb,
-      rgb(var(--tint-rgb, 255 255 255)) 4%,
-      white
-    );
-    min-height: 3.25rem;
+    height: 3.25rem;
     overflow: visible;
+    vertical-align: top;
   }
 
   /* "Today" vertical line */
@@ -584,6 +500,9 @@ function fmtDate(iso: string | null | undefined): string {
     padding-top: 0.35rem;
     z-index: 3;
     cursor: default;
+    background: none;
+    border: none;
+    font: inherit;
   }
 
   .ms-diamond {
@@ -597,10 +516,19 @@ function fmtDate(iso: string | null | undefined): string {
     transition: transform 150ms ease;
   }
 
-  .ms-pin:hover .ms-diamond {
+  .ms-pin:hover .ms-diamond,
+  .ms-pin:focus-visible .ms-diamond {
     transform: rotate(45deg) scale(1.3);
   }
 
+  .ms-pin:focus-visible {
+    outline: none;
+  }
+
+  .ms-pin:focus-visible .ms-diamond {
+    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
+  }
+
   .ms-pin-name {
     font-size: 0.58rem;
     font-weight: 600;
@@ -614,7 +542,7 @@ function fmtDate(iso: string | null | undefined): string {
     line-height: 1.2;
   }
 
-  /* ── Scrollbar (body only) ── */
+  /* ── Scrollbar ── */
   .board-scroll::-webkit-scrollbar {
     height: 6px;
   }
@@ -651,44 +579,35 @@ function fmtDate(iso: string | null | undefined): string {
     background: #e5e7eb;
   }
 
-  /* Desktop: show month-based headers, hide mobile ones */
-  .hd-quarter--mobile {
-    display: none;
-  }
-
   /* ── Mobile breakpoint ── */
   @media (max-width: 767px) {
-    /* Show toggle button */
     .mobile-toggle-wrap {
       display: flex;
     }
 
-    /* Quarter-column grid for header and body */
-    .board-header-grid,
+    /* Compact month columns — quarter headers still span their months correctly */
     .board {
-      grid-template-columns: 130px repeat(var(--n-quarters), minmax(72px, 1fr));
-      min-width: calc(130px + var(--n-quarters) * 72px);
+      width: max(calc(130px + var(--n-months) * 24px), 100%);
     }
 
-    /* Swap quarter header variants */
-    .hd-quarter--desktop {
-      display: none;
+    .col-label {
+      width: 130px;
     }
-    .hd-quarter--mobile {
-      display: flex;
+
+    .col-month {
+      width: 24px;
     }
 
-    /* Collapse month header row (keep in DOM so grid positions stay correct) */
+    /* Hide month label text (keep cells for column structure) */
     .hd-month {
-      height: 0;
-      min-height: 0;
+      overflow: hidden;
       padding: 0;
+      font-size: 0;
       border: none;
-      overflow: hidden;
+      height: 0;
       visibility: hidden;
     }
 
-    /* Narrow label column */
     .proj-name-text {
       max-width: 96px;
     }
@@ -698,12 +617,11 @@ function fmtDate(iso: string | null | undefined): string {
       display: none;
     }
 
-    /* Tappable pins */
     .ms-pin {
       cursor: pointer;
     }
 
-    /* Tooltip popup on tap */
+    /* Tooltip popup on tap / keyboard activate */
     .ms-pin--active {
       z-index: 10;
     }
@@ -740,26 +658,24 @@ function fmtDate(iso: string | null | undefined): string {
     }
 
     /* ── "Full timeline" mode: restore month-column view ── */
-    .board-outer--full .board-header-grid,
     .board-outer--full .board {
-      grid-template-columns: 300px repeat(var(--n-months), minmax(88px, 1fr));
-      min-width: calc(300px + var(--n-months) * 88px);
+      width: max(calc(300px + var(--n-months) * 88px), 100%);
     }
 
-    .board-outer--full .hd-quarter--desktop {
-      display: flex;
+    .board-outer--full .col-label {
+      width: 300px;
     }
 
-    .board-outer--full .hd-quarter--mobile {
-      display: none;
+    .board-outer--full .col-month {
+      width: 88px;
     }
 
     .board-outer--full .hd-month {
-      height: auto;
-      min-height: unset;
+      overflow: visible;
       padding: 0.25rem 0.5rem;
+      font-size: var(--step--2);
       border-right: 1px solid #e8e8e8;
-      overflow: visible;
+      height: auto;
       visibility: visible;
     }
 
@@ -784,38 +700,15 @@ function fmtDate(iso: string | null | undefined): string {
     const nowPct = parseFloat(rawPct)
     if (isNaN(nowPct)) return
 
-    const labelWidth =
-      parseInt(getComputedStyle(board).gridTemplateColumns.split(' ')[0], 10) ||
-      300
+    const labelCell = board.querySelector<HTMLElement>('.hd-label')
+    const labelWidth = labelCell?.offsetWidth ?? 300
     const timelineWidth = board.scrollWidth - labelWidth
     const nowPxFromBoardLeft = labelWidth + (nowPct / 100) * timelineWidth
 
     boardScroll.scrollLeft = nowPxFromBoardLeft - boardScroll.clientWidth / 2
   }
 
-  // Keep the sticky header in sync with the body's horizontal scroll (bidirectional).
-  function initScrollSync() {
-    const boardScroll = document.querySelector<HTMLElement>('.board-scroll')
-    const headerInner = document.querySelector<HTMLElement>(
-      '.board-header-inner'
-    )
-    if (!boardScroll || !headerInner) return
-    let syncing = false
-    boardScroll.addEventListener('scroll', () => {
-      if (syncing) return
-      syncing = true
-      headerInner.scrollLeft = boardScroll.scrollLeft
-      syncing = false
-    })
-    headerInner.addEventListener('scroll', () => {
-      if (syncing) return
-      syncing = true
-      boardScroll.scrollLeft = headerInner.scrollLeft
-      syncing = false
-    })
-  }
-
-  // Toggle between quarter view and full month view on mobile.
+  // Toggle between compact quarter view and full month view on mobile.
   document
     .querySelectorAll<HTMLButtonElement>('.mobile-toggle-btn')
     .forEach((btn) => {
@@ -830,24 +723,24 @@ function fmtDate(iso: string | null | undefined): string {
     })
 
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      initScrollSync()
-      centreOnNow()
-    })
+    document.addEventListener('DOMContentLoaded', centreOnNow)
   } else {
-    initScrollSync()
     centreOnNow()
   }
 
-  // Tap milestone diamond to reveal its name as a tooltip (mobile).
+  // Tap or keyboard-activate milestone diamond to reveal its name as a tooltip (mobile).
+  function togglePin(pin: HTMLElement) {
+    const isNowActive = !pin.classList.contains('ms-pin--active')
+    document
+      .querySelectorAll('.ms-pin--active')
+      .forEach((p) => p.classList.remove('ms-pin--active'))
+    if (isNowActive) pin.classList.add('ms-pin--active')
+  }
+
   document.querySelectorAll<HTMLElement>('.ms-pin').forEach((pin) => {
     pin.addEventListener('click', (e) => {
       e.stopPropagation()
-      const isNowActive = !pin.classList.contains('ms-pin--active')
-      document
-        .querySelectorAll('.ms-pin--active')
-        .forEach((p) => p.classList.remove('ms-pin--active'))
-      if (isNowActive) pin.classList.add('ms-pin--active')
+      togglePin(pin)
     })
   })
 

From 5790cb1882496a537cf6ac4e8abaac40b5eb309e Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Wed, 27 May 2026 15:00:53 +0200
Subject: [PATCH 02/20] chore: accessibility edits

---
 eslint.config.js                  |   9 ++-
 src/components/RoadmapBoard.astro | 125 +++++++++++++++++++-----------
 2 files changed, 88 insertions(+), 46 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index aa8b4ef9..33eae3bb 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -14,7 +14,14 @@ export default defineConfig([
   },
   tseslint.configs.recommended,
   eslintPluginAstro.configs.recommended,
-  globalIgnores(['dist', '.astro', 'node_modules', 'public', '**/*.min.js']),
+  globalIgnores([
+    'dist',
+    '.astro',
+    '.netlify',
+    'node_modules',
+    'public',
+    '**/*.min.js'
+  ]),
   {
     rules: {
       'no-console': 'error',
diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 91191be0..21ea6f78 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -59,12 +59,13 @@ function fmtDate(iso: string | null | undefined): string {
     .board-scroll uses overflow-y: clip for the same reason — so that
     position: sticky on thead cells references the viewport, not this element.
   -->
-  <div
-    class="board-frame"
-    style={`--n-months: ${nMonths}`}
-  >
-    <div class="board-scroll">
-      <table class="board" style={`--now-pct: ${nowLeft}%`} aria-label="Projects">
+  <div class="board-frame" style={`--n-months: ${nMonths}`}>
+    <div class="board-scroll" tabindex="0" aria-label="Project timeline">
+      <table
+        class="board"
+        style={`--now-pct: ${nowLeft}%`}
+        aria-label="Projects"
+      >
         <colgroup>
           <col class="col-label" />
           {months.map(() => <col class="col-month" />)}
@@ -226,9 +227,12 @@ function fmtDate(iso: string | null | undefined): string {
                       return (
                         <button
                           class="ms-pin"
-                          aria-label={ms.name}
+                          aria-label={
+                            ms.targetDate
+                              ? `${ms.name}, due ${fmtDate(ms.targetDate)}`
+                              : ms.name
+                          }
                           style={`left: ${left}%`}
-                          title={ms.name}
                         >
                           <span
                             class="ms-diamond"
@@ -238,6 +242,14 @@ function fmtDate(iso: string | null | undefined): string {
                           <span class="ms-pin-name" aria-hidden="true">
                             {ms.name}
                           </span>
+                          <span class="ms-pin-tooltip" aria-hidden="true">
+                            {ms.name}
+                            {ms.targetDate && (
+                              <span class="ms-pin-tooltip-date">
+                                Due {fmtDate(ms.targetDate)}
+                              </span>
+                            )}
+                          </span>
                         </button>
                       )
                     })}
@@ -526,7 +538,9 @@ function fmtDate(iso: string | null | undefined): string {
   }
 
   .ms-pin:focus-visible .ms-diamond {
-    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
+    box-shadow:
+      0 0 0 2px white,
+      0 0 0 4px var(--color-primary);
   }
 
   .ms-pin-name {
@@ -542,6 +556,58 @@ function fmtDate(iso: string | null | undefined): string {
     line-height: 1.2;
   }
 
+  /* ── Scrollable region focus ── */
+  .board-scroll:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+  }
+
+  /* ── Milestone tooltip (all screen sizes) ── */
+  .ms-pin--active {
+    z-index: 10;
+  }
+
+  .ms-pin-tooltip {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(25, 25, 25, 0.92);
+    color: #fff;
+    padding: 5px 8px;
+    border-radius: 5px;
+    font-size: 0.65rem;
+    font-weight: 600;
+    white-space: normal;
+    max-width: 130px;
+    text-align: center;
+    line-height: 1.3;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .ms-pin-tooltip-date {
+    font-weight: 400;
+    opacity: 0.85;
+  }
+
+  .ms-pin--active .ms-pin-tooltip {
+    display: flex;
+  }
+
+  .ms-pin--active .ms-pin-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: rgba(25, 25, 25, 0.92);
+  }
+
   /* ── Scrollbar ── */
   .board-scroll::-webkit-scrollbar {
     height: 6px;
@@ -579,6 +645,11 @@ function fmtDate(iso: string | null | undefined): string {
     background: #e5e7eb;
   }
 
+  .mobile-toggle-btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
   /* ── Mobile breakpoint ── */
   @media (max-width: 767px) {
     .mobile-toggle-wrap {
@@ -621,42 +692,6 @@ function fmtDate(iso: string | null | undefined): string {
       cursor: pointer;
     }
 
-    /* Tooltip popup on tap / keyboard activate */
-    .ms-pin--active {
-      z-index: 10;
-    }
-
-    .ms-pin--active .ms-pin-name {
-      display: block;
-      position: absolute;
-      bottom: calc(100% + 8px);
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgba(25, 25, 25, 0.92);
-      color: #fff;
-      padding: 5px 8px;
-      border-radius: 5px;
-      font-size: 0.65rem;
-      font-weight: 600;
-      white-space: normal;
-      max-width: 130px;
-      text-align: center;
-      line-height: 1.3;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-      pointer-events: none;
-    }
-
-    /* Arrow pointing down */
-    .ms-pin--active .ms-pin-name::after {
-      content: '';
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border: 5px solid transparent;
-      border-top-color: rgba(25, 25, 25, 0.92);
-    }
-
     /* ── "Full timeline" mode: restore month-column view ── */
     .board-outer--full .board {
       width: max(calc(300px + var(--n-months) * 88px), 100%);

From e5c0138c98cac3cc09bd245fc58bc28a9391ac24 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Wed, 27 May 2026 15:13:53 +0200
Subject: [PATCH 03/20] fix: tooltip

---
 src/components/RoadmapBoard.astro | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 21ea6f78..b6c15fbf 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -563,6 +563,7 @@ function fmtDate(iso: string | null | undefined): string {
   }
 
   /* ── Milestone tooltip (all screen sizes) ── */
+  .ms-pin:hover,
   .ms-pin--active {
     z-index: 10;
   }
@@ -594,6 +595,7 @@ function fmtDate(iso: string | null | undefined): string {
     opacity: 0.85;
   }
 
+  .ms-pin:hover .ms-pin-tooltip,
   .ms-pin--active .ms-pin-tooltip {
     display: flex;
   }

From 6a5d86a3cfda7a6650b9b887b38db9659f187a26 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 10:14:53 +0200
Subject: [PATCH 04/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 39 +++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index b6c15fbf..3153bd7e 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -128,17 +128,22 @@ function fmtDate(iso: string | null | undefined): string {
                   <tr>
                     <th
                       class="team-header"
-                      colspan={nMonths + 1}
                       scope="rowgroup"
                       style={`background: ${teamColor}33; --team-color: ${teamColor}`}
                     >
-                      <div
-                        class="team-header-label"
+                      <span
+                        class="team-header-name"
                         style={`background: color-mix(in srgb, ${teamColor} 20%, white)`}
                       >
                         {team.name}
-                      </div>
+                      </span>
                     </th>
+                    <td
+                      class="team-header-track"
+                      colspan={nMonths}
+                      aria-hidden="true"
+                      style={`background: ${teamColor}33; --team-color: ${teamColor}`}
+                    />
                   </tr>
                 )
               }
@@ -313,19 +318,27 @@ function fmtDate(iso: string | null | undefined): string {
   }
 
   /* ── Sticky thead ── */
-  thead th {
+  /*
+    Sticky is on <thead> itself, not individual <th> cells, so both header rows
+    (quarters + months) move as a single unit and don't overlap each other.
+  */
+  thead {
     position: sticky;
     top: var(--site-header-height);
-    background: #f9fafb;
     z-index: 10;
   }
 
+  thead th {
+    background: #f9fafb;
+  }
+
   thead tr:last-child th {
     border-bottom: 2px solid #e5e7eb;
   }
 
   /* ── "Team / Project" corner cell — sticky on both axes ── */
   .hd-label {
+    position: sticky;
     left: 0;
     z-index: 15;
     border-right: 1px solid #e5e7eb;
@@ -397,6 +410,9 @@ function fmtDate(iso: string | null | undefined): string {
 
   /* ── Team header row ── */
   .team-header {
+    position: sticky;
+    left: 0;
+    z-index: 4;
     border-top: 1px solid color-mix(in srgb, var(--team-color) 50%, transparent);
     border-bottom: 1px solid
       color-mix(in srgb, var(--team-color) 50%, transparent);
@@ -407,16 +423,19 @@ function fmtDate(iso: string | null | undefined): string {
     padding: 0;
   }
 
-  .team-header-label {
-    position: sticky;
-    left: 0;
-    z-index: 4;
+  .team-header-name {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.35rem 0.75rem;
   }
 
+  .team-header-track {
+    border-top: 1px solid color-mix(in srgb, var(--team-color) 50%, transparent);
+    border-bottom: 1px solid
+      color-mix(in srgb, var(--team-color) 50%, transparent);
+  }
+
   /* ── Project label cell ── */
   .proj-label {
     position: sticky;

From bfd4d4691b38303116d99b818dc71bc3541c7b07 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 10:38:38 +0200
Subject: [PATCH 05/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 54 ++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 3153bd7e..92df631a 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -166,6 +166,7 @@ function fmtDate(iso: string | null | undefined): string {
 
               return (
                 <tr>
+                  {/* Project label */}
                   <th
                     class="proj-label"
                     scope="row"
@@ -180,6 +181,7 @@ function fmtDate(iso: string | null | undefined): string {
                       <span class="proj-name-text">{proj.name}</span>
                     </span>
                   </th>
+                  {/* Project timeline track */}
                   <td
                     class="proj-track"
                     colspan={nMonths}
@@ -197,8 +199,10 @@ function fmtDate(iso: string | null | undefined): string {
                     }
                     style={`background-color: ${teamColor}17; --team-color: ${teamColor}`}
                   >
+                    {/* "Today" marker */}
                     <div class="now-line" aria-hidden="true" />
 
+                    {/* Project duration bar */}
                     {hasDates && (
                       <div
                         class="proj-bar"
@@ -207,6 +211,7 @@ function fmtDate(iso: string | null | undefined): string {
                       />
                     )}
 
+                    {/* Milestone overflow extension beyond targetDate */}
                     {hasExtension && (
                       <div
                         class="proj-bar proj-bar--extension"
@@ -216,6 +221,7 @@ function fmtDate(iso: string | null | undefined): string {
                       />
                     )}
 
+                    {/* Completed bar (no targetDate, resolved via completedAt) */}
                     {hasCompletedBar && (
                       <div
                         class="proj-bar proj-bar--completed"
@@ -225,6 +231,7 @@ function fmtDate(iso: string | null | undefined): string {
                       />
                     )}
 
+                    {/* Inline milestone diamond markers */}
                     {datedMilestones.map((ms) => {
                       const left = pos
                         .pctLeft(new Date(ms.targetDate!))
@@ -340,20 +347,22 @@ function fmtDate(iso: string | null | undefined): string {
   .hd-label {
     position: sticky;
     left: 0;
-    z-index: 15;
+    z-index: 5;
+    background: #f9fafb;
     border-right: 1px solid #e5e7eb;
     padding: 0 0.75rem;
+    display: flex;
+    align-items: center;
     font-weight: 700;
     font-size: var(--step--2);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #555;
-    text-align: left;
-    vertical-align: middle;
   }
 
   /* ── Quarter header cells (row 1) ── */
   .hd-quarter {
+    background: #f9fafb;
     border-bottom: 1px solid #d1d5db;
     border-right: 2px solid #d1d5db;
     padding: 0.35rem 0.75rem;
@@ -362,10 +371,10 @@ function fmtDate(iso: string | null | undefined): string {
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #555;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     white-space: nowrap;
-    overflow: hidden;
-    vertical-align: middle;
   }
 
   .hd-quarter--current {
@@ -375,14 +384,18 @@ function fmtDate(iso: string | null | undefined): string {
 
   /* ── Month header cells (row 2) ── */
   .hd-month {
+    background: #f9fafb;
     border-right: 1px solid #e8e8e8;
     padding: 0.25rem 0.5rem;
     font-size: var(--step--2);
     font-weight: 500;
     color: #777;
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
     white-space: nowrap;
-    vertical-align: middle;
   }
 
   .hd-month--qstart {
@@ -396,7 +409,7 @@ function fmtDate(iso: string | null | undefined): string {
   }
 
   .now-badge {
-    display: block;
+    display: inline-block;
     font-size: 0.55rem;
     font-weight: 700;
     background: var(--color-primary);
@@ -405,7 +418,6 @@ function fmtDate(iso: string | null | undefined): string {
     padding: 0.1em 0.4em;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    margin: 2px auto 0;
   }
 
   /* ── Team header row ── */
@@ -441,10 +453,12 @@ function fmtDate(iso: string | null | undefined): string {
     position: sticky;
     left: 0;
     z-index: 4;
+    /* background-color set via inline style as opaque color-mix() */
     border-right: 1px solid var(--team-color);
     padding: 0 0.75rem;
-    vertical-align: middle;
-    height: 3.25rem;
+    display: flex;
+    align-items: center;
+    min-height: 3.25rem;
   }
 
   .proj-name {
@@ -474,7 +488,6 @@ function fmtDate(iso: string | null | undefined): string {
     position: relative;
     height: 3.25rem;
     overflow: visible;
-    vertical-align: top;
   }
 
   /* "Today" vertical line */
@@ -619,6 +632,7 @@ function fmtDate(iso: string | null | undefined): string {
     display: flex;
   }
 
+  .ms-pin:hover .ms-pin-tooltip::after,
   .ms-pin--active .ms-pin-tooltip::after {
     content: '';
     position: absolute;
@@ -784,19 +798,15 @@ function fmtDate(iso: string | null | undefined): string {
     centreOnNow()
   }
 
-  // Tap or keyboard-activate milestone diamond to reveal its name as a tooltip (mobile).
-  function togglePin(pin: HTMLElement) {
-    const isNowActive = !pin.classList.contains('ms-pin--active')
-    document
-      .querySelectorAll('.ms-pin--active')
-      .forEach((p) => p.classList.remove('ms-pin--active'))
-    if (isNowActive) pin.classList.add('ms-pin--active')
-  }
-
+  // Tap milestone diamond to reveal its name as a tooltip (mobile).
   document.querySelectorAll<HTMLElement>('.ms-pin').forEach((pin) => {
     pin.addEventListener('click', (e) => {
       e.stopPropagation()
-      togglePin(pin)
+      const isNowActive = !pin.classList.contains('ms-pin--active')
+      document
+        .querySelectorAll('.ms-pin--active')
+        .forEach((p) => p.classList.remove('ms-pin--active'))
+      if (isNowActive) pin.classList.add('ms-pin--active')
     })
   })
 

From 111a55a4fff88a1ec5cef3efc575fcb6ee085272 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 10:48:52 +0200
Subject: [PATCH 06/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 46 +++++++++++++------------------
 1 file changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 92df631a..d178afd3 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -293,6 +293,9 @@ function fmtDate(iso: string | null | undefined): string {
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     overflow: clip;
+    --col-label-w: 300px;
+    --col-month-w: 88px;
+    --row-h: 3.25rem;
   }
 
   /*
@@ -310,18 +313,21 @@ function fmtDate(iso: string | null | undefined): string {
     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 0;
-    width: max(calc(300px + var(--n-months) * 88px), 100%);
+    width: max(
+      calc(var(--col-label-w) + var(--n-months) * var(--col-month-w)),
+      100%
+    );
     font-family: 'Titillium', Arial, sans-serif;
     font-size: var(--step--1);
     color: #1a1a1a;
   }
 
   .col-label {
-    width: 300px;
+    width: var(--col-label-w);
   }
 
   .col-month {
-    width: 88px;
+    width: var(--col-month-w);
   }
 
   /* ── Sticky thead ── */
@@ -458,7 +464,7 @@ function fmtDate(iso: string | null | undefined): string {
     padding: 0 0.75rem;
     display: flex;
     align-items: center;
-    min-height: 3.25rem;
+    min-height: var(--row-h);
   }
 
   .proj-name {
@@ -486,7 +492,7 @@ function fmtDate(iso: string | null | undefined): string {
   /* ── Project timeline track ── */
   .proj-track {
     position: relative;
-    height: 3.25rem;
+    height: var(--row-h);
     overflow: visible;
   }
 
@@ -691,17 +697,10 @@ function fmtDate(iso: string | null | undefined): string {
       display: flex;
     }
 
-    /* Compact month columns — quarter headers still span their months correctly */
-    .board {
-      width: max(calc(130px + var(--n-months) * 24px), 100%);
-    }
-
-    .col-label {
-      width: 130px;
-    }
-
-    .col-month {
-      width: 24px;
+    /* Compact column widths — quarter headers still span their months correctly */
+    .board-frame {
+      --col-label-w: 130px;
+      --col-month-w: 24px;
     }
 
     /* Hide month label text (keep cells for column structure) */
@@ -728,16 +727,9 @@ function fmtDate(iso: string | null | undefined): string {
     }
 
     /* ── "Full timeline" mode: restore month-column view ── */
-    .board-outer--full .board {
-      width: max(calc(300px + var(--n-months) * 88px), 100%);
-    }
-
-    .board-outer--full .col-label {
-      width: 300px;
-    }
-
-    .board-outer--full .col-month {
-      width: 88px;
+    .board-outer--full .board-frame {
+      --col-label-w: 300px;
+      --col-month-w: 88px;
     }
 
     .board-outer--full .hd-month {
@@ -771,7 +763,7 @@ function fmtDate(iso: string | null | undefined): string {
     if (isNaN(nowPct)) return
 
     const labelCell = board.querySelector<HTMLElement>('.hd-label')
-    const labelWidth = labelCell?.offsetWidth ?? 300
+    const labelWidth = labelCell?.offsetWidth ?? 300 // fallback matches --col-label-w
     const timelineWidth = board.scrollWidth - labelWidth
     const nowPxFromBoardLeft = labelWidth + (nowPct / 100) * timelineWidth
 

From 28a30e1395c12e41e8fc12a01271b455f8771be2 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 11:38:30 +0200
Subject: [PATCH 07/20] Attempt 2

---
 src/components/RoadmapBoard.astro | 247 ++++++++++++++----------------
 1 file changed, 115 insertions(+), 132 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index d178afd3..f2d812e9 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -55,12 +55,12 @@ function fmtDate(iso: string | null | undefined): string {
 
   <!--
     .board-frame clips children to the border-radius without becoming a
-    scroll container (overflow: clip does not create one).
+    scroll container (overflow: clip does not create one, unlike overflow: hidden).
     .board-scroll uses overflow-y: clip for the same reason — so that
-    position: sticky on thead cells references the viewport, not this element.
+    <thead> can use position: sticky relative to the viewport.
   -->
   <div class="board-frame" style={`--n-months: ${nMonths}`}>
-    <div class="board-scroll" tabindex="0" aria-label="Project timeline">
+    <div class="board-scroll">
       <table
         class="board"
         style={`--now-pct: ${nowLeft}%`}
@@ -72,9 +72,11 @@ function fmtDate(iso: string | null | undefined): string {
         </colgroup>
 
         <thead>
-          <!-- Row 1: "Team / Project" corner label (rowspan 2) + quarter headers -->
+          <!-- col 1, rows 1–2: "Project" label spans both header rows -->
           <tr>
             <th class="hd-label" rowspan="2" scope="col">Team / Project</th>
+
+            <!-- row 1: Quarter header cells -->
             {
               quarterHeaders.map((qh) => (
                 <th
@@ -94,7 +96,8 @@ function fmtDate(iso: string | null | undefined): string {
               ))
             }
           </tr>
-          <!-- Row 2: Month headers -->
+
+          <!-- row 2: Month header cells -->
           <tr>
             {
               months.map((m) => (
@@ -132,7 +135,7 @@ function fmtDate(iso: string | null | undefined): string {
                       style={`background: ${teamColor}33; --team-color: ${teamColor}`}
                     >
                       <span
-                        class="team-header-name"
+                        class="team-header-label"
                         style={`background: color-mix(in srgb, ${teamColor} 20%, white)`}
                       >
                         {team.name}
@@ -166,7 +169,7 @@ function fmtDate(iso: string | null | undefined): string {
 
               return (
                 <tr>
-                  {/* Project label */}
+                  {/* Project label — col 1, explicit row */}
                   <th
                     class="proj-label"
                     scope="row"
@@ -181,7 +184,8 @@ function fmtDate(iso: string | null | undefined): string {
                       <span class="proj-name-text">{proj.name}</span>
                     </span>
                   </th>
-                  {/* Project timeline track */}
+
+                  {/* Project timeline track — cols 2 to last, explicit row */}
                   <td
                     class="proj-track"
                     colspan={nMonths}
@@ -207,7 +211,12 @@ function fmtDate(iso: string | null | undefined): string {
                       <div
                         class="proj-bar"
                         aria-hidden="true"
-                        style={`left: ${barLeft}%; width: ${barWidth}%; background: ${projColor}40; border: 1.5px solid ${projColor}aa;`}
+                        style={`
+                          left: ${barLeft}%;
+                          width: ${barWidth}%;
+                          background: ${projColor}40;
+                          border: 1.5px solid ${projColor}aa;
+                        `}
                       />
                     )}
 
@@ -216,7 +225,11 @@ function fmtDate(iso: string | null | undefined): string {
                       <div
                         class="proj-bar proj-bar--extension"
                         aria-hidden="true"
-                        style={`left: ${extensionLeft}%; width: ${extensionWidth}%; border-color: ${projColor}88;`}
+                        style={`
+                          left: ${extensionLeft}%;
+                          width: ${extensionWidth}%;
+                          border-color: ${projColor}88;
+                        `}
                         title="Milestones extend past the project target date"
                       />
                     )}
@@ -226,7 +239,12 @@ function fmtDate(iso: string | null | undefined): string {
                       <div
                         class="proj-bar proj-bar--completed"
                         aria-hidden="true"
-                        style={`left: ${completedBarLeft}%; width: ${completedBarWidth}%; background: ${projColor}28; border-color: ${projColor}99;`}
+                        style={`
+                          left: ${completedBarLeft}%;
+                          width: ${completedBarWidth}%;
+                          background: ${projColor}28;
+                          border-color: ${projColor}99;
+                        `}
                         title="Completed"
                       />
                     )}
@@ -239,12 +257,9 @@ function fmtDate(iso: string | null | undefined): string {
                       return (
                         <button
                           class="ms-pin"
-                          aria-label={
-                            ms.targetDate
-                              ? `${ms.name}, due ${fmtDate(ms.targetDate)}`
-                              : ms.name
-                          }
+                          aria-label={ms.name}
                           style={`left: ${left}%`}
+                          title={ms.name}
                         >
                           <span
                             class="ms-diamond"
@@ -254,14 +269,6 @@ function fmtDate(iso: string | null | undefined): string {
                           <span class="ms-pin-name" aria-hidden="true">
                             {ms.name}
                           </span>
-                          <span class="ms-pin-tooltip" aria-hidden="true">
-                            {ms.name}
-                            {ms.targetDate && (
-                              <span class="ms-pin-tooltip-date">
-                                Due {fmtDate(ms.targetDate)}
-                              </span>
-                            )}
-                          </span>
                         </button>
                       )
                     })}
@@ -286,22 +293,18 @@ function fmtDate(iso: string | null | undefined): string {
   /*
     Frame: provides the border, border-radius, and box-shadow for the whole board.
     overflow: clip clips children to the border-radius WITHOUT creating a scroll
-    container, so thead th can use position: sticky relative to the viewport.
+    container, so <thead> can use position: sticky relative to the viewport.
   */
   .board-frame {
     border: 1px solid #e5e7eb;
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     overflow: clip;
-    --col-label-w: 300px;
-    --col-month-w: 88px;
-    --row-h: 3.25rem;
   }
 
   /*
-    overflow-y: clip (unlike overflow-y: auto/hidden) does not create a scroll
-    container, so position: sticky on thead cells references the viewport rather
-    than this element.
+    overflow-y: clip does not create a scroll container (unlike overflow-y: hidden),
+    so position: sticky on <thead> references the viewport rather than this element.
   */
   .board-scroll {
     overflow-x: auto;
@@ -313,32 +316,30 @@ function fmtDate(iso: string | null | undefined): string {
     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 0;
-    width: max(
-      calc(var(--col-label-w) + var(--n-months) * var(--col-month-w)),
-      100%
-    );
+    width: max(calc(300px + var(--n-months) * 88px), 100%);
     font-family: 'Titillium', Arial, sans-serif;
     font-size: var(--step--1);
     color: #1a1a1a;
   }
 
   .col-label {
-    width: var(--col-label-w);
+    width: 300px;
   }
 
   .col-month {
-    width: var(--col-month-w);
+    width: 88px;
   }
 
-  /* ── Sticky thead ── */
   /*
-    Sticky is on <thead> itself, not individual <th> cells, so both header rows
-    (quarters + months) move as a single unit and don't overlap each other.
+    Sticky is on <thead> itself so both header rows (quarters + months) move as
+    a single unit and don't overlap each other.
   */
   thead {
     position: sticky;
     top: var(--site-header-height);
-    z-index: 10;
+    z-index: 15;
+    background: #f9fafb;
+    border-bottom: 2px solid #e5e7eb;
   }
 
   thead th {
@@ -349,7 +350,7 @@ function fmtDate(iso: string | null | undefined): string {
     border-bottom: 2px solid #e5e7eb;
   }
 
-  /* ── "Team / Project" corner cell — sticky on both axes ── */
+  /* ── "Project" label — sticky left so it stays visible on horizontal scroll ── */
   .hd-label {
     position: sticky;
     left: 0;
@@ -441,7 +442,7 @@ function fmtDate(iso: string | null | undefined): string {
     padding: 0;
   }
 
-  .team-header-name {
+  .team-header-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
@@ -464,7 +465,7 @@ function fmtDate(iso: string | null | undefined): string {
     padding: 0 0.75rem;
     display: flex;
     align-items: center;
-    min-height: var(--row-h);
+    min-height: 3.25rem;
   }
 
   .proj-name {
@@ -492,7 +493,7 @@ function fmtDate(iso: string | null | undefined): string {
   /* ── Project timeline track ── */
   .proj-track {
     position: relative;
-    height: var(--row-h);
+    min-height: 3.25rem;
     overflow: visible;
   }
 
@@ -566,21 +567,10 @@ function fmtDate(iso: string | null | undefined): string {
     transition: transform 150ms ease;
   }
 
-  .ms-pin:hover .ms-diamond,
-  .ms-pin:focus-visible .ms-diamond {
+  .ms-pin:hover .ms-diamond {
     transform: rotate(45deg) scale(1.3);
   }
 
-  .ms-pin:focus-visible {
-    outline: none;
-  }
-
-  .ms-pin:focus-visible .ms-diamond {
-    box-shadow:
-      0 0 0 2px white,
-      0 0 0 4px var(--color-primary);
-  }
-
   .ms-pin-name {
     font-size: 0.58rem;
     font-weight: 600;
@@ -594,62 +584,7 @@ function fmtDate(iso: string | null | undefined): string {
     line-height: 1.2;
   }
 
-  /* ── Scrollable region focus ── */
-  .board-scroll:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
-  }
-
-  /* ── Milestone tooltip (all screen sizes) ── */
-  .ms-pin:hover,
-  .ms-pin--active {
-    z-index: 10;
-  }
-
-  .ms-pin-tooltip {
-    display: none;
-    position: absolute;
-    bottom: calc(100% + 8px);
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(25, 25, 25, 0.92);
-    color: #fff;
-    padding: 5px 8px;
-    border-radius: 5px;
-    font-size: 0.65rem;
-    font-weight: 600;
-    white-space: normal;
-    max-width: 130px;
-    text-align: center;
-    line-height: 1.3;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-    pointer-events: none;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .ms-pin-tooltip-date {
-    font-weight: 400;
-    opacity: 0.85;
-  }
-
-  .ms-pin:hover .ms-pin-tooltip,
-  .ms-pin--active .ms-pin-tooltip {
-    display: flex;
-  }
-
-  .ms-pin:hover .ms-pin-tooltip::after,
-  .ms-pin--active .ms-pin-tooltip::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 5px solid transparent;
-    border-top-color: rgba(25, 25, 25, 0.92);
-  }
-
-  /* ── Scrollbar ── */
+  /* ── Scrollbar (body only) ── */
   .board-scroll::-webkit-scrollbar {
     height: 6px;
   }
@@ -686,33 +621,37 @@ function fmtDate(iso: string | null | undefined): string {
     background: #e5e7eb;
   }
 
-  .mobile-toggle-btn:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-  }
-
   /* ── Mobile breakpoint ── */
   @media (max-width: 767px) {
+    /* Show toggle button */
     .mobile-toggle-wrap {
       display: flex;
     }
 
     /* Compact column widths — quarter headers still span their months correctly */
-    .board-frame {
-      --col-label-w: 130px;
-      --col-month-w: 24px;
+    .board {
+      width: max(calc(130px + var(--n-months) * 24px), 100%);
     }
 
-    /* Hide month label text (keep cells for column structure) */
+    .col-label {
+      width: 130px;
+    }
+
+    .col-month {
+      width: 24px;
+    }
+
+    /* Collapse month header row (keep in DOM so column structure stays correct) */
     .hd-month {
-      overflow: hidden;
+      height: 0;
+      min-height: 0;
       padding: 0;
-      font-size: 0;
       border: none;
-      height: 0;
+      overflow: hidden;
       visibility: hidden;
     }
 
+    /* Narrow label column */
     .proj-name-text {
       max-width: 96px;
     }
@@ -722,22 +661,66 @@ function fmtDate(iso: string | null | undefined): string {
       display: none;
     }
 
+    /* Tappable pins */
     .ms-pin {
       cursor: pointer;
     }
 
+    /* Tooltip popup on tap */
+    .ms-pin--active {
+      z-index: 10;
+    }
+
+    .ms-pin--active .ms-pin-name {
+      display: block;
+      position: absolute;
+      bottom: calc(100% + 8px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(25, 25, 25, 0.92);
+      color: #fff;
+      padding: 5px 8px;
+      border-radius: 5px;
+      font-size: 0.65rem;
+      font-weight: 600;
+      white-space: normal;
+      max-width: 130px;
+      text-align: center;
+      line-height: 1.3;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+      pointer-events: none;
+    }
+
+    /* Arrow pointing down */
+    .ms-pin--active .ms-pin-name::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 5px solid transparent;
+      border-top-color: rgba(25, 25, 25, 0.92);
+    }
+
     /* ── "Full timeline" mode: restore month-column view ── */
-    .board-outer--full .board-frame {
-      --col-label-w: 300px;
-      --col-month-w: 88px;
+    .board-outer--full .board {
+      width: max(calc(300px + var(--n-months) * 88px), 100%);
+    }
+
+    .board-outer--full .col-label {
+      width: 300px;
+    }
+
+    .board-outer--full .col-month {
+      width: 88px;
     }
 
     .board-outer--full .hd-month {
-      overflow: visible;
+      height: auto;
+      min-height: unset;
       padding: 0.25rem 0.5rem;
-      font-size: var(--step--2);
       border-right: 1px solid #e8e8e8;
-      height: auto;
+      overflow: visible;
       visibility: visible;
     }
 
@@ -763,7 +746,7 @@ function fmtDate(iso: string | null | undefined): string {
     if (isNaN(nowPct)) return
 
     const labelCell = board.querySelector<HTMLElement>('.hd-label')
-    const labelWidth = labelCell?.offsetWidth ?? 300 // fallback matches --col-label-w
+    const labelWidth = labelCell?.offsetWidth ?? 300
     const timelineWidth = board.scrollWidth - labelWidth
     const nowPxFromBoardLeft = labelWidth + (nowPct / 100) * timelineWidth
 

From 10b30098590b8b56aedf9e26bde015db9b41bc34 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 11:47:12 +0200
Subject: [PATCH 08/20] Attempt 2

---
 src/components/RoadmapBoard.astro | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index f2d812e9..a1bedb84 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -338,8 +338,6 @@ function fmtDate(iso: string | null | undefined): string {
     position: sticky;
     top: var(--site-header-height);
     z-index: 15;
-    background: #f9fafb;
-    border-bottom: 2px solid #e5e7eb;
   }
 
   thead th {
@@ -358,13 +356,12 @@ function fmtDate(iso: string | null | undefined): string {
     background: #f9fafb;
     border-right: 1px solid #e5e7eb;
     padding: 0 0.75rem;
-    display: flex;
-    align-items: center;
     font-weight: 700;
     font-size: var(--step--2);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #555;
+    vertical-align: middle;
   }
 
   /* ── Quarter header cells (row 1) ── */
@@ -378,9 +375,8 @@ function fmtDate(iso: string | null | undefined): string {
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #555;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    text-align: center;
+    vertical-align: middle;
     white-space: nowrap;
   }
 
@@ -398,10 +394,7 @@ function fmtDate(iso: string | null | undefined): string {
     font-weight: 500;
     color: #777;
     text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2px;
+    vertical-align: middle;
     white-space: nowrap;
   }
 
@@ -416,7 +409,7 @@ function fmtDate(iso: string | null | undefined): string {
   }
 
   .now-badge {
-    display: inline-block;
+    display: block;
     font-size: 0.55rem;
     font-weight: 700;
     background: var(--color-primary);
@@ -463,9 +456,8 @@ function fmtDate(iso: string | null | undefined): string {
     /* background-color set via inline style as opaque color-mix() */
     border-right: 1px solid var(--team-color);
     padding: 0 0.75rem;
-    display: flex;
-    align-items: center;
-    min-height: 3.25rem;
+    vertical-align: middle;
+    height: 3.25rem;
   }
 
   .proj-name {

From 7d9f0b4e9c8e3436550437b8c9db4c1be2f4b409 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 12:01:43 +0200
Subject: [PATCH 09/20] Attempt 2

---
 src/components/RoadmapBoard.astro | 71 ++++++++++++++++++++++---------
 1 file changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index a1bedb84..986701fd 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -134,12 +134,7 @@ function fmtDate(iso: string | null | undefined): string {
                       scope="rowgroup"
                       style={`background: ${teamColor}33; --team-color: ${teamColor}`}
                     >
-                      <span
-                        class="team-header-label"
-                        style={`background: color-mix(in srgb, ${teamColor} 20%, white)`}
-                      >
-                        {team.name}
-                      </span>
+                      <span class="team-header-label">{team.name}</span>
                     </th>
                     <td
                       class="team-header-track"
@@ -334,17 +329,26 @@ function fmtDate(iso: string | null | undefined): string {
     Sticky is on <thead> itself so both header rows (quarters + months) move as
     a single unit and don't overlap each other.
   */
-  thead {
-    position: sticky;
-    top: var(--site-header-height);
-    z-index: 15;
-  }
-
   thead th {
     background: #f9fafb;
   }
 
+  /*
+    Sticky on individual cells, not <thead> itself — thead-level sticky pushes
+    the element down by the top value in some browsers, creating a visible gap.
+    Quarter row cells stick at the site header; month row cells stick just below.
+  */
+  thead tr:first-child th {
+    position: sticky;
+    top: var(--site-header-height);
+    z-index: 13;
+    height: 2rem;
+  }
+
   thead tr:last-child th {
+    position: sticky;
+    top: calc(var(--site-header-height) + 2rem);
+    z-index: 12;
     border-bottom: 2px solid #e5e7eb;
   }
 
@@ -352,7 +356,7 @@ function fmtDate(iso: string | null | undefined): string {
   .hd-label {
     position: sticky;
     left: 0;
-    z-index: 5;
+    z-index: 14;
     background: #f9fafb;
     border-right: 1px solid #e5e7eb;
     padding: 0 0.75rem;
@@ -563,17 +567,42 @@ function fmtDate(iso: string | null | undefined): string {
     transform: rotate(45deg) scale(1.3);
   }
 
+  .ms-pin:hover {
+    z-index: 10;
+  }
+
   .ms-pin-name {
-    font-size: 0.58rem;
+    display: none;
+  }
+
+  .ms-pin:hover .ms-pin-name {
+    display: block;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(25, 25, 25, 0.92);
+    color: #fff;
+    padding: 5px 8px;
+    border-radius: 5px;
+    font-size: 0.65rem;
     font-weight: 600;
-    color: #444;
+    white-space: normal;
+    max-width: 130px;
     text-align: center;
-    max-width: 72px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-top: 0.25rem;
-    line-height: 1.2;
+    line-height: 1.3;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+  }
+
+  .ms-pin:hover .ms-pin-name::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: rgba(25, 25, 25, 0.92);
   }
 
   /* ── Scrollbar (body only) ── */

From 59d226ca64b12f163676fe6cf16ceded89cd808c Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 12:11:26 +0200
Subject: [PATCH 10/20] Attempt 2

---
 src/components/RoadmapBoard.astro | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 986701fd..b22a7066 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -298,12 +298,13 @@ function fmtDate(iso: string | null | undefined): string {
   }
 
   /*
-    overflow-y: clip does not create a scroll container (unlike overflow-y: hidden),
-    so position: sticky on <thead> references the viewport rather than this element.
+    Both axes scroll here. This makes .board-scroll the scroll container for the
+    sticky <thead> — which is the only reliable cross-browser way to have a sticky
+    table header inside a horizontally-scrolling table.
   */
   .board-scroll {
-    overflow-x: auto;
-    overflow-y: clip;
+    overflow: auto;
+    max-height: calc(100dvh - var(--site-header-height) - 4rem);
   }
 
   /* ── Table ── */
@@ -340,14 +341,14 @@ function fmtDate(iso: string | null | undefined): string {
   */
   thead tr:first-child th {
     position: sticky;
-    top: var(--site-header-height);
+    top: 0;
     z-index: 13;
     height: 2rem;
   }
 
   thead tr:last-child th {
     position: sticky;
-    top: calc(var(--site-header-height) + 2rem);
+    top: 2rem;
     z-index: 12;
     border-bottom: 2px solid #e5e7eb;
   }
@@ -355,6 +356,7 @@ function fmtDate(iso: string | null | undefined): string {
   /* ── "Project" label — sticky left so it stays visible on horizontal scroll ── */
   .hd-label {
     position: sticky;
+    top: 0;
     left: 0;
     z-index: 14;
     background: #f9fafb;

From f65a4d3f8dbfa045431d69da071e1f4583cc1bf3 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 12:40:54 +0200
Subject: [PATCH 11/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 117 +++++++++++++-----------------
 1 file changed, 51 insertions(+), 66 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index b22a7066..da742d1b 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -54,13 +54,18 @@ function fmtDate(iso: string | null | undefined): string {
   </div>
 
   <!--
-    .board-frame clips children to the border-radius without becoming a
-    scroll container (overflow: clip does not create one, unlike overflow: hidden).
-    .board-scroll uses overflow-y: clip for the same reason — so that
-    <thead> can use position: sticky relative to the viewport.
+    .board-frame clips children to the border-radius (overflow: clip) without
+    becoming a scroll container, so the border-radius applies cleanly.
+    .board-scroll is the actual scroll container for both axes; its flex: 1
+    height is calculated by the flex chain from the page layout.
   -->
   <div class="board-frame" style={`--n-months: ${nMonths}`}>
-    <div class="board-scroll">
+    <div
+      class="board-scroll"
+      role="region"
+      tabindex="0"
+      aria-label="Project timeline"
+    >
       <table
         class="board"
         style={`--now-pct: ${nowLeft}%`}
@@ -134,7 +139,12 @@ function fmtDate(iso: string | null | undefined): string {
                       scope="rowgroup"
                       style={`background: ${teamColor}33; --team-color: ${teamColor}`}
                     >
-                      <span class="team-header-label">{team.name}</span>
+                      <span
+                        class="team-header-label"
+                        style={`background: color-mix(in srgb, ${teamColor} 20%, white)`}
+                      >
+                        {team.name}
+                      </span>
                     </th>
                     <td
                       class="team-header-track"
@@ -283,28 +293,35 @@ function fmtDate(iso: string | null | undefined): string {
   .board-outer {
     max-width: var(--max-content-width);
     margin-inline: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    width: 100%;
   }
 
-  /*
-    Frame: provides the border, border-radius, and box-shadow for the whole board.
-    overflow: clip clips children to the border-radius WITHOUT creating a scroll
-    container, so <thead> can use position: sticky relative to the viewport.
-  */
+  /* Frame: clips children to the border-radius and passes height down. */
   .board-frame {
     border: 1px solid #e5e7eb;
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     overflow: clip;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
   }
 
   /*
-    Both axes scroll here. This makes .board-scroll the scroll container for the
-    sticky <thead> — which is the only reliable cross-browser way to have a sticky
-    table header inside a horizontally-scrolling table.
+    The scroll container for the table. overflow: auto triggers both scrollbars
+    when content exceeds the container. flex: 1 + min-height: 0 fills exactly
+    the remaining height calculated by the flex chain from the page layout,
+    so no magic numbers are needed. Sticky <thead> cells reference this element.
   */
   .board-scroll {
     overflow: auto;
-    max-height: calc(100dvh - var(--site-header-height) - 4rem);
+    flex: 1;
+    min-height: 0;
   }
 
   /* ── Table ── */
@@ -326,39 +343,31 @@ function fmtDate(iso: string | null | undefined): string {
     width: 88px;
   }
 
-  /*
-    Sticky is on <thead> itself so both header rows (quarters + months) move as
-    a single unit and don't overlap each other.
-  */
-  thead th {
-    background: #f9fafb;
-  }
-
-  /*
-    Sticky on individual cells, not <thead> itself — thead-level sticky pushes
-    the element down by the top value in some browsers, creating a visible gap.
-    Quarter row cells stick at the site header; month row cells stick just below.
-  */
+  /* Quarter row sticks at the top of the scroll container. */
   thead tr:first-child th {
     position: sticky;
     top: 0;
-    z-index: 13;
+    z-index: 2;
     height: 2rem;
+    background: #f9fafb;
   }
 
+  /* Month row sticks immediately below the quarter row. */
   thead tr:last-child th {
     position: sticky;
     top: 2rem;
-    z-index: 12;
+    z-index: 2;
+    background: #f9fafb;
     border-bottom: 2px solid #e5e7eb;
   }
 
   /* ── "Project" label — sticky left so it stays visible on horizontal scroll ── */
+  /* Corner cell — sticky on both axes, must outrank all other sticky cells. */
   .hd-label {
     position: sticky;
     top: 0;
     left: 0;
-    z-index: 14;
+    z-index: 3;
     background: #f9fafb;
     border-right: 1px solid #e5e7eb;
     padding: 0 0.75rem;
@@ -416,6 +425,7 @@ function fmtDate(iso: string | null | undefined): string {
 
   .now-badge {
     display: block;
+    margin: 2px auto 0;
     font-size: 0.55rem;
     font-weight: 700;
     background: var(--color-primary);
@@ -430,7 +440,7 @@ function fmtDate(iso: string | null | undefined): string {
   .team-header {
     position: sticky;
     left: 0;
-    z-index: 4;
+    z-index: 1;
     border-top: 1px solid color-mix(in srgb, var(--team-color) 50%, transparent);
     border-bottom: 1px solid
       color-mix(in srgb, var(--team-color) 50%, transparent);
@@ -458,7 +468,7 @@ function fmtDate(iso: string | null | undefined): string {
   .proj-label {
     position: sticky;
     left: 0;
-    z-index: 4;
+    z-index: 1;
     /* background-color set via inline style as opaque color-mix() */
     border-right: 1px solid var(--team-color);
     padding: 0 0.75rem;
@@ -569,42 +579,17 @@ function fmtDate(iso: string | null | undefined): string {
     transform: rotate(45deg) scale(1.3);
   }
 
-  .ms-pin:hover {
-    z-index: 10;
-  }
-
   .ms-pin-name {
-    display: none;
-  }
-
-  .ms-pin:hover .ms-pin-name {
-    display: block;
-    position: absolute;
-    bottom: calc(100% + 8px);
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(25, 25, 25, 0.92);
-    color: #fff;
-    padding: 5px 8px;
-    border-radius: 5px;
-    font-size: 0.65rem;
+    font-size: 0.58rem;
     font-weight: 600;
-    white-space: normal;
-    max-width: 130px;
+    color: #444;
     text-align: center;
-    line-height: 1.3;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-    pointer-events: none;
-  }
-
-  .ms-pin:hover .ms-pin-name::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 5px solid transparent;
-    border-top-color: rgba(25, 25, 25, 0.92);
+    max-width: 72px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-top: 0.25rem;
+    line-height: 1.2;
   }
 
   /* ── Scrollbar (body only) ── */

From e9dcc8210b15f5c0f4ee4fbc67af63b45fcc6e7b Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 12:45:28 +0200
Subject: [PATCH 12/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index da742d1b..e1fc4ea3 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -313,15 +313,22 @@ function fmtDate(iso: string | null | undefined): string {
   }
 
   /*
-    The scroll container for the table. overflow: auto triggers both scrollbars
-    when content exceeds the container. flex: 1 + min-height: 0 fills exactly
-    the remaining height calculated by the flex chain from the page layout,
-    so no magic numbers are needed. Sticky <thead> cells reference this element.
+    The scroll container. overflow: auto triggers both scrollbars when content
+    exceeds the container — sticky <thead> cells reference this element.
+
+    max-height is calculated by subtracting every element above the board from
+    the viewport height using the actual design tokens:
+      - site header
+      - hero section: padding-block (2 × space-xl) + heading (step-5 × 1.2 line-height)
+                      + heading margin (space-xs) + paragraph (~2 lines of step-0)
+      - board-section top padding (space-m)
   */
   .board-scroll {
     overflow: auto;
-    flex: 1;
-    min-height: 0;
+    max-height: calc(
+      100dvh - var(--site-header-height) - 2 * var(--space-xl) - 1.2 *
+        var(--step-5) - var(--space-xs) - 3 * var(--step-0) - var(--space-m)
+    );
   }
 
   /* ── Table ── */

From c65b90f8d7dd5ffd0612729e228a9457d66169d2 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 13:28:56 +0200
Subject: [PATCH 13/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 385 +++++++++++++++++++-----------
 1 file changed, 252 insertions(+), 133 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index e1fc4ea3..70bf1028 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -22,6 +22,7 @@ const months = buildMonths(minDate, maxDate)
 const quarterHeaders = buildQuarterHeaders(months)
 
 const nMonths = months.length
+const nQuarters = quarterHeaders.length
 
 const timelineStart = months[0].start.getTime()
 const timelineEnd = months[months.length - 1].end.getTime()
@@ -54,79 +55,113 @@ function fmtDate(iso: string | null | undefined): string {
   </div>
 
   <!--
-    .board-frame clips children to the border-radius (overflow: clip) without
-    becoming a scroll container, so the border-radius applies cleanly.
-    .board-scroll is the actual scroll container for both axes; its flex: 1
-    height is calculated by the flex chain from the page layout.
+    .board-frame clips children to the border-radius without becoming a
+    scroll container (overflow: clip does not create one, unlike overflow: hidden).
+    This lets .board-header-sticky use position: sticky relative to the viewport.
   -->
-  <div class="board-frame" style={`--n-months: ${nMonths}`}>
-    <div
-      class="board-scroll"
-      role="region"
-      tabindex="0"
-      aria-label="Project timeline"
-    >
+  <div
+    class="board-frame"
+    style={`--n-months: ${nMonths}; --n-quarters: ${nQuarters}`}
+  >
+    <!--
+      Sticky header table — lives OUTSIDE .board-scroll so it can pin to the
+      viewport. aria-hidden because column context is conveyed via aria-label
+      on each body row's track cell. JS keeps scrollLeft in sync with .board-scroll.
+    -->
+    <div class="board-header-sticky" aria-hidden="true">
+      <div class="board-header-inner">
+        <table class="board-header-table">
+          <colgroup>
+            <col class="col-label" />
+            {months.map(() => <col class="col-month" />)}
+          </colgroup>
+          <thead>
+            <!-- col 1, rows 1–2: "Project" label spans both header rows -->
+            <tr>
+              <th class="hd-label" rowspan="2">Team / Project</th>
+
+              <!-- row 1: Quarter header cells (desktop: month-based spans) -->
+              {
+                quarterHeaders.map((qh) => (
+                  <th
+                    class:list={[
+                      'hd-quarter',
+                      'hd-quarter--desktop',
+                      {
+                        'hd-quarter--current':
+                          qh.q === Math.floor(nowMonth / 3) + 1 &&
+                          qh.year === nowYear
+                      }
+                    ]}
+                    colspan={qh.span}
+                  >
+                    {qh.label}
+                  </th>
+                ))
+              }
+
+              <!-- row 1: Quarter header cells (mobile: one column each) -->
+              {
+                quarterHeaders.map((qh) => (
+                  <th
+                    class:list={[
+                      'hd-quarter',
+                      'hd-quarter--mobile',
+                      {
+                        'hd-quarter--current':
+                          qh.q === Math.floor(nowMonth / 3) + 1 &&
+                          qh.year === nowYear
+                      }
+                    ]}
+                  >
+                    {qh.label}
+                  </th>
+                ))
+              }
+            </tr>
+
+            <!-- row 2: Month header cells -->
+            <tr>
+              {
+                months.map((m) => (
+                  <th
+                    class:list={[
+                      'hd-month',
+                      {
+                        'hd-month--current':
+                          m.year === nowYear && m.month === nowMonth
+                      },
+                      { 'hd-month--qstart': m.isQuarterStart }
+                    ]}
+                  >
+                    {m.label}
+                    {m.year === nowYear && m.month === nowMonth && (
+                      <span class="now-badge">Now</span>
+                    )}
+                  </th>
+                ))
+              }
+            </tr>
+          </thead>
+        </table>
+      </div>
+    </div>
+
+    <!-- ── Scrollable body — project rows only ── -->
+    <div class="board-scroll">
       <table
         class="board"
         style={`--now-pct: ${nowLeft}%`}
         aria-label="Projects"
       >
+        <caption class="visually-hidden">
+          Project roadmap timeline showing each project's duration bar from
+          start to target date, grouped by team.
+        </caption>
         <colgroup>
           <col class="col-label" />
           {months.map(() => <col class="col-month" />)}
         </colgroup>
-
-        <thead>
-          <!-- col 1, rows 1–2: "Project" label spans both header rows -->
-          <tr>
-            <th class="hd-label" rowspan="2" scope="col">Team / Project</th>
-
-            <!-- row 1: Quarter header cells -->
-            {
-              quarterHeaders.map((qh) => (
-                <th
-                  class:list={[
-                    'hd-quarter',
-                    {
-                      'hd-quarter--current':
-                        qh.q === Math.floor(nowMonth / 3) + 1 &&
-                        qh.year === nowYear
-                    }
-                  ]}
-                  colspan={qh.span}
-                  scope="colgroup"
-                >
-                  {qh.label}
-                </th>
-              ))
-            }
-          </tr>
-
-          <!-- row 2: Month header cells -->
-          <tr>
-            {
-              months.map((m) => (
-                <th
-                  class:list={[
-                    'hd-month',
-                    {
-                      'hd-month--current':
-                        m.year === nowYear && m.month === nowMonth
-                    },
-                    { 'hd-month--qstart': m.isQuarterStart }
-                  ]}
-                  scope="col"
-                >
-                  {m.label}
-                  {m.year === nowYear && m.month === nowMonth && (
-                    <span class="now-badge">Now</span>
-                  )}
-                </th>
-              ))
-            }
-          </tr>
-        </thead>
-
         <tbody>
           {
             gridItems.map((item) => {
@@ -134,22 +169,23 @@ function fmtDate(iso: string | null | undefined): string {
                 const { team, teamColor } = item
                 return (
                   <tr>
+                    {/* Team header label — sticky left */}
                     <th
                       class="team-header"
                       scope="rowgroup"
                       style={`background: ${teamColor}33; --team-color: ${teamColor}`}
                     >
-                      <span
+                      <div
                         class="team-header-label"
                         style={`background: color-mix(in srgb, ${teamColor} 20%, white)`}
                       >
                         {team.name}
-                      </span>
+                      </div>
                     </th>
+                    {/* Team header track — fills the timeline columns */}
                     <td
                       class="team-header-track"
                       colspan={nMonths}
-                      aria-hidden="true"
                       style={`background: ${teamColor}33; --team-color: ${teamColor}`}
                     />
                   </tr>
@@ -174,7 +210,7 @@ function fmtDate(iso: string | null | undefined): string {
 
               return (
                 <tr>
-                  {/* Project label — col 1, explicit row */}
+                  {/* Project label — col 1, sticky left */}
                   <th
                     class="proj-label"
                     scope="row"
@@ -190,7 +226,7 @@ function fmtDate(iso: string | null | undefined): string {
                     </span>
                   </th>
 
-                  {/* Project timeline track — cols 2 to last, explicit row */}
+                  {/* Project timeline track */}
                   <td
                     class="proj-track"
                     colspan={nMonths}
@@ -293,45 +329,60 @@ function fmtDate(iso: string | null | undefined): string {
   .board-outer {
     max-width: var(--max-content-width);
     margin-inline: auto;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    width: 100%;
   }
 
-  /* Frame: clips children to the border-radius and passes height down. */
+  /*
+    Frame: provides the border, border-radius, and box-shadow for the whole board.
+    overflow: clip clips children to the border-radius WITHOUT creating a scroll
+    container, so .board-header-sticky can use position: sticky relative to the
+    viewport (not relative to this element).
+  */
   .board-frame {
     border: 1px solid #e5e7eb;
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     overflow: clip;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
+  }
+
+  /* ── Sticky header ── */
+  .board-header-sticky {
+    position: sticky;
+    top: var(--site-header-height);
+    z-index: 15;
+    background: #f9fafb;
+    border-bottom: 2px solid #e5e7eb;
   }
 
   /*
-    The scroll container. overflow: auto triggers both scrollbars when content
-    exceeds the container — sticky <thead> cells reference this element.
-
-    max-height is calculated by subtracting every element above the board from
-    the viewport height using the actual design tokens:
-      - site header
-      - hero section: padding-block (2 × space-xl) + heading (step-5 × 1.2 line-height)
-                      + heading margin (space-xs) + paragraph (~2 lines of step-0)
-      - board-section top padding (space-m)
+    .board-header-inner scrolls horizontally to mirror .board-scroll,
+    but its scrollbar is hidden — scrolling is driven by JS sync.
   */
+  .board-header-inner {
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .board-header-inner::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Header table — same column template as .board */
+  .board-header-table {
+    table-layout: fixed;
+    border-collapse: separate;
+    border-spacing: 0;
+    width: max(calc(300px + var(--n-months) * 88px), 100%);
+    font-family: 'Titillium', Arial, sans-serif;
+    font-size: var(--step--1);
+    color: #1a1a1a;
+  }
+
+  /* ── Scrollable body ── */
   .board-scroll {
-    overflow: auto;
-    max-height: calc(
-      100dvh - var(--site-header-height) - 2 * var(--space-xl) - 1.2 *
-        var(--step-5) - var(--space-xs) - 3 * var(--step-0) - var(--space-m)
-    );
+    overflow-x: auto;
   }
 
-  /* ── Table ── */
+  /* ── Body table ── */
   .board {
     table-layout: fixed;
     border-collapse: separate;
@@ -342,6 +393,7 @@ function fmtDate(iso: string | null | undefined): string {
     color: #1a1a1a;
   }
 
+  /* Column widths — shared by both the header and body tables */
   .col-label {
     width: 300px;
   }
@@ -350,31 +402,11 @@ function fmtDate(iso: string | null | undefined): string {
     width: 88px;
   }
 
-  /* Quarter row sticks at the top of the scroll container. */
-  thead tr:first-child th {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    height: 2rem;
-    background: #f9fafb;
-  }
-
-  /* Month row sticks immediately below the quarter row. */
-  thead tr:last-child th {
-    position: sticky;
-    top: 2rem;
-    z-index: 2;
-    background: #f9fafb;
-    border-bottom: 2px solid #e5e7eb;
-  }
-
   /* ── "Project" label — sticky left so it stays visible on horizontal scroll ── */
-  /* Corner cell — sticky on both axes, must outrank all other sticky cells. */
   .hd-label {
     position: sticky;
-    top: 0;
     left: 0;
-    z-index: 3;
+    z-index: 5;
     background: #f9fafb;
     border-right: 1px solid #e5e7eb;
     padding: 0 0.75rem;
@@ -432,7 +464,6 @@ function fmtDate(iso: string | null | undefined): string {
 
   .now-badge {
     display: block;
-    margin: 2px auto 0;
     font-size: 0.55rem;
     font-weight: 700;
     background: var(--color-primary);
@@ -441,13 +472,14 @@ function fmtDate(iso: string | null | undefined): string {
     padding: 0.1em 0.4em;
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    margin: 2px auto 0;
   }
 
   /* ── Team header row ── */
   .team-header {
     position: sticky;
     left: 0;
-    z-index: 1;
+    z-index: 4;
     border-top: 1px solid color-mix(in srgb, var(--team-color) 50%, transparent);
     border-bottom: 1px solid
       color-mix(in srgb, var(--team-color) 50%, transparent);
@@ -475,7 +507,7 @@ function fmtDate(iso: string | null | undefined): string {
   .proj-label {
     position: sticky;
     left: 0;
-    z-index: 1;
+    z-index: 4;
     /* background-color set via inline style as opaque color-mix() */
     border-right: 1px solid var(--team-color);
     padding: 0 0.75rem;
@@ -508,8 +540,9 @@ function fmtDate(iso: string | null | undefined): string {
   /* ── Project timeline track ── */
   .proj-track {
     position: relative;
-    min-height: 3.25rem;
+    height: 3.25rem;
     overflow: visible;
+    vertical-align: top;
   }
 
   /* "Today" vertical line */
@@ -586,17 +619,42 @@ function fmtDate(iso: string | null | undefined): string {
     transform: rotate(45deg) scale(1.3);
   }
 
+  .ms-pin:hover {
+    z-index: 10;
+  }
+
   .ms-pin-name {
-    font-size: 0.58rem;
+    display: none;
+  }
+
+  .ms-pin:hover .ms-pin-name {
+    display: block;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(25, 25, 25, 0.92);
+    color: #fff;
+    padding: 5px 8px;
+    border-radius: 5px;
+    font-size: 0.65rem;
     font-weight: 600;
-    color: #444;
+    white-space: normal;
+    max-width: 130px;
     text-align: center;
-    max-width: 72px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-top: 0.25rem;
-    line-height: 1.2;
+    line-height: 1.3;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+  }
+
+  .ms-pin:hover .ms-pin-name::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: rgba(25, 25, 25, 0.92);
   }
 
   /* ── Scrollbar (body only) ── */
@@ -636,6 +694,11 @@ function fmtDate(iso: string | null | undefined): string {
     background: #e5e7eb;
   }
 
+  /* Desktop: show month-based headers, hide mobile ones */
+  .hd-quarter--mobile {
+    display: none;
+  }
+
   /* ── Mobile breakpoint ── */
   @media (max-width: 767px) {
     /* Show toggle button */
@@ -643,9 +706,10 @@ function fmtDate(iso: string | null | undefined): string {
       display: flex;
     }
 
-    /* Compact column widths — quarter headers still span their months correctly */
+    /* Quarter-column widths for header and body */
+    .board-header-table,
     .board {
-      width: max(calc(130px + var(--n-months) * 24px), 100%);
+      width: max(calc(130px + var(--n-quarters) * 72px), 100%);
     }
 
     .col-label {
@@ -653,10 +717,20 @@ function fmtDate(iso: string | null | undefined): string {
     }
 
     .col-month {
-      width: 24px;
+      width: 0;
+      display: none;
     }
 
-    /* Collapse month header row (keep in DOM so column structure stays correct) */
+    /* Swap quarter header variants */
+    .hd-quarter--desktop {
+      display: none;
+    }
+    .hd-quarter--mobile {
+      display: table-cell;
+      width: 72px;
+    }
+
+    /* Collapse month header row */
     .hd-month {
       height: 0;
       min-height: 0;
@@ -718,6 +792,7 @@ function fmtDate(iso: string | null | undefined): string {
     }
 
     /* ── "Full timeline" mode: restore month-column view ── */
+    .board-outer--full .board-header-table,
     .board-outer--full .board {
       width: max(calc(300px + var(--n-months) * 88px), 100%);
     }
@@ -728,6 +803,15 @@ function fmtDate(iso: string | null | undefined): string {
 
     .board-outer--full .col-month {
       width: 88px;
+      display: table-column;
+    }
+
+    .board-outer--full .hd-quarter--desktop {
+      display: table-cell;
+    }
+
+    .board-outer--full .hd-quarter--mobile {
+      display: none;
     }
 
     .board-outer--full .hd-month {
@@ -747,6 +831,15 @@ function fmtDate(iso: string | null | undefined): string {
       display: block;
     }
   }
+
+  .visually-hidden {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
 </style>
 
 <script>
@@ -760,7 +853,7 @@ function fmtDate(iso: string | null | undefined): string {
     const nowPct = parseFloat(rawPct)
     if (isNaN(nowPct)) return
 
-    const labelCell = board.querySelector<HTMLElement>('.hd-label')
+    const labelCell = document.querySelector<HTMLElement>('.hd-label')
     const labelWidth = labelCell?.offsetWidth ?? 300
     const timelineWidth = board.scrollWidth - labelWidth
     const nowPxFromBoardLeft = labelWidth + (nowPct / 100) * timelineWidth
@@ -768,7 +861,29 @@ function fmtDate(iso: string | null | undefined): string {
     boardScroll.scrollLeft = nowPxFromBoardLeft - boardScroll.clientWidth / 2
   }
 
-  // Toggle between compact quarter view and full month view on mobile.
+  // Keep the sticky header in sync with the body's horizontal scroll (bidirectional).
+  function initScrollSync() {
+    const boardScroll = document.querySelector<HTMLElement>('.board-scroll')
+    const headerInner = document.querySelector<HTMLElement>(
+      '.board-header-inner'
+    )
+    if (!boardScroll || !headerInner) return
+    let syncing = false
+    boardScroll.addEventListener('scroll', () => {
+      if (syncing) return
+      syncing = true
+      headerInner.scrollLeft = boardScroll.scrollLeft
+      syncing = false
+    })
+    headerInner.addEventListener('scroll', () => {
+      if (syncing) return
+      syncing = true
+      boardScroll.scrollLeft = headerInner.scrollLeft
+      syncing = false
+    })
+  }
+
+  // Toggle between quarter view and full month view on mobile.
   document
     .querySelectorAll<HTMLButtonElement>('.mobile-toggle-btn')
     .forEach((btn) => {
@@ -783,8 +898,12 @@ function fmtDate(iso: string | null | undefined): string {
     })
 
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', centreOnNow)
+    document.addEventListener('DOMContentLoaded', () => {
+      initScrollSync()
+      centreOnNow()
+    })
   } else {
+    initScrollSync()
     centreOnNow()
   }
 

From 07029587408811103605e7a677a1fe080e39ebc5 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 14:34:17 +0200
Subject: [PATCH 14/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 70bf1028..9e4c7fbe 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -162,6 +162,28 @@ function fmtDate(iso: string | null | undefined): string {
           <col class="col-label" />
           {months.map(() => <col class="col-month" />)}
         </colgroup>
+
+        <!--
+          Semantic column headers for screen readers. Visually hidden — sighted
+          users see the sticky aria-hidden header above. This thead gives AT
+          proper column associations when navigating the table cells.
+        -->
+        <thead class="sr-only">
+          <tr>
+            <th scope="col" rowspan="2">Team / Project</th>
+            {
+              quarterHeaders.map((qh) => (
+                <th scope="colgroup" colspan={qh.span}>
+                  {qh.label}
+                </th>
+              ))
+            }
+          </tr>
+          <tr>
+            {months.map((m) => <th scope="col">{m.label}</th>)}
+          </tr>
+        </thead>
+
         <tbody>
           {
             gridItems.map((item) => {
@@ -832,7 +854,8 @@ function fmtDate(iso: string | null | undefined): string {
     }
   }
 
-  .visually-hidden {
+  .visually-hidden,
+  .sr-only {
     clip-path: inset(50%);
     height: 1px;
     overflow: hidden;

From 6341b6fc246ce35ef854605c9dafa843e4da8b29 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 14:40:56 +0200
Subject: [PATCH 15/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 63 +++++++++++--------------------
 1 file changed, 22 insertions(+), 41 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 9e4c7fbe..8ca3ccd9 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -322,7 +322,6 @@ function fmtDate(iso: string | null | undefined): string {
                           class="ms-pin"
                           aria-label={ms.name}
                           style={`left: ${left}%`}
-                          title={ms.name}
                         >
                           <span
                             class="ms-diamond"
@@ -637,11 +636,24 @@ function fmtDate(iso: string | null | undefined): string {
     transition: transform 150ms ease;
   }
 
-  .ms-pin:hover .ms-diamond {
+  .ms-pin:hover .ms-diamond,
+  .ms-pin:focus-visible .ms-diamond {
     transform: rotate(45deg) scale(1.3);
   }
 
-  .ms-pin:hover {
+  .ms-pin:focus-visible {
+    outline: none;
+  }
+
+  .ms-pin:focus-visible .ms-diamond {
+    box-shadow:
+      0 0 0 2px white,
+      0 0 0 4px var(--color-primary);
+  }
+
+  .ms-pin:hover,
+  .ms-pin:focus-visible,
+  .ms-pin--active {
     z-index: 10;
   }
 
@@ -649,7 +661,10 @@ function fmtDate(iso: string | null | undefined): string {
     display: none;
   }
 
-  .ms-pin:hover .ms-pin-name {
+  /* Tooltip visible on hover, keyboard focus, or click activation */
+  .ms-pin:hover .ms-pin-name,
+  .ms-pin:focus-visible .ms-pin-name,
+  .ms-pin--active .ms-pin-name {
     display: block;
     position: absolute;
     bottom: calc(100% + 8px);
@@ -669,7 +684,9 @@ function fmtDate(iso: string | null | undefined): string {
     pointer-events: none;
   }
 
-  .ms-pin:hover .ms-pin-name::after {
+  .ms-pin:hover .ms-pin-name::after,
+  .ms-pin:focus-visible .ms-pin-name::after,
+  .ms-pin--active .ms-pin-name::after {
     content: '';
     position: absolute;
     top: 100%;
@@ -777,42 +794,6 @@ function fmtDate(iso: string | null | undefined): string {
       cursor: pointer;
     }
 
-    /* Tooltip popup on tap */
-    .ms-pin--active {
-      z-index: 10;
-    }
-
-    .ms-pin--active .ms-pin-name {
-      display: block;
-      position: absolute;
-      bottom: calc(100% + 8px);
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgba(25, 25, 25, 0.92);
-      color: #fff;
-      padding: 5px 8px;
-      border-radius: 5px;
-      font-size: 0.65rem;
-      font-weight: 600;
-      white-space: normal;
-      max-width: 130px;
-      text-align: center;
-      line-height: 1.3;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-      pointer-events: none;
-    }
-
-    /* Arrow pointing down */
-    .ms-pin--active .ms-pin-name::after {
-      content: '';
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border: 5px solid transparent;
-      border-top-color: rgba(25, 25, 25, 0.92);
-    }
-
     /* ── "Full timeline" mode: restore month-column view ── */
     .board-outer--full .board-header-table,
     .board-outer--full .board {

From b47a2274528c2458dfbbc6ddde5d71045a896072 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 14:51:23 +0200
Subject: [PATCH 16/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 8ca3ccd9..232218d5 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -197,12 +197,7 @@ function fmtDate(iso: string | null | undefined): string {
                       scope="rowgroup"
                       style={`background: ${teamColor}33; --team-color: ${teamColor}`}
                     >
-                      <div
-                        class="team-header-label"
-                        style={`background: color-mix(in srgb, ${teamColor} 20%, white)`}
-                      >
-                        {team.name}
-                      </div>
+                      <div class="team-header-label">{team.name}</div>
                     </th>
                     {/* Team header track — fills the timeline columns */}
                     <td

From 7be4a6a5cd1862e5353dd2532ef7825960451325 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 14:55:38 +0200
Subject: [PATCH 17/20] chore: accessibility edits

---
 src/components/RoadmapBoard.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 232218d5..2037b0f6 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -622,8 +622,8 @@ function fmtDate(iso: string | null | undefined): string {
 
   .ms-diamond {
     display: block;
-    width: 10px;
-    height: 10px;
+    width: 20px;
+    height: 20px;
     border-radius: 2px;
     transform: rotate(45deg);
     flex-shrink: 0;

From 723c4135b41d99c7a088395667594863a56b50b9 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 15:04:31 +0200
Subject: [PATCH 18/20] increase z index of milestone tooltip

---
 src/components/RoadmapBoard.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 2037b0f6..7298becd 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -649,7 +649,7 @@ function fmtDate(iso: string | null | undefined): string {
   .ms-pin:hover,
   .ms-pin:focus-visible,
   .ms-pin--active {
-    z-index: 10;
+    z-index: 16;
   }
 
   .ms-pin-name {

From 93ac68d47458fddbc031971c19b7bfea955cbcbc Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 15:06:28 +0200
Subject: [PATCH 19/20] chore: remove project titles from mobile, full-screen
 milestones

---
 src/components/RoadmapBoard.astro | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index 7298becd..b848647d 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -824,10 +824,6 @@ function fmtDate(iso: string | null | undefined): string {
     .board-outer--full .proj-name-text {
       max-width: 240px;
     }
-
-    .board-outer--full .ms-pin-name {
-      display: block;
-    }
   }
 
   .visually-hidden,

From 0959a98909ee7bf4882c42a2e809ece5528319e3 Mon Sep 17 00:00:00 2001
From: JoblersTune <sarah@interledger.org>
Date: Thu, 28 May 2026 20:43:22 +0200
Subject: [PATCH 20/20] add aria labels

---
 src/components/RoadmapBoard.astro | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/RoadmapBoard.astro b/src/components/RoadmapBoard.astro
index b848647d..baaa7931 100644
--- a/src/components/RoadmapBoard.astro
+++ b/src/components/RoadmapBoard.astro
@@ -32,6 +32,11 @@ const now = new Date()
 const nowYear = now.getUTCFullYear()
 const nowMonth = now.getUTCMonth()
 const nowLeft = pos.pctLeft(now).toFixed(2)
+const refreshedAt = now.toLocaleDateString('en-US', {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric'
+})
 
 const gridItems = buildGridItems(projects, teams)
 
@@ -154,9 +159,8 @@ function fmtDate(iso: string | null | undefined): string {
         style={`--now-pct: ${nowLeft}%`}
         aria-label="Projects"
       >
-        <caption class="visually-hidden">
-          Project roadmap timeline showing each project's duration bar from
-          start to target date, grouped by team.
+        <caption class="board-caption">
+          Roadmap data refreshed: {refreshedAt}
         </caption>
         <colgroup>
           <col class="col-label" />
@@ -190,7 +194,7 @@ function fmtDate(iso: string | null | undefined): string {
               if (item.type === 'team-header') {
                 const { team, teamColor } = item
                 return (
-                  <tr>
+                  <tr aria-label={`Team: ${team.name}`}>
                     {/* Team header label — sticky left */}
                     <th
                       class="team-header"
@@ -826,6 +830,15 @@ function fmtDate(iso: string | null | undefined): string {
     }
   }
 
+  .board-caption {
+    caption-side: bottom;
+    text-align: right;
+    font-size: var(--step--2);
+    color: #999;
+    padding: 0.4rem 0.75rem;
+    font-style: italic;
+  }
+
   .visually-hidden,
   .sr-only {
     clip-path: inset(50%);