feat: Update entity preview button to use new data attributes and improve accessibility

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) {
+    const handleEntityListClick = (event) => {
-      entityListNode.addEventListener("click", (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", () => {

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>