feat: 詳細調整欄でのアクセント区間単位の読み変更時に読点が含まれる場合の挙動を改善 (VOICEVOX#1574)

Co-authored-by: Hiroshiba <[email protected]>

src/components/AccentPhrase.vue

@@ -127,6 +127,7 @@
             width: `${scope.value.length + 1}em`,
             minWidth: '50px',
           }"
+          :aria-label="`${index + 1}番目のアクセント区間の読み`"
           autofocus
           outlined
           @keyup.enter="scope.set"
@@ -213,11 +214,19 @@ const pronunciation = computed(() => {
 
 const handleChangePronounce = (newPronunciation: string) => {
   let popUntilPause = false;
-  newPronunciation = newPronunciation.replace(",", "、");
-  if (newPronunciation.slice(-1) == "、" && !props.isLast) {
-    // 生成エラー回避
-    newPronunciation += "ア";
-    popUntilPause = true;
+  newPronunciation = newPronunciation
+    .replace(/,/g, "、")
+    // 連続する読点をまとめる
+    .replace(/、{2,}/g, "、");
+  if (newPronunciation.endsWith("、")) {
+    if (props.isLast) {
+      // 末尾の読点を削除
+      newPronunciation = newPronunciation.slice(0, -1);
+    } else {
+      // 生成エラー回避
+      newPronunciation += "ア";
+      popUntilPause = true;
+    }
   }
   store.dispatch("COMMAND_CHANGE_SINGLE_ACCENT_PHRASE", {
     audioKey: props.audioKey,

tests/e2e/browser/音声詳細.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect, Page } from "@playwright/test";
 
 import { navigateToMain } from "../navigators";
 
@@ -8,6 +8,52 @@ test.beforeEach(async ({ page }) => {
   await page.goto(BASE_URL);
 });
 
+function getNthAccentPhraseInput({ page, n }: { page: Page; n: number }) {
+  return page.getByLabel(`${n + 1}番目のアクセント区間の読み`);
+}
+
+test("単体アクセント句の読み変更", async ({ page }) => {
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+
+  const textField = page.getByRole("textbox", { name: "1行目" });
+  await textField.click();
+  await textField.fill("1234");
+  await textField.press("Enter");
+
+  const inputs = Array.from({ length: 4 }, (_, i) =>
+    getNthAccentPhraseInput({ page, n: i })
+  );
+
+  // 読点を追加
+  await page.getByText("セ", { exact: true }).click();
+  await inputs[0].fill("セン、");
+  await inputs[0].press("Enter");
+  await page.waitForTimeout(100);
+  await expect(page.getByText("セン、")).toBeVisible();
+
+  // 「,」が読点に変換される
+  await page.getByText("ヒャ", { exact: true }).click();
+  await inputs[1].fill("ニヒャク,");
+  await inputs[1].press("Enter");
+  await page.waitForTimeout(100);
+  await expect(page.getByText("ニヒャク、")).toBeVisible();
+
+  // 連続する読点を追加すると１つに集約される
+  await page.getByText("ジュ", { exact: true }).click();
+  await inputs[2].fill("サンジュウ,、,、");
+  await inputs[2].press("Enter");
+  await page.waitForTimeout(100);
+  await expect(page.getByText("サンジュウ、")).toBeVisible();
+
+  // 最後のアクセント区間に読点をつけても無視される
+  await page.getByText("ヨ", { exact: true }).click();
+  await inputs[3].fill("ヨン,、,、");
+  await inputs[3].press("Enter");
+  await page.waitForTimeout(100);
+  await expect(page.getByText("ヨン、")).not.toBeVisible();
+});
+
 test("詳細調整欄のコンテキストメニュー", async ({ page }) => {
   await navigateToMain(page);
   await page.waitForTimeout(100);