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

This commit is contained in:
JB
2025-10-12 12:20:15 -07:00
parent 82d780db0d
commit 9ee53fc886
2 changed files with 14 additions and 7 deletions
+12 -5
View File
@@ -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", () => {
@@ -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>