From ccedd2f767bb449a9b6ce07c6278a013a7f99ea1 Mon Sep 17 00:00:00 2001
From: Mark Boas <markb@happyworm.com>
Date: Sat, 11 Jul 2026 18:47:27 +0200
Subject: [PATCH 1/2] Add the wordArr re-index regression test (#394)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Belongs with 9d8867e — the spec change was left unstaged when that commit
staged only editor-core.js.
---
 __TEST__/e2e/span-merge.spec.mjs | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/__TEST__/e2e/span-merge.spec.mjs b/__TEST__/e2e/span-merge.spec.mjs
index 96ded15..7bd94d9 100644
--- a/__TEST__/e2e/span-merge.spec.mjs
+++ b/__TEST__/e2e/span-merge.spec.mjs
@@ -81,6 +81,27 @@ test('retyping a word\'s first letter reflows the leaked char back, keeping orig
   expect(r.editor).toEqual({ t: 'Editor ', m: r.orig.editorM, d: r.orig.editorD });
 });
 
+test('splitting a word re-indexes the player wordArr so the new spans can highlight', async ({ page }) => {
+  // A stale wordArr is why split words don't highlight; after a split (span
+  // count changes) the editor must rebuild it to match the DOM (#394).
+  const r = await page.evaluate(() => {
+    const t = document.querySelector('#hypertranscript');
+    const inst = window.hyperaudioInstance;
+    const domBefore = t.querySelectorAll('span[data-m]').length;
+    const span = [...t.querySelectorAll('span[data-m]')].find((s) => s.textContent.trim() === 'makes');
+    span.textContent = 'ma kes ';                       // add a space -> split on blur
+    t.dispatchEvent(new Event('blur'));
+    const domNodes = [...t.querySelectorAll('span[data-m]')];
+    const arrNodes = inst.wordArr.map((w) => w.n);
+    return {
+      grew: t.querySelectorAll('span[data-m]').length === domBefore + 1,
+      arrMatchesDom: arrNodes.length === domNodes.length && domNodes.every((n) => arrNodes.includes(n)),
+    };
+  });
+  expect(r.grew).toBe(true);
+  expect(r.arrMatchesDom).toBe(true);
+});
+
 test('a clean transcript is untouched on blur (no spurious merges)', async ({ page }) => {
   const { before, after } = await page.evaluate(() => {
     const t = document.querySelector('#hypertranscript');

From a34fe91cd3c93f2b9d78a39da8a9e444107f3c20 Mon Sep 17 00:00:00 2001
From: Mark Boas <markb@happyworm.com>
Date: Sat, 11 Jul 2026 18:47:27 +0200
Subject: [PATCH 2/2] Accessibility: labels, ARIA tab roles, modal keyboard
 operability, contrast (#402)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Form labels:
- media file inputs (all five engines): drop title="", add aria-label
- Recents load select: aria-label; Model/Language span headings become real
  <label for> associations (deepgram, assemblyai, parakeet-hf)
- import dialogs (export.js): the six span captions become <label for>

ARIA tab roles:
- remove role="tablist|tab|tabpanel" from the Local/Cloud switch and engine
  tabs — label/input don't allow role="tab" and the interleaved panels can't
  satisfy tablist's required structure; DaisyUI pairs by class so styling is
  unaffected, and the radios' native semantics (with aria-labels) announce
  correctly
- fix the mobile tab-shrink CSS still targeting the old my_tabs_2 group name
  (dead since the Local/Cloud split) and the [role="tablist"] selector

Modal toggles:
- all thirteen modal-toggle checkboxes get aria-hidden + tabindex=-1 (they are
  opacity-0 CSS mechanisms that were focusable-but-invisible and flagged as
  unlabeled / multiply-labelled form fields); every ✕ gets aria-label="Close"
- new js/a11y.js makes the visible label-buttons the keyboard surface instead:
  tabindex=0 + Enter/Space activation (MutationObserver covers late-injected
  dialogs), with a :focus-visible ring — modals are now keyboard-operable,
  which they previously weren't except via the invisible checkbox

Contrast:
- the Recents "No files saved." placeholder was opacity .55 (≈2.9:1 composited);
  raised to .75 (≈5.7:1). The file items themselves already passed.

Verification: __TEST__/e2e/a11y.spec.mjs runs axe-core against the #402 rule
set on the default view and transcribe modal, plus a keyboard-operability
check; axe-core added as a devDependency.
---
 __TEST__/e2e/a11y.spec.mjs           |  85 ++++++++++++++++++++++
 css/hyperaudio-lite-editor.css       |  23 ++++--
 index.html                           | 105 ++++++++++++++-------------
 js/a11y.js                           |  64 ++++++++++++++++
 js/hyperaudio-lite-editor-export.js  |  24 +++---
 js/hyperaudio-lite-editor-storage.js |   4 +-
 package-lock.json                    |  11 +++
 package.json                         |   7 +-
 8 files changed, 252 insertions(+), 71 deletions(-)
 create mode 100644 __TEST__/e2e/a11y.spec.mjs
 create mode 100644 js/a11y.js

diff --git a/__TEST__/e2e/a11y.spec.mjs b/__TEST__/e2e/a11y.spec.mjs
new file mode 100644
index 0000000..142df91
--- /dev/null
+++ b/__TEST__/e2e/a11y.spec.mjs
@@ -0,0 +1,85 @@
+// Accessibility regression net for the Lighthouse findings fixed in #402:
+// missing form labels, ARIA tab roles on incompatible elements, multiply-
+// labelled modal toggles, and Recents contrast. Runs axe-core (the same engine
+// behind Lighthouse's a11y audits) against the live editor — default view and
+// the transcribe/export modals — asserting the specific rules from the issue,
+// plus aria-hidden-focus (the modal toggles are aria-hidden and MUST stay out
+// of the tab order for that to be valid).
+import { test, expect } from '@playwright/test';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const AXE_PATH = require.resolve('axe-core/axe.min.js');
+
+// The rules #402 is about — scoped so unrelated/pre-existing audits don't make
+// this spec flaky. Grow the list as more of the issue is addressed.
+const RULES = [
+  'label',                       // form elements have labels
+  'select-name',                 // selects have accessible names
+  'aria-required-children',      // tablist must contain tabs (roles now removed)
+  'aria-allowed-role',           // no role="tab" on input/label
+  'form-field-multiple-labels',  // modal toggles no longer multiply-labelled
+  'color-contrast',              // Recents list legibility
+  'aria-hidden-focus',           // aria-hidden toggles must be unfocusable
+];
+
+const runAxe = async (page, scope) => {
+  await page.addScriptTag({ path: AXE_PATH });
+  return page.evaluate(async ({ scope, rules }) => {
+    const result = await window.axe.run(scope || document, {
+      runOnly: { type: 'rule', values: rules },
+    });
+    return result.violations.map((v) => ({
+      id: v.id,
+      impact: v.impact,
+      nodes: v.nodes.map((n) => n.target.join(' ')).slice(0, 5),
+    }));
+  }, { scope, rules: RULES });
+};
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/index.html');
+  await page.waitForSelector('#hypertranscript [data-m]');
+});
+
+test('default view (with Recents content) has no #402-class violations', async ({ page }) => {
+  // populate the Recents list both ways storage.js renders it
+  await page.evaluate(() => {
+    const fp = document.getElementById('file-picker');
+    fp.insertAdjacentHTML('beforeend', `<li><a class="file-item" title="t" data-index=0>my-project</a></li>`);
+    fp.insertAdjacentHTML('beforeend', `<li style="padding:8px 16px; opacity:0.75">No files saved.</li>`);
+  });
+  expect(await runAxe(page)).toEqual([]);
+});
+
+test('transcribe modal (Local and Cloud tabs) has no #402-class violations', async ({ page }) => {
+  await page.evaluate(() => { document.getElementById('transcribe-modal').checked = true; });
+  expect(await runAxe(page, '.modal-box')).toEqual([]);
+  await page.click('label[for="service-cloud"]');
+  expect(await page.evaluate(async () => {
+    const result = await window.axe.run(document.querySelector('#cloud-group'), {
+      runOnly: { type: 'rule', values: ['label', 'select-name', 'aria-allowed-role', 'aria-required-children'] },
+    });
+    return result.violations.map((v) => v.id);
+  })).toEqual([]);
+});
+
+test('modal label-buttons are keyboard-operable; toggles are out of the tab order', async ({ page }) => {
+  const r = await page.evaluate(() => {
+    const infoBtn = document.getElementById('info-btn');
+    const toggle = document.getElementById('info-modal');
+    return {
+      btnTabbable: infoBtn.tabIndex === 0,
+      btnWired: infoBtn.dataset.a11yWired === '1',
+      toggleHidden: toggle.getAttribute('aria-hidden') === 'true',
+      toggleUntabbable: toggle.tabIndex === -1,
+    };
+  });
+  expect(r).toEqual({ btnTabbable: true, btnWired: true, toggleHidden: true, toggleUntabbable: true });
+
+  // Enter on the focused label-button opens the modal (was impossible before —
+  // labels aren't natively keyboard-activatable)
+  await page.focus('#info-btn');
+  await page.keyboard.press('Enter');
+  expect(await page.evaluate(() => document.getElementById('info-modal').checked)).toBe(true);
+});
diff --git a/css/hyperaudio-lite-editor.css b/css/hyperaudio-lite-editor.css
index ac6941b..46395f5 100644
--- a/css/hyperaudio-lite-editor.css
+++ b/css/hyperaudio-lite-editor.css
@@ -444,12 +444,15 @@ dialog::backdrop {
     margin: -70px auto 0 !important;
   }
   #captions-display { width: 100%; }
-  /* The three transcribe tabs are a fixed 165px each (495px) with nowrap labels,
-     which overflowed the narrowed modal. Let them share the row and shrink
-     evenly, with the label WRAPPING to two lines rather than collapsing into an
-     overlapping garble. */
-  .modal-box [role="tablist"] { flex-wrap: wrap; width: 100%; box-sizing: border-box; }
-  .modal-box [name="my_tabs_2"] {
+  /* The transcribe tabs are a fixed 150px each with nowrap labels, which
+     overflowed the narrowed modal. Let them share the row and shrink evenly,
+     with the label WRAPPING to two lines rather than collapsing into an
+     overlapping garble. (Selectors are class/name-based — the ARIA tab roles
+     were removed in #402, and the radio groups were renamed when the modal
+     gained the Local/Cloud switch.) */
+  .modal-box .tabs { flex-wrap: wrap; width: 100%; box-sizing: border-box; }
+  .modal-box [name="local_tabs"],
+  .modal-box [name="cloud_tabs"] {
     flex: 1 1 0;
     width: auto !important;
     min-width: 6rem;
@@ -804,6 +807,14 @@ body.find-replace-open .hyperaudio-transcript { padding-top: 108px; }
 #service-cloud:checked ~ #local-group { display: none; }
 #service-cloud:checked ~ #cloud-group { display: block; }
 
+/* Modal label-buttons made keyboard-focusable by js/a11y.js (#402): give them
+   a clear focus ring — as labels they don't get the browser's button focus
+   styling for free. */
+label[data-a11y-wired]:focus-visible {
+  outline: 2px solid oklch(var(--p));
+  outline-offset: 2px;
+}
+
 /* API key field with a show/hide eye toggle (#390). */
 .key-field {
   position: relative;
diff --git a/index.html b/index.html
index e4f1866..d2d76f0 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,7 @@
     }
     
   </style>
-   <link rel="stylesheet" href="css/hyperaudio-lite-editor.css?v=0.8.1">
+   <link rel="stylesheet" href="css/hyperaudio-lite-editor.css?v=0.8.3">
    <!-- DaisyUI / Tailwind - must be loaded last -->
    <link rel="stylesheet" href="css/tailwind-min.css">
 </head>
@@ -134,16 +134,16 @@
         <hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
         <input id="deepgram-media" type="text" placeholder="Link to media" class="input input-bordered w-full max-w-xs" />
         <span class="label-text">or</span>
-        <input id="deepgram-file" name="file" type="file" class="file-input w-full max-w-xs" title="" />
+        <input id="deepgram-file" name="file" type="file" class="file-input w-full max-w-xs" aria-label="Media file to transcribe" />
         <hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
   
-        <span class="label-text">Model</span>
+        <label class="label-text" for="language-model">Model</label>
         <div>
           <select id="language-model" name="language-model" placeholder="language-model" class="select select-bordered w-full max-w-xs">
           </select>
         </div>
   
-        <span class="label-text">Language</span>
+        <label class="label-text" for="language">Language</label>
         <select id="language" name="language" placeholder="language" class="select select-bordered w-full max-w-xs">
         </select>
 
@@ -171,13 +171,13 @@
         <hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
         <input id="assemblyai-media" type="text" placeholder="Link to media" class="input input-bordered w-full max-w-xs" />
         <span class="label-text">or</span>
-        <input id="assemblyai-file" name="file" type="file" class="file-input w-full max-w-xs" title="" />
+        <input id="assemblyai-file" name="file" type="file" class="file-input w-full max-w-xs" aria-label="Media file to transcribe" />
         <hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
 
-        <span class="label-text">Model</span>
+        <label class="label-text" for="assemblyai-model">Model</label>
         <select id="assemblyai-model" name="assemblyai-model" class="select select-bordered w-full max-w-xs"></select>
 
-        <span class="label-text">Language</span>
+        <label class="label-text" for="assemblyai-language">Language</label>
         <select id="assemblyai-language" name="assemblyai-language" class="select select-bordered w-full max-w-xs"></select>
       </div>
       <div class="modal-action">
@@ -204,10 +204,10 @@
         <hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
         <input id="parakeet-hf-media" type="text" placeholder="Link to media" class="input input-bordered w-full max-w-xs" />
         <span class="label-text">or</span>
-        <input id="parakeet-hf-file" name="file" type="file" class="file-input w-full max-w-xs" title="" />
+        <input id="parakeet-hf-file" name="file" type="file" class="file-input w-full max-w-xs" aria-label="Media file to transcribe" />
         <hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
 
-        <span class="label-text">Language</span>
+        <label class="label-text" for="parakeet-hf-language">Language</label>
         <select id="parakeet-hf-language" name="parakeet-hf-language" class="select select-bordered w-full max-w-xs"></select>
       </div>
       <div class="modal-action">
@@ -222,7 +222,7 @@
         <input id="media" type="text" placeholder="Media or HLS (.m3u8) URL" class="input input-bordered w-full max-w-xs" />
         <span style="display:block; padding:6px 0 0; font-size:80%; opacity:0.7" class="label-text">The source must allow cross-origin access (CORS).</span>
         <span style="display:block; padding:16px" class="label-text">or</span>
-        <input id="file-input" name="file" type="file" class="file-input w-full max-w-xs" title="" />
+        <input id="file-input" name="file" type="file" class="file-input w-full max-w-xs" aria-label="Media file to transcribe" />
         <hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
       </div>
       <div class="mb-3">
@@ -287,7 +287,7 @@
         <input id="parakeet-media" type="text" placeholder="Media or HLS (.m3u8) URL" class="input input-bordered w-full max-w-xs" />
         <span style="display:block; padding:6px 0 0; font-size:80%; opacity:0.7" class="label-text">The source must allow cross-origin access (CORS).</span>
         <span style="display:block; padding:16px" class="label-text">or</span>
-        <input id="parakeet-file-input" name="file" type="file" class="file-input w-full max-w-xs" title="" />
+        <input id="parakeet-file-input" name="file" type="file" class="file-input w-full max-w-xs" aria-label="Media file to transcribe" />
         <hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
       </div>
       <div class="form-text" style="font-size: 90%;">
@@ -445,10 +445,10 @@ <h2 id="recents-title">Recents</h2>
               <li><label for="file-import-vtt-dialog">Import VTT</label></li>
             </ul>
           </div>
-          <input type="checkbox" id="info-modal" class="modal-toggle" />
+          <input type="checkbox" id="info-modal" class="modal-toggle" tabindex="-1" aria-hidden="true" />
           <div class="modal">
             <div class="modal-box relative">
-              <label for="info-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+              <label for="info-modal" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
               <h3 class="text-lg font-bold">Transcription</h3>
               <div id="transcription-info" class="py-4">
                 <p>Nothing transcribed yet – details of the service, model and processing time will appear here.</p>
@@ -494,10 +494,10 @@ <h3 class="text-lg font-bold">Topics</h3>
           <button id="transcript-editor-btn" class="btn btn-square btn-outline tooltip" data-tip="Edit transcript" style="margin-right:4px" aria-label="Edit transcript" disabled>
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
           </button>
-          <input type="checkbox" id="captions-modal" class="modal-toggle" />
+          <input type="checkbox" id="captions-modal" class="modal-toggle" tabindex="-1" aria-hidden="true" />
           <div class="modal" style="content-visibility: hidden;">
             <div class="modal-box relative">
-              <label for="captions-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+              <label for="captions-modal" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
               <button id="regenerate-btn" class="btn btn-disabled btn-outline btn-primary">Re-generate Captions from Transcript <svg id="regenerate-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-restart"><path d="M21 6H3"></path><path d="M7 12H3"></path><path d="M7 18H3"></path><path d="M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14"></path><path d="M11 10v4h4"></path></svg></button>
               <div id="caption-editor">
                 <center>Preparing captions....</center>
@@ -741,10 +741,10 @@ <h3 class="font-bold">Captions have been edited.</h3>
   </div>
 
   <!-- Media export modal (#289/#291/#292) — wired by js/media-export.js -->
-  <input type="checkbox" id="export-modal" class="modal-toggle" />
+  <input type="checkbox" id="export-modal" class="modal-toggle" tabindex="-1" aria-hidden="true" />
   <div class="modal">
     <div class="modal-box" style="max-width:26rem">
-      <label for="export-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+      <label for="export-modal" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
       <h3 class="font-bold text-lg" style="margin-bottom:12px">Export media</h3>
       <div style="display:flex; flex-direction:column; gap:8px; margin-bottom:14px">
         <label style="display:flex; gap:10px; align-items:center; cursor:pointer">
@@ -803,10 +803,10 @@ <h3 class="font-bold text-lg" style="margin-bottom:12px">Export media</h3>
     </div>
   </div>
 
-  <input type="checkbox" id="interactive-export-modal" class="modal-toggle" />
+  <input type="checkbox" id="interactive-export-modal" class="modal-toggle" tabindex="-1" aria-hidden="true" />
   <div class="modal">
     <div class="modal-box" style="max-width:26rem">
-      <label for="interactive-export-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+      <label for="interactive-export-modal" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
       <h3 class="font-bold text-lg" style="margin-bottom:12px">Export interactive transcript</h3>
       <label class="label-text" for="interactive-media-filename">Media file or URL</label>
       <input id="interactive-media-filename" type="text" class="input input-bordered w-full" placeholder="e.g. my-video.mp4" style="margin-top:4px" />
@@ -819,45 +819,49 @@ <h3 class="font-bold text-lg" style="margin-bottom:12px">Export interactive tran
     </div>
   </div>
 
-  <input type="checkbox" id="transcribe-modal" class="modal-toggle" />
+  <input type="checkbox" id="transcribe-modal" class="modal-toggle" tabindex="-1" aria-hidden="true" />
   <div class="modal">
     <div class="modal-box" style="max-width:36rem">
-      <label for="transcribe-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+      <label for="transcribe-modal" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
       <h3 class="font-bold text-lg"  style="margin-bottom:16px">Transcribe</h3>
 
       <!-- Local / Cloud service switch — CSS-only via these sibling radios -->
       <input type="radio" name="service-mode" id="service-local" class="service-mode-radio" checked />
       <input type="radio" name="service-mode" id="service-cloud" class="service-mode-radio" />
-      <div class="service-switch" role="tablist" aria-label="Service type">
-        <label for="service-local" role="tab">Local</label>
-        <label for="service-cloud" role="tab">Cloud</label>
+      <!-- The switch is a native radio pair (the sr-only inputs above); labels
+           carry the visible UI. No ARIA tab roles: label/input don't allow
+           role="tab" and the CSS-only pattern can't satisfy tablist's required
+           structure (#402) — native radio semantics announce correctly. -->
+      <div class="service-switch">
+        <label for="service-local">Local</label>
+        <label for="service-cloud">Cloud</label>
       </div>
 
       <div id="local-group">
-        <div role="tablist" class="tabs tabs-lifted">
-          <input type="radio" name="local_tabs" role="tab" class="tab" style="width:150px; white-space:nowrap" aria-label="Parakeet" checked />
-          <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-10">
+        <div class="tabs tabs-lifted">
+          <input type="radio" name="local_tabs" class="tab" style="width:150px; white-space:nowrap" aria-label="Parakeet" checked />
+          <div class="tab-content bg-base-100 border-base-300 rounded-box p-10">
             <client-parakeet-service templateSelector="#parakeet-local-template"></client-parakeet-service>
           </div>
-          <input type="radio" name="local_tabs" role="tab" class="tab" style="width:150px; white-space:nowrap" aria-label="Whisper" />
-          <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-10">
+          <input type="radio" name="local_tabs" class="tab" style="width:150px; white-space:nowrap" aria-label="Whisper" />
+          <div class="tab-content bg-base-100 border-base-300 rounded-box p-10">
             <client-whisper-service templateSelector="#whisper-client-template"></client-whisper-service>
           </div>
         </div>
       </div>
 
       <div id="cloud-group">
-        <div role="tablist" class="tabs tabs-lifted">
-          <input type="radio" name="cloud_tabs" role="tab" class="tab" style="width:150px; white-space:nowrap" aria-label="AssemblyAI" checked />
-          <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-10">
+        <div class="tabs tabs-lifted">
+          <input type="radio" name="cloud_tabs" class="tab" style="width:150px; white-space:nowrap" aria-label="AssemblyAI" checked />
+          <div class="tab-content bg-base-100 border-base-300 rounded-box p-10">
             <assemblyai-service templateSelector="#assemblyai-modal-template"></assemblyai-service>
           </div>
-          <input type="radio" name="cloud_tabs" role="tab" class="tab" style="width:150px; white-space:nowrap" aria-label="Deepgram" />
-          <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-10">
+          <input type="radio" name="cloud_tabs" class="tab" style="width:150px; white-space:nowrap" aria-label="Deepgram" />
+          <div class="tab-content bg-base-100 border-base-300 rounded-box p-10">
             <deepgram-service templateSelector="#deepgram-modal-template"></deepgram-service>
           </div>
-          <input type="radio" name="cloud_tabs" role="tab" class="tab" style="width:150px; white-space:nowrap" aria-label="Parakeet (HF)" />
-          <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-10">
+          <input type="radio" name="cloud_tabs" class="tab" style="width:150px; white-space:nowrap" aria-label="Parakeet (HF)" />
+          <div class="tab-content bg-base-100 border-base-300 rounded-box p-10">
             <parakeet-hf-service templateSelector="#parakeet-hf-modal-template"></parakeet-hf-service>
           </div>
         </div>
@@ -865,10 +869,10 @@ <h3 class="font-bold text-lg"  style="margin-bottom:16px">Transcribe</h3>
     </div>
   </div>
 
-  <input type="checkbox" id="align-modal" class="modal-toggle" />
+  <input type="checkbox" id="align-modal" class="modal-toggle" tabindex="-1" aria-hidden="true" />
   <div class="modal">
     <div class="modal-box">
-      <label for="align-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+      <label for="align-modal" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
       <h3 class="font-bold text-lg"  style="margin-bottom:16px">Align</h3>
       
       <div class="flex flex-col gap-4 w-full">
@@ -887,10 +891,10 @@ <h3 class="font-bold text-lg"  style="margin-bottom:16px">Align</h3>
     </div>
   </div>
 
-  <input type="checkbox" id="remove-gaps-modal" class="modal-toggle" />
+  <input type="checkbox" id="remove-gaps-modal" class="modal-toggle" tabindex="-1" aria-hidden="true" />
   <div class="modal">
     <div class="modal-box">
-      <label for="remove-gaps-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+      <label for="remove-gaps-modal" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
       <h3 class="font-bold text-lg" style="margin-bottom:16px">Remove Silent Gaps</h3>
 
       <div class="flex flex-col gap-4 w-full">
@@ -938,10 +942,10 @@ <h3 class="font-bold text-lg" style="margin-bottom:16px">Remove Silent Gaps</h3>
     </div>
   </div>
 
-  <input type="checkbox" id="regenerate-captions-modal" class="modal-toggle" />
+  <input type="checkbox" id="regenerate-captions-modal" class="modal-toggle" tabindex="-1" aria-hidden="true" />
   <div class="modal">
     <div class="modal-box">
-      <label for="regenerate-captions-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+      <label for="regenerate-captions-modal" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
       <div class="flex flex-col gap-4 w-full">
         <h3 class="font-bold text-lg">Caption Regeneration </h3>
         <p>Any changes you made to the captions will be lost.</p>
@@ -971,11 +975,11 @@ <h3 class="font-bold text-lg">Caption Regeneration </h3>
   <div class="hidden-label-holder">
   <label for="file-save-dialog">Open Save to Local Storage Dialog</label>
   </div>
-  <input type="checkbox" id="file-save-dialog" class="modal-toggle" />
+  <input type="checkbox" id="file-save-dialog" class="modal-toggle" tabindex="-1" aria-hidden="true" />
   <div class="modal">
   <div class="modal-box">
     <div class="flex flex-col gap-4 w-full">
-      <label for="file-save-dialog" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+      <label for="file-save-dialog" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
       <h3 class="font-bold text-lg">Save to Local Storage</h3>
       <input type="text" id="save-localstorage-filename" name="save-localstorage-filename" placeholder="File name" class="input input-bordered w-full max-w-xs" />
     </div>
@@ -990,13 +994,13 @@ <h3 class="font-bold text-lg">Save to Local Storage</h3>
   <div class="hidden-label-holder">
   <label for="file-load-dialog">Open Load from Local Storage Dialog</label>
   </div>
-  <input type="checkbox" id="file-load-dialog" class="modal-toggle" />
+  <input type="checkbox" id="file-load-dialog" class="modal-toggle" tabindex="-1" aria-hidden="true" />
   <div class="modal">
   <div class="modal-box">
     <div class="flex flex-col gap-4 w-full">
-      <label for="file-load-dialog" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+      <label for="file-load-dialog" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
       <h3 class="font-bold text-lg">Load from Local Storage</h3>
-      <select id="load-localstorage-filename" class="select select-bordered w-full max-w-xs">
+      <select id="load-localstorage-filename" aria-label="Load a saved project" class="select select-bordered w-full max-w-xs">
       </select>
     </div>
     <div class="modal-action">
@@ -1007,11 +1011,11 @@ <h3 class="font-bold text-lg">Load from Local Storage</h3>
   </div>
  
 
-  <script src="./js/hyperaudio-lite-editor-storage.js?v=0.7.2"></script>
+  <script src="./js/hyperaudio-lite-editor-storage.js?v=0.8.3"></script>
 
   <script src="js/editor-file-menu.js?v=0.6.12"></script>
 
-  <script src="./js/hyperaudio-lite-editor-export.js?v=0.7.6" type="module"> </script>
+  <script src="./js/hyperaudio-lite-editor-export.js?v=0.8.3" type="module"> </script>
   <!-- end of localstorage additions -->
 
   <!-- caption editor additions -->
@@ -1048,6 +1052,9 @@ <h3 class="font-bold text-lg">Load from Local Storage</h3>
   <!-- responsive small-screen UI toggles (#349) -->
   <script src="js/responsive.js?v=0.7.2"></script>
 
+  <!-- keyboard operability for modal label-buttons (#402) -->
+  <script src="js/a11y.js?v=0.8.3"></script>
+
   <!-- service worker script for PWA -->
   <script src="js/editor-service-worker.js?v=0.6.12"></script>
   <script type="module" src="js/editor-audio-cut.js?v=0.7.4"></script>
diff --git a/js/a11y.js b/js/a11y.js
new file mode 100644
index 0000000..ebfba96
--- /dev/null
+++ b/js/a11y.js
@@ -0,0 +1,64 @@
+/**
+ * a11y.js
+ * (C) The Hyperaudio Project
+ * @version 0.8.3 — last changed in release 0.8.3
+ * @license MIT
+ *
+ * Keyboard operability for the DaisyUI modal pattern (#402).
+ *
+ * Modals open/close via visually-hidden `input.modal-toggle` checkboxes driven
+ * by `<label for>` buttons. The toggles are now `aria-hidden` + `tabindex=-1`
+ * (they're a CSS mechanism, and were flagged as unlabeled / multiply-labelled
+ * form fields), which removes what was previously the only keyboard path — an
+ * invisible focused checkbox. This module makes the VISIBLE label-buttons the
+ * keyboard surface instead: any `label[for]` that targets a modal-toggle gets
+ * `tabindex="0"` and activates on Enter/Space, like a real button.
+ *
+ * A MutationObserver wires label-buttons injected after load (the import
+ * dialogs render from custom-element templates; caption mode injects the
+ * floating regenerate button at runtime).
+ */
+
+(function () {
+  const targetsModalToggle = (label) => {
+    const id = label.getAttribute('for');
+    if (!id) return false;
+    const target = document.getElementById(id);
+    return target !== null && target.classList.contains('modal-toggle');
+  };
+
+  const wire = (root) => {
+    root.querySelectorAll('label[for]:not([data-a11y-wired])').forEach((label) => {
+      if (!targetsModalToggle(label)) return;
+      label.dataset.a11yWired = '1';
+      if (!label.hasAttribute('tabindex')) label.setAttribute('tabindex', '0');
+    });
+  };
+
+  // Activate on Enter/Space, matching button behaviour (delegated so it also
+  // covers labels wired after load).
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    const label = e.target instanceof Element ? e.target.closest('label[data-a11y-wired]') : null;
+    if (label === null) return;
+    e.preventDefault(); // stop Space scrolling the page
+    label.click();
+  });
+
+  const init = () => {
+    wire(document);
+    new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        for (const node of m.addedNodes) {
+          if (node.nodeType === Node.ELEMENT_NODE) wire(node.parentNode || node);
+        }
+      }
+    }).observe(document.body, { childList: true, subtree: true });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
diff --git a/js/hyperaudio-lite-editor-export.js b/js/hyperaudio-lite-editor-export.js
index b400386..a32e568 100644
--- a/js/hyperaudio-lite-editor-export.js
+++ b/js/hyperaudio-lite-editor-export.js
@@ -121,16 +121,16 @@ class ImportDeepgramJson extends HTMLElement {
     <div class="hidden-label-holder">
       <label for="file-import-deepgram-json-dialog">Import Deepgram JSON Dialog</label>
     </div>
-    <input type="checkbox" id="file-import-deepgram-json-dialog" class="modal-toggle" />
+    <input type="checkbox" id="file-import-deepgram-json-dialog" class="modal-toggle" tabindex="-1" aria-hidden="true" />
     <div class="modal">
     <div class="modal-box">
       <div class="flex flex-col gap-4 w-full">
-        <label for="file-import-deepgram-json-dialog" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+        <label for="file-import-deepgram-json-dialog" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
         <h3 class="font-bold text-lg">Import Deepgram JSON Dialog</h3>
         <input id="deepgram-json-media" type="text" placeholder="Link to media" class="input input-bordered w-full max-w-xs" />
-        <span class="label-text">or use local media file</span>
+        <label class="label-text" for="deepgram-json-file">or use local media file</label>
         <input id="deepgram-json-file" name="deepgram-json-file" type="file" class="file-input w-full max-w-xs" />
-        <span class="label-text">select local JSON file</span>
+        <label class="label-text" for="deepgram-json">select local JSON file</label>
         <input id="deepgram-json" name="deepgram-json" type="file" class="file-input w-full max-w-xs" />
       </div>
       <div class="modal-action">
@@ -248,16 +248,16 @@ class ImportSrt extends HTMLElement {
     <div class="hidden-label-holder">
       <label for="file-import-srt-dialog">Import SRT Dialog</label>
     </div>
-    <input type="checkbox" id="file-import-srt-dialog" class="modal-toggle" />
+    <input type="checkbox" id="file-import-srt-dialog" class="modal-toggle" tabindex="-1" aria-hidden="true" />
     <div class="modal">
     <div class="modal-box">
       <div class="flex flex-col gap-4 w-full">
-        <label for="file-import-srt-dialog" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+        <label for="file-import-srt-dialog" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
         <h3 class="font-bold text-lg">Import SRT Dialog</h3>
         <input id="srt-media" type="text" placeholder="Link to media" class="input input-bordered w-full max-w-xs" />
-        <span class="label-text">or use local media file</span>
+        <label class="label-text" for="srt-file">or use local media file</label>
         <input id="srt-file" name="srt-file" type="file" class="file-input w-full max-w-xs" />
-        <span class="label-text">select local SRT file</span>
+        <label class="label-text" for="srt">select local SRT file</label>
         <input id="srt" name="srt" type="file" class="file-input w-full max-w-xs" />
       </div>
       <div class="modal-action">
@@ -372,16 +372,16 @@ class ImportVtt extends HTMLElement {
     <div class="hidden-label-holder">
       <label for="file-import-vtt-dialog">Import VTT Dialog</label>
     </div>
-    <input type="checkbox" id="file-import-vtt-dialog" class="modal-toggle" />
+    <input type="checkbox" id="file-import-vtt-dialog" class="modal-toggle" tabindex="-1" aria-hidden="true" />
     <div class="modal">
     <div class="modal-box">
       <div class="flex flex-col gap-4 w-full">
-        <label for="file-import-vtt-dialog" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
+        <label for="file-import-vtt-dialog" class="btn btn-sm btn-circle absolute right-2 top-2" aria-label="Close">✕</label>
         <h3 class="font-bold text-lg">Import VTT Dialog</h3>
         <input id="vtt-media" type="text" placeholder="Link to media" class="input input-bordered w-full max-w-xs" />
-        <span class="label-text">or use local media file</span>
+        <label class="label-text" for="vtt-file">or use local media file</label>
         <input id="vtt-file" name="vtt-file" type="file" class="file-input w-full max-w-xs" />
-        <span class="label-text">select local VTT file</span>
+        <label class="label-text" for="vtt">select local VTT file</label>
         <input id="vtt" name="vtt" type="file" class="file-input w-full max-w-xs" />
       </div>
       <div class="modal-action">
diff --git a/js/hyperaudio-lite-editor-storage.js b/js/hyperaudio-lite-editor-storage.js
index f8349a1..8f8dbf9 100644
--- a/js/hyperaudio-lite-editor-storage.js
+++ b/js/hyperaudio-lite-editor-storage.js
@@ -359,7 +359,9 @@ function loadLocalStorageOptions(storage = window.localStorage) {
   setFileSelectListeners();
 
   if (storage.length === 0) {
-    filePicker.insertAdjacentHTML("beforeend", `<li style="padding:8px 16px; opacity:0.55">No files saved.</li>`);
+    // opacity 0.75 (not 0.55) so the composited grey still meets the 4.5:1
+    // contrast ratio on the white card (#402)
+    filePicker.insertAdjacentHTML("beforeend", `<li style="padding:8px 16px; opacity:0.75">No files saved.</li>`);
   }
 }
 
diff --git a/package-lock.json b/package-lock.json
index 0ceacd2..e7b6ae7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "devDependencies": {
         "@playwright/test": "^1.49.0",
         "autoprefixer": "^10.4.14",
+        "axe-core": "^4.12.1",
         "cssnano": "^6.0.1",
         "daisyui": "^4.4.2",
         "postcss": "^8.4.24",
@@ -198,6 +199,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axe-core": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+      "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
diff --git a/package.json b/package.json
index fd748f9..31addf3 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
 {
   "devDependencies": {
+    "@playwright/test": "^1.49.0",
     "autoprefixer": "^10.4.14",
+    "axe-core": "^4.12.1",
     "cssnano": "^6.0.1",
     "daisyui": "^4.4.2",
     "postcss": "^8.4.24",
-    "tailwindcss": "^3.3.2",
-    "@playwright/test": "^1.49.0"
+    "tailwindcss": "^3.3.2"
   },
   "name": "hyperaudio-lite-editor",
   "private": true,
@@ -14,4 +15,4 @@
     "test:unit": "node --test \"__TEST__/unit/**/*.test.mjs\"",
     "test:e2e": "playwright test"
   }
-}
\ No newline at end of file
+}