From 9ee53fc886a51f6504349a38ba4ddd56dec6db84 Mon Sep 17 00:00:00 2001
From: JB <jb-apps@outlook.com>
Date: Sun, 12 Oct 2025 12:20:15 -0700
Subject: [PATCH] feat: Update entity preview button to use new data attributes
 and improve accessibility

---
 abogen/web/static/prepare.js                  | 19 +++++++++++++------
 .../partials/new_job_step_entities.html       |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/abogen/web/static/prepare.js b/abogen/web/static/prepare.js
index ed7fb8a..ff18a01 100644
--- a/abogen/web/static/prepare.js
+++ b/abogen/web/static/prepare.js
@@ -1591,7 +1591,7 @@ const initPrepare = (root = document) => {
             }
           }
 
-          const previewButton = item.querySelector('[data-role="entity-preview"]');
+          const previewButton = item.querySelector('[data-entity-preview="true"]');
           if (previewButton) {
             const previewVoice = overrideLookup.get(normalized.toLowerCase())?.voice || baseVoice || "";
             const previewText = Array.isArray(entity.samples) && entity.samples.length
@@ -1606,6 +1606,7 @@ const initPrepare = (root = document) => {
               previewButton.dataset.language = languageCode;
               previewButton.dataset.speed = defaultSpeed;
               previewButton.dataset.useGpu = useGpuDefault;
+              previewButton.dataset.previewSource = "entity";
             }
           }
 
@@ -2077,7 +2078,8 @@ const initPrepare = (root = document) => {
         applyEntityPayload(body, { highlightId: highlighted });
         if (highlightMode === "inline") {
           highlightedOverrideId = highlighted;
-          activateEntityTab("entities");
+          const targetPanel = activeEntityPanel || "entities";
+          activateEntityTab(targetPanel);
         } else {
           activateEntityTab("manual");
           if (manualOverrideResultsList) {
@@ -2103,8 +2105,7 @@ const initPrepare = (root = document) => {
       });
     }
 
-    if (entityListNode) {
-      entityListNode.addEventListener("click", (event) => {
+    const handleEntityListClick = (event) => {
         const addTrigger = event.target.closest('[data-role="entity-add-override"]');
         if (addTrigger) {
           event.preventDefault();
@@ -2127,6 +2128,7 @@ const initPrepare = (root = document) => {
           }
 
           inlineOverride.hidden = false;
+          inlineOverride.setAttribute("aria-hidden", "false");
           const pronInput = inlineOverride.querySelector('[data-role="manual-override-pronunciation"]');
           const voiceSelect = inlineOverride.querySelector('[data-role="manual-override-voice"]');
           const previewButton = inlineOverride.querySelector('[data-role="speaker-preview"]');
@@ -2204,11 +2206,16 @@ const initPrepare = (root = document) => {
             const inlineOverride = removeTrigger.closest('[data-role="inline-override"]');
             if (inlineOverride) {
               inlineOverride.hidden = true;
+              inlineOverride.setAttribute("aria-hidden", "true");
             }
           }
         }
-      });
-    }
+    };
+
+    [peopleListNode, entityListNode].forEach((list) => {
+      if (!list) return;
+      list.addEventListener("click", handleEntityListClick);
+    });
 
     if (manualOverrideSearchButton) {
       manualOverrideSearchButton.addEventListener("click", () => {
diff --git a/abogen/web/templates/partials/new_job_step_entities.html b/abogen/web/templates/partials/new_job_step_entities.html
index 437b700..2f0d3d5 100644
--- a/abogen/web/templates/partials/new_job_step_entities.html
+++ b/abogen/web/templates/partials/new_job_step_entities.html
@@ -404,7 +404,7 @@
                   </div>
                   <div class="entity-summary__actions">
                     <span class="badge badge--muted" data-role="entity-count"></span>
-                    <button type="button" class="button button--ghost button--small" data-role="entity-preview" hidden>Preview</button>
+                    <button type="button" class="button button--ghost button--small" data-role="speaker-preview" data-entity-preview="true" hidden>Preview</button>
                     <button type="button" class="button button--ghost button--small" data-role="entity-add-override">Add manual override</button>
                   </div>
                 </header>