fix: preserve keyboard focus and separate Space activation from voice

Keep focus visible across controls and stable during Contacts, Cockpit and mission roster updates. Preserve native short Space activation, and claim push-to-talk only after a 500 ms hold. Add panel Escape handling and keyboard-accessible attribution controls.

Retains the Map Source foundation contributed in https://github.com/bilawalsidhu/gods-eye-view/pull/171.

src/data/manager.js

@@ -2043,16 +2043,23 @@ export class DataLayerManager {
       count.textContent = layer.stats.count ? this._formatCount(layer.stats.count) : '—';
 
       const toggle = document.createElement('button');
+      toggle.type = 'button';
       toggle.className = `data-toggle-btn${layer.enabled ? ' active' : ''}`;
       this._syncToggleButton(toggle, layer);
       toggle.addEventListener('click', async () => {
-        toggle.disabled = true;
+        // Native `disabled` immediately evicts keyboard focus in Chromium. Keep
+        // the lifecycle control focusable while it is busy, and enforce the
+        // same single-flight interaction contract through ARIA instead.
+        if (toggle.getAttribute('aria-disabled') === 'true') return;
+        toggle.setAttribute('aria-disabled', 'true');
+        toggle.setAttribute('aria-busy', 'true');
         try {
           await this.setEnabled(layer.id, !this.isEnabled(layer.id), { origin: 'user' });
         } catch (error) {
           console.warn(`[Data] ${layer.id} toggle error:`, error);
         } finally {
-          toggle.disabled = false;
+          const current = this.getAll().find(({ id }) => id === layer.id);
+          if (current) this._syncToggleButton(toggle, current);
         }
       });
 
@@ -2266,7 +2273,12 @@ export class DataLayerManager {
     button.dataset.feedState = transitioning
       ? layer.lifecycleState
       : (uncertain ? 'uncertain' : feedState);
-    button.disabled = transitioning;
+    // A busy toggle remains the keyboard focus owner. `aria-disabled` plus the
+    // click guard above prevents repeat activation without the focus loss caused
+    // by native `disabled`.
+    button.disabled = false;
+    button.setAttribute('aria-disabled', String(transitioning));
+    button.setAttribute('aria-busy', String(transitioning));
     button.textContent = transitioning
       ? layer.lifecycleState.toUpperCase()
       : (uncertain ? 'UNCERTAIN' : (layer.enabled ? FEED_STATE_LABELS[feedState] : 'OFF'));

src/data/manager.test.mjs

@@ -2757,6 +2757,7 @@ function makeControlElement() {
     focus() { if (globalThis.document) globalThis.document.activeElement = this; },
     addEventListener(name, handler) { this.listeners[name] = handler; },
     setAttribute(name, value) { this.attributes[name] = String(value); },
+    getAttribute(name) { return this.attributes[name] ?? null; },
     closest(selector) {
       const className = selector.slice(1);
       return String(this.className).split(/\s+/).includes(className) ? this : null;
@@ -2783,6 +2784,163 @@ function makeControlElement() {
   return element;
 }
 
+test('keyboard focus survives Data Layer enabling and disabling transitions', async () => {
+  const originalDocument = globalThis.document;
+  globalThis.document = { createElement: makeControlElement, activeElement: null };
+  const mgr = new DataLayerManager({});
+  let releaseEnable;
+  let releaseDisable;
+  const calls = { enable: 0, disable: 0 };
+  mgr.register({
+    id: 'focus-layer',
+    name: 'Focus layer',
+    icon: '',
+    source: 'Local focus fixture',
+    updateInterval: -1,
+    init() {},
+    enable() {
+      calls.enable += 1;
+      return new Promise((resolve) => { releaseEnable = resolve; });
+    },
+    disable() {
+      calls.disable += 1;
+      return new Promise((resolve) => { releaseDisable = resolve; });
+    },
+    update() {},
+    destroy() {},
+    getStats() { return { count: 1, lastUpdate: Date.now() }; },
+  });
+  const container = makeControlElement();
+
+  const waitFor = async (predicate, label) => {
+    for (let attempt = 0; attempt < 20; attempt += 1) {
+      if (predicate()) return;
+      await Promise.resolve();
+    }
+    assert.fail(`timed out waiting for ${label}`);
+  };
+
+  try {
+    mgr.buildTogglePanel(container);
+    const row = container.querySelector('[data-layer-id="focus-layer"]');
+    const button = row.querySelector('.data-toggle-btn');
+    button.focus();
+
+    const enablingClick = button.listeners.click();
+    await waitFor(() => typeof releaseEnable === 'function', 'enable transition');
+    assert.equal(globalThis.document.activeElement, button);
+    assert.equal(button.disabled, false, 'ENABLING never uses native disabled');
+    assert.equal(button.getAttribute('aria-disabled'), 'true');
+    assert.equal(button.getAttribute('aria-busy'), 'true');
+    assert.equal(button.textContent, 'ENABLING');
+    await button.listeners.click();
+    assert.equal(calls.enable, 1, 'repeat activation is inert while enabling');
+    assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 1);
+
+    releaseEnable();
+    await enablingClick;
+    assert.equal(globalThis.document.activeElement, button);
+    assert.equal(button.disabled, false);
+    assert.equal(button.getAttribute('aria-disabled'), 'false');
+    assert.equal(button.getAttribute('aria-busy'), 'false');
+    assert.equal(mgr.isEnabled('focus-layer'), true);
+
+    const disablingClick = button.listeners.click();
+    await waitFor(() => typeof releaseDisable === 'function', 'disable transition');
+    assert.equal(globalThis.document.activeElement, button);
+    assert.equal(button.disabled, false, 'DISABLING never uses native disabled');
+    assert.equal(button.getAttribute('aria-disabled'), 'true');
+    assert.equal(button.getAttribute('aria-busy'), 'true');
+    assert.equal(button.textContent, 'DISABLING');
+    await button.listeners.click();
+    assert.equal(calls.disable, 1, 'repeat activation is inert while disabling');
+    assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 2);
+
+    releaseDisable();
+    await disablingClick;
+    assert.equal(globalThis.document.activeElement, button);
+    assert.equal(button.disabled, false);
+    assert.equal(button.getAttribute('aria-disabled'), 'false');
+    assert.equal(button.getAttribute('aria-busy'), 'false');
+    assert.equal(mgr.isEnabled('focus-layer'), false);
+  } finally {
+    releaseEnable?.();
+    releaseDisable?.();
+    await mgr.destroyAll();
+    if (originalDocument === undefined) delete globalThis.document;
+    else globalThis.document = originalDocument;
+  }
+});
+
+test('a failed Data Layer transition clears busy state without losing keyboard focus', async () => {
+  const originalDocument = globalThis.document;
+  const originalWarn = console.warn;
+  globalThis.document = { createElement: makeControlElement, activeElement: null };
+  console.warn = () => {};
+  const mgr = new DataLayerManager({});
+  let rejectEnable;
+  let enableCalls = 0;
+  mgr.register({
+    id: 'focus-failure-layer',
+    name: 'Focus failure layer',
+    icon: '',
+    source: 'Local focus fixture',
+    updateInterval: -1,
+    init() {},
+    enable() {
+      enableCalls += 1;
+      if (enableCalls > 1) return true;
+      return new Promise((resolve, reject) => { rejectEnable = reject; });
+    },
+    disable() { return true; },
+    update() {},
+    destroy() {},
+    getStats() { return { count: 0, lastUpdate: null }; },
+  });
+  const container = makeControlElement();
+
+  try {
+    mgr.buildTogglePanel(container);
+    const button = container
+      .querySelector('[data-layer-id="focus-failure-layer"]')
+      .querySelector('.data-toggle-btn');
+    button.focus();
+
+    const failedClick = button.listeners.click();
+    for (let attempt = 0; attempt < 20 && typeof rejectEnable !== 'function'; attempt += 1) {
+      await Promise.resolve();
+    }
+    assert.equal(typeof rejectEnable, 'function');
+    assert.equal(globalThis.document.activeElement, button);
+    assert.equal(button.getAttribute('aria-disabled'), 'true');
+    assert.equal(button.getAttribute('aria-busy'), 'true');
+
+    rejectEnable(new Error('QA enable rejected'));
+    await failedClick;
+    assert.equal(globalThis.document.activeElement, button, 'failure settlement preserves focus');
+    assert.equal(button.disabled, false);
+    assert.equal(button.getAttribute('aria-disabled'), 'false');
+    assert.equal(button.getAttribute('aria-busy'), 'false');
+    assert.equal(button.textContent, 'OFF');
+    assert.deepEqual(mgr.getLayerLifecycleState('focus-failure-layer'), {
+      enabled: false,
+      lifecycleState: 'disabled',
+      uncertain: false,
+    });
+
+    await button.listeners.click();
+    assert.equal(enableCalls, 2, 'the settled control accepts a later retry');
+    assert.equal(globalThis.document.activeElement, button);
+    assert.equal(mgr.isEnabled('focus-failure-layer'), true);
+  } finally {
+    rejectEnable?.(new Error('test cleanup'));
+    console.warn = originalWarn;
+    await mgr.destroyAll();
+    if (originalDocument === undefined) delete globalThis.document;
+    else globalThis.document = originalDocument;
+  }
+});
+
 /** Collect every node in a rendered subtree carrying `className`. */
 function collectByClass(node, className) {
   const found = [];

src/data/militaryAwareness.js

@@ -982,6 +982,43 @@ function navigationState() {
   };
 }
 
+/** Stable identity for a delegated Contacts-panel button across live repaints. */
+export function awarenessPanelControlKey(element) {
+  const control = element?.closest?.(
+    'button[data-awareness-action], button[data-awareness-layer][data-awareness-id]',
+  );
+  if (!control) return null;
+  if (control.dataset.awarenessAction) return `action:${control.dataset.awarenessAction}`;
+  return `target:${control.dataset.awarenessLayer}:${control.dataset.awarenessId}`;
+}
+
+/** Capture stable identity so a live repaint can restore only the same control. */
+export function captureAwarenessPanelFocus(panel, activeElement = document.activeElement) {
+  if (!panel?.contains?.(activeElement)) return null;
+  if (activeElement?.matches?.('[data-awareness-focus-continuation]')) {
+    return { key: 'continuation' };
+  }
+  const key = awarenessPanelControlKey(activeElement);
+  if (!key) return null;
+  return { key };
+}
+
+/** Restore the same control, or continue beyond the list when it is no longer rendered. */
+export function restoreAwarenessPanelFocus(panel, snapshot) {
+  if (!panel || !snapshot) return null;
+  const continuation = panel.querySelector('[data-awareness-focus-continuation]');
+  const controls = [...panel.querySelectorAll(
+    'button[data-awareness-action], button[data-awareness-layer][data-awareness-id]',
+  )].filter((control) => !control.disabled);
+  const retained = snapshot.key === 'continuation'
+    ? continuation
+    : controls.find((control) => awarenessPanelControlKey(control) === snapshot.key);
+  const target = retained
+    || continuation;
+  target?.focus?.({ preventScroll: true });
+  return target || null;
+}
+
 function escapeHtml(value) {
   return String(value ?? '').replace(/[&<>'"]/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' })[char]);
 }
@@ -993,11 +1030,13 @@ function renderResults() {
   const markup = `<div class="military-awareness-subject">${escapeHtml(subject.label)} · ${formatAwarenessDistance(AWARENESS_RADIUS_M)} FLIGHT / VESSEL WINDOW</div>
     ${navigationControlsHtml()}
     ${cohorts.map(rowHtml).join('')}
-    <p class="military-awareness-note">Open-source mapped/observed context. Missing broadcasts, unloaded map areas, or unmapped sites are not evidence of absence.</p>`;
+    <p class="military-awareness-note" tabindex="-1" data-awareness-focus-continuation>Open-source mapped/observed context. Missing broadcasts, unloaded map areas, or unmapped sites are not evidence of absence.</p>`;
   panel.hidden = false;
   if (state.panelMarkup !== markup) {
+    const focusSnapshot = captureAwarenessPanelFocus(panel);
     panel.innerHTML = markup;
     state.panelMarkup = markup;
+    restoreAwarenessPanelFocus(panel, focusSnapshot);
   }
 }
 

src/data/militaryAwareness.test.mjs

@@ -10,14 +10,17 @@ import militaryAwarenessLayer, {
   awarenessRefreshIntervalMs,
   awarenessRefreshRequired,
   awarenessResultsAreLive,
+  awarenessPanelControlKey,
   buildAwarenessContextSnapshot,
   canNavigateAwarenessNext,
   contactsWindowFromSnapshot,
   contextTargetFlyToAllowed,
+  captureAwarenessPanelFocus,
   summarizeInstallationViewport,
   findCompatibleHistoryIndex,
   AWARENESS_QUERY_LIMIT,
   historySubjectSnapshot,
+  restoreAwarenessPanelFocus,
 } from './militaryAwareness.js';
 import flightsLayer, {
   _setTrackedFlightRefreshStateForTest,
@@ -212,6 +215,96 @@ function installAwarenessRuntime({
   };
 }
 
+function awarenessControl(dataset, { disabled = false } = {}) {
+  return {
+    dataset,
+    disabled,
+    focusCalls: 0,
+    closest(selector) {
+      if (selector === '[data-awareness-focus-continuation]') {
+        return this.isContinuation ? this : null;
+      }
+      return selector.includes('button') && !this.isContinuation ? this : null;
+    },
+    matches(selector) {
+      return selector === '[data-awareness-focus-continuation]' && this.isContinuation;
+    },
+    focus(options) {
+      this.focusCalls += 1;
+      this.focusOptions = options;
+    },
+  };
+}
+
+function awarenessPanel(controls) {
+  const continuation = awarenessControl({});
+  continuation.isContinuation = true;
+  return {
+    controls,
+    continuation,
+    contains(element) { return controls.includes(element) || element === continuation; },
+    querySelectorAll() { return this.controls; },
+    querySelector(selector) {
+      return selector === '[data-awareness-focus-continuation]' ? continuation : null;
+    },
+  };
+}
+
+test('Contacts live repaint restores only stable identity and never retargets another contact', () => {
+  const previous = awarenessControl({ awarenessAction: 'previous' });
+  const focus = awarenessControl({ awarenessAction: 'focus' });
+  const next = awarenessControl({ awarenessAction: 'next' });
+  const alpha = awarenessControl({ awarenessLayer: 'flights', awarenessId: 'abc123' });
+  const bravo = awarenessControl({ awarenessLayer: 'military', awarenessId: 'def456' });
+  const before = awarenessPanel([previous, focus, next, alpha, bravo]);
+  const alphaSnapshot = captureAwarenessPanelFocus(before, alpha);
+
+  assert.deepEqual(alphaSnapshot, { key: 'target:flights:abc123' });
+  assert.equal(awarenessPanelControlKey(next), 'action:next');
+
+  const retainedAlpha = awarenessControl({ awarenessLayer: 'flights', awarenessId: 'abc123' });
+  const retained = awarenessPanel([previous, focus, next, bravo, retainedAlpha]);
+  assert.equal(restoreAwarenessPanelFocus(retained, alphaSnapshot), retainedAlpha);
+  assert.equal(retainedAlpha.focusCalls, 1, 'identity wins even when live distance reorders rows');
+  assert.deepEqual(retainedAlpha.focusOptions, { preventScroll: true });
+
+  const forward = awarenessControl({ awarenessLayer: 'ais-live-vessels', awarenessId: '789' });
+  const departed = awarenessPanel([previous, focus, next, forward]);
+  assert.equal(restoreAwarenessPanelFocus(departed, alphaSnapshot), departed.continuation);
+  assert.equal(forward.focusCalls, 0, 'automatic paging must not transfer focus to another contact');
+  assert.equal(departed.continuation.focusCalls, 1);
+
+  const bravoSnapshot = captureAwarenessPanelFocus(before, bravo);
+  const noRemainingRow = awarenessPanel([previous, focus, next, alpha]);
+  assert.equal(
+    restoreAwarenessPanelFocus(noRemainingRow, bravoSnapshot),
+    noRemainingRow.continuation,
+  );
+  assert.equal(noRemainingRow.continuation.focusCalls, 1, 'the end sentinel continues Tab beyond the list');
+
+  const continuationSnapshot = captureAwarenessPanelFocus(departed, departed.continuation);
+  assert.deepEqual(continuationSnapshot, { key: 'continuation' });
+  const repaintedAgain = awarenessPanel([previous, focus, next, forward]);
+  assert.equal(
+    restoreAwarenessPanelFocus(repaintedAgain, continuationSnapshot),
+    repaintedAgain.continuation,
+  );
+  assert.equal(
+    repaintedAgain.continuation.focusCalls,
+    1,
+    'later live repaints keep focus on the continuation point until the user tabs onward',
+  );
+});
+
+test('Contacts continuation target is the visible explanatory note', () => {
+  const source = fs.readFileSync(new URL('./militaryAwareness.js', import.meta.url), 'utf8');
+  assert.match(
+    source,
+    /<p class="military-awareness-note" tabindex="-1" data-awareness-focus-continuation>Open-source mapped\/observed context\./,
+  );
+  assert.doesNotMatch(source, /<span[^>]*data-awareness-focus-continuation/);
+});
+
 test('awareness disable settles every owned dependency release before resolving', async () => {
   let releasing = false;
   let releaseDependencies;

src/data/rocketLaunches.js

@@ -61,6 +61,7 @@ let _missionPanel = null;
 let _missionRoster = null;
 let _missionRosterHoverTimer = null;
 let _hoveredRosterLaunchId = null;
+let _missionRosterPreviewOwnership = null;
 let _missionHoverReticleImage = null;
 let _replayVehicleOverlay = null;
 let _replayVehicleOverlayText = '';
@@ -786,6 +787,115 @@ export function missionHoverPreviewRange(cameraHeight) {
   );
 }
 
+/**
+ * Coordinate pointer and keyboard ownership of the temporary roster preview.
+ * The most recent input owns the preview until it leaves, then any remaining
+ * input resumes ownership. This lets keyboard focus take over from a pointer
+ * resting on another row without losing that pointer preview on blur.
+ * @param {{preview: (index: number) => void, clear: () => void}} handlers
+ * @returns {{pointerEnter: (index: number) => void, pointerLeave: () => void,
+ *   focus: (index: number) => void, blur: (nextIndex?: number|null) => void,
+ *   reset: () => void}}
+ */
+export function createMissionRosterPreviewOwnership({ preview, clear }) {
+  let pointerIndex = null;
+  let focusIndex = null;
+  let latestOwner = null;
+  let activeIndex = null;
+
+  const sync = () => {
+    const nextIndex = latestOwner === 'pointer'
+      ? pointerIndex ?? focusIndex
+      : focusIndex ?? pointerIndex;
+    if (nextIndex === activeIndex) return;
+    activeIndex = nextIndex;
+    if (Number.isInteger(nextIndex)) preview(nextIndex);
+    else clear();
+  };
+
+  return {
+    pointerEnter(index) {
+      pointerIndex = index;
+      latestOwner = 'pointer';
+      sync();
+    },
+    pointerLeave() {
+      pointerIndex = null;
+      if (latestOwner === 'pointer') latestOwner = focusIndex === null ? null : 'focus';
+      sync();
+    },
+    focus(index) {
+      focusIndex = index;
+      latestOwner = 'focus';
+      sync();
+    },
+    blur(nextIndex = null) {
+      focusIndex = Number.isInteger(nextIndex) ? nextIndex : null;
+      if (latestOwner === 'focus') latestOwner = focusIndex === null
+        ? (pointerIndex === null ? null : 'pointer')
+        : 'focus';
+      sync();
+    },
+    reset() {
+      pointerIndex = null;
+      focusIndex = null;
+      latestOwner = null;
+      activeIndex = null;
+      clear();
+    },
+  };
+}
+
+/**
+ * Bind native keyboard focus events for one rendered roster row.
+ * @param {Element} button Mission roster button.
+ * @param {number} index Source-array mission index.
+ * @param {{pointerEnter: (index: number) => void, pointerLeave: () => void,
+ *   focus: (index: number) => void, blur: (nextIndex?: number|null) => void}} ownership
+ * @param {Element} roster Roster root used to reject focus targets outside the list.
+ */
+export function bindMissionRosterItemKeyboardPreview(button, index, ownership, roster) {
+  button.addEventListener('mouseenter', () => ownership.pointerEnter(index));
+  button.addEventListener('mouseleave', () => ownership.pointerLeave());
+  button.addEventListener('focus', () => ownership.focus(index));
+  button.addEventListener('blur', (event) => {
+    const nextButton = event.relatedTarget?.closest?.('[data-mission-roster-index]');
+    const nextIndex = nextButton && roster.contains(nextButton)
+      ? Number(nextButton.dataset.missionRosterIndex)
+      : null;
+    ownership.blur(nextIndex);
+  });
+}
+
+/** Capture the exact mission identity owned by keyboard focus before a refresh. */
+export function captureMissionRosterFocus(list, activeElement = globalThis.document?.activeElement) {
+  const button = activeElement?.closest?.('[data-mission-roster-id]');
+  if (!button || !list?.contains(button)) return null;
+  const launchId = button.dataset.missionRosterId;
+  return launchId ? { launchId } : null;
+}
+
+/** Restore focus by mission identity, or continue after the list if it departed. */
+export function restoreMissionRosterFocus(list, snapshot, continuation) {
+  if (!snapshot?.launchId) return 'none';
+  const button = Array.from(list?.querySelectorAll?.('[data-mission-roster-id]') || [])
+    .find((candidate) => candidate.dataset.missionRosterId === snapshot.launchId);
+  if (button) {
+    button.focus({ preventScroll: true });
+    return 'restored';
+  }
+  if (continuation?.focus) {
+    continuation.focus({ preventScroll: true });
+    return 'continued';
+  }
+  return 'none';
+}
+
+/** Resolve a pending preview against the current refresh, never a stale object. */
+export function resolveMissionRosterPreviewLaunch(launches, launchId) {
+  return (launches || []).find((candidate) => candidate.id === launchId) || null;
+}
+
 /**
  * Format a mission epoch for compact on-globe replay labels.
  * @param {string|Date|null} launchTime ISO-8601 mission time or Date.
@@ -2327,9 +2437,16 @@ function renderMissionRoster() {
   const count = _missionRoster.querySelector('[data-mission-roster-count]');
   if (count) count.textContent = `${_launches.length} / 30D`;
   if (!list) return;
+  const focusSnapshot = captureMissionRosterFocus(list);
+  _missionRosterPreviewOwnership?.reset();
   const entries = missionRosterEntries(_launches);
   if (!entries.length) {
     list.innerHTML = '<div class="space-mission-roster-empty">NO MISSIONS AVAILABLE IN THE CURRENT 30-DAY WINDOW</div>';
+    restoreMissionRosterFocus(
+      list,
+      focusSnapshot,
+      _missionRoster.querySelector('[data-mission-roster-focus-continuation]'),
+    );
     return;
   }
   list.innerHTML = entries.map(({ launch, index }) => {
@@ -2337,8 +2454,22 @@ function renderMissionRoster() {
     const date = launch.launchTime?.slice(0, 10) || 'DATE UNAVAILABLE';
     const provider = launch.provider || 'UNSPECIFIED OPERATOR';
     const label = shortMissionLabel(launch.name, 27).toUpperCase();
-    return `<button type="button" class="space-mission-roster-item" data-mission-roster-index="${index}" aria-label="Select ${escapeMissionText(label)}"><span class="space-mission-roster-marker" style="--mission-roster-color:${color}" aria-hidden="true"></span><span class="space-mission-roster-copy"><strong>${escapeMissionText(label)}</strong><small>${escapeMissionText(provider)} · ${escapeMissionText(date)}</small></span><span class="space-mission-roster-chevron" aria-hidden="true">›</span></button>`;
+    return `<button type="button" class="space-mission-roster-item" data-mission-roster-index="${index}" data-mission-roster-id="${escapeMissionText(launch.id)}" aria-label="Select ${escapeMissionText(label)}"><span class="space-mission-roster-marker" style="--mission-roster-color:${color}" aria-hidden="true"></span><span class="space-mission-roster-copy"><strong>${escapeMissionText(label)}</strong><small>${escapeMissionText(provider)} · ${escapeMissionText(date)}</small></span><span class="space-mission-roster-chevron" aria-hidden="true">›</span></button>`;
   }).join('');
+  list.querySelectorAll('[data-mission-roster-index]').forEach((button) => {
+    const index = Number(button.dataset.missionRosterIndex);
+    bindMissionRosterItemKeyboardPreview(
+      button,
+      index,
+      _missionRosterPreviewOwnership,
+      _missionRoster,
+    );
+  });
+  restoreMissionRosterFocus(
+    list,
+    focusSnapshot,
+    _missionRoster.querySelector('[data-mission-roster-focus-continuation]'),
+  );
 }
 
 function escapeMissionText(value) {
@@ -2384,7 +2515,7 @@ function selectMissionAt(index) {
   focusMission(launch);
 }
 
-function clearMissionRosterHover() {
+function clearMissionRosterPreviewState() {
   if (_missionRosterHoverTimer) clearTimeout(_missionRosterHoverTimer);
   _missionRosterHoverTimer = null;
   const changed = _hoveredRosterLaunchId !== null;
@@ -2392,6 +2523,11 @@ function clearMissionRosterHover() {
   if (changed) syncMissionOverlayEntries();
 }
 
+function clearMissionRosterHover() {
+  if (_missionRosterPreviewOwnership) _missionRosterPreviewOwnership.reset();
+  else clearMissionRosterPreviewState();
+}
+
 function previewMissionFromRoster(launch) {
   if (!_viewer || !launch || _selectedLaunchId) return;
   const range = missionHoverPreviewRange(_viewer.camera.positionCartographic?.height);
@@ -2414,7 +2550,9 @@ function scheduleMissionRosterPreview(index) {
   syncMissionOverlayEntries();
   _missionRosterHoverTimer = setTimeout(() => {
     _missionRosterHoverTimer = null;
-    if (_hoveredRosterLaunchId === launch.id) previewMissionFromRoster(launch);
+    if (_hoveredRosterLaunchId !== launch.id) return;
+    const currentLaunch = resolveMissionRosterPreviewLaunch(_launches, launch.id);
+    if (currentLaunch) previewMissionFromRoster(currentLaunch);
   }, 140);
 }
 
@@ -2499,6 +2637,10 @@ function createMissionPanel() {
   if (!host) return;
   _missionRoster = document.getElementById('space-mission-roster');
   if (_missionRoster) {
+    _missionRosterPreviewOwnership = createMissionRosterPreviewOwnership({
+      preview: scheduleMissionRosterPreview,
+      clear: clearMissionRosterPreviewState,
+    });
     _missionRoster.onclick = (event) => {
       const button = event.target instanceof Element
         ? event.target.closest('[data-mission-roster-index]')
@@ -2506,23 +2648,6 @@ function createMissionPanel() {
       if (!button) return;
       selectMissionAt(Number(button.dataset.missionRosterIndex));
     };
-    _missionRoster.onmouseover = (event) => {
-      const button = event.target instanceof Element
-        ? event.target.closest('[data-mission-roster-index]')
-        : null;
-      if (!button || button.contains(event.relatedTarget)) return;
-      scheduleMissionRosterPreview(Number(button.dataset.missionRosterIndex));
-    };
-    _missionRoster.onfocusin = (event) => {
-      const button = event.target instanceof Element
-        ? event.target.closest('[data-mission-roster-index]')
-        : null;
-      if (button) scheduleMissionRosterPreview(Number(button.dataset.missionRosterIndex));
-    };
-    _missionRoster.onmouseleave = clearMissionRosterHover;
-    _missionRoster.onfocusout = (event) => {
-      if (!_missionRoster.contains(event.relatedTarget)) clearMissionRosterHover();
-    };
   }
   _missionPanel = document.createElement('aside');
   _missionPanel.id = 'space-mission-panel';
@@ -3539,11 +3664,8 @@ const rocketLaunchesLayer = {
     _missionPanel = null;
     if (_missionRoster) {
       _missionRoster.onclick = null;
-      _missionRoster.onmouseover = null;
-      _missionRoster.onfocusin = null;
-      _missionRoster.onmouseleave = null;
-      _missionRoster.onfocusout = null;
     }
+    _missionRosterPreviewOwnership = null;
     _missionRoster = null;
     _viewer = null;
     if (_dataSource) viewer.dataSources.remove(_dataSource, true);

src/data/rocketLaunches.test.mjs

@@ -6,9 +6,12 @@ import rocketLaunchesLayer, {
   _setRocketMissionOverlayHostForTest,
   _setSelectedRocketMissionForTest,
   approximateOrbitPath,
+  bindMissionRosterItemKeyboardPreview,
+  captureMissionRosterFocus,
   buildMissionPaths,
   cameraHeadingForPath,
   compactLaunchSiteName,
+  createMissionRosterPreviewOwnership,
   createRocketMissionElementOverlayEntry,
   createRocketMissionMarkerOverlayEntry,
   formatMissionEventTime,
@@ -41,6 +44,8 @@ import rocketLaunchesLayer, {
   replayAscentDurationSeconds,
   replayStartAfterPause,
   replayVehicleScreenRotation,
+  resolveMissionRosterPreviewLaunch,
+  restoreMissionRosterFocus,
   releaseAircraftTracking,
   ROCKET_MISSION_AMBIENT_OVERLAY_COHORT_LIMIT,
   ROCKET_MISSION_AMBIENT_OVERLAY_COLLISION_CAPACITY,
@@ -490,6 +495,150 @@ test('preserves globe scale for roster hover previews', () => {
   assert.equal(missionHoverPreviewRange(Number.NaN), 5000000);
 });
 
+test('keyboard focus previews roster missions and clears without selecting them', () => {
+  const calls = [];
+  const ownership = createMissionRosterPreviewOwnership({
+    preview: (index) => calls.push(['preview', index]),
+    clear: () => calls.push(['clear']),
+  });
+
+  ownership.focus(2);
+  ownership.blur(3);
+  ownership.blur();
+
+  assert.deepEqual(calls, [
+    ['preview', 2],
+    ['preview', 3],
+    ['clear'],
+  ]);
+});
+
+test('rendered mission row focus and blur drive the preview ownership controller', () => {
+  const listeners = new Map();
+  const calls = [];
+  const button = {
+    addEventListener(type, listener) {
+      listeners.set(type, listener);
+    },
+  };
+  const nextButton = {
+    dataset: { missionRosterIndex: '4' },
+    closest: () => nextButton,
+  };
+  const roster = { contains: (candidate) => candidate === nextButton };
+  const ownership = {
+    pointerEnter: (index) => calls.push(['pointer-enter', index]),
+    pointerLeave: () => calls.push(['pointer-leave']),
+    focus: (index) => calls.push(['focus', index]),
+    blur: (index) => calls.push(['blur', index]),
+  };
+
+  bindMissionRosterItemKeyboardPreview(button, 2, ownership, roster);
+  listeners.get('mouseenter')();
+  listeners.get('mouseleave')();
+  listeners.get('focus')();
+  listeners.get('blur')({ relatedTarget: nextButton });
+  listeners.get('blur')({ relatedTarget: null });
+
+  assert.deepEqual(calls, [
+    ['pointer-enter', 2],
+    ['pointer-leave'],
+    ['focus', 2],
+    ['blur', 4],
+    ['blur', null],
+  ]);
+});
+
+test('leaving a hovered row for an internal roster gap restores keyboard preview', () => {
+  const calls = [];
+  const ownership = createMissionRosterPreviewOwnership({
+    preview: (index) => calls.push(['preview', index]),
+    clear: () => calls.push(['clear']),
+  });
+
+  ownership.focus(1);
+  ownership.pointerEnter(0);
+  ownership.pointerLeave();
+
+  assert.deepEqual(calls, [
+    ['preview', 1],
+    ['preview', 0],
+    ['preview', 1],
+  ]);
+});
+
+test('mission roster refresh restores keyboard focus by stable mission identity after reorder', () => {
+  const focused = {
+    dataset: { missionRosterId: 'mission-b' },
+    closest: () => focused,
+  };
+  let restored = false;
+  const replacement = {
+    dataset: { missionRosterId: 'mission-b' },
+    focus: ({ preventScroll }) => { restored = preventScroll; },
+  };
+  const list = {
+    contains: (candidate) => candidate === focused,
+    querySelectorAll: () => [
+      { dataset: { missionRosterId: 'mission-c' } },
+      replacement,
+      { dataset: { missionRosterId: 'mission-a' } },
+    ],
+  };
+
+  const snapshot = captureMissionRosterFocus(list, focused);
+  assert.deepEqual(snapshot, { launchId: 'mission-b' });
+  assert.equal(restoreMissionRosterFocus(list, snapshot, null), 'restored');
+  assert.equal(restored, true);
+});
+
+test('mission roster refresh continues after the list when the focused mission departed', () => {
+  const focused = {
+    dataset: { missionRosterId: 'departed' },
+    closest: () => focused,
+  };
+  let continuationFocused = false;
+  const list = {
+    contains: (candidate) => candidate === focused,
+    querySelectorAll: () => [{ dataset: { missionRosterId: 'remaining' } }],
+  };
+  const continuation = {
+    focus: ({ preventScroll }) => { continuationFocused = preventScroll; },
+  };
+
+  const snapshot = captureMissionRosterFocus(list, focused);
+  assert.equal(restoreMissionRosterFocus(list, snapshot, continuation), 'continued');
+  assert.equal(continuationFocused, true);
+});
+
+test('pending mission preview resolves the current refreshed record by identity', () => {
+  const stale = { id: 'mission-a', name: 'Stale' };
+  const current = { id: 'mission-a', name: 'Current' };
+
+  assert.equal(resolveMissionRosterPreviewLaunch([current], stale.id), current);
+  assert.equal(resolveMissionRosterPreviewLaunch([], stale.id), null);
+});
+
+test('latest roster input owns preview and restores the remaining owner on leave', () => {
+  const calls = [];
+  const ownership = createMissionRosterPreviewOwnership({
+    preview: (index) => calls.push(['preview', index]),
+    clear: () => calls.push(['clear']),
+  });
+
+  ownership.pointerEnter(0);
+  ownership.focus(1);
+  ownership.blur();
+  ownership.pointerLeave();
+
+  assert.deepEqual(calls, [
+    ['preview', 0],
+    ['preview', 1],
+    ['preview', 0],
+    ['clear'],
+  ]);
+});
+
 test('assigns distinct stable colors to mission operators', () => {
   assert.equal(missionMarkerColor({ provider: 'NASA', name: 'Science Flight' }).toCssColorString(), 'rgb(255,159,67)');
   assert.equal(missionMarkerColor({ provider: 'SpaceX', name: 'Starlink Group' }).toCssColorString(), 'rgb(76,201,240)');