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

src/components/AccentPhrase.vue

@@ -130,6 +130,7 @@
             width: `${scope.value.length + 1}em`,
             minWidth: '50px',
           }"
+          :aria-label="`${index + 1}番目のアクセント区間の読み`"
           autofocus
           outlined
           @keyup.enter="scope.set"
@@ -200,11 +201,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,45 @@ 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[3].fill("ヨン,、,、");
+  await inputs[3].press("Enter");
+
+  await page.getByText("ジュ", { exact: true }).click();
+  await inputs[2].fill("サンジュウ,、,、");
+  await inputs[2].press("Enter");
+
+  await page.getByText("ヒャ", { exact: true }).click();
+  await inputs[1].fill("ニヒャク、");
+  await inputs[1].press("Enter");
+
+  await page.getByText("セ", { exact: true }).click();
+  await inputs[0].fill("セン,");
+  await inputs[0].press("Enter");
+
+  await expect(page.getByText("セン、")).toBeVisible();
+  await expect(page.getByText("ニヒャク、")).toBeVisible();
+  await expect(page.getByText("サンジュウ、")).toBeVisible();
+  await expect(page.getByText("ヨン、")).not.toBeVisible();
+});
+
 test("詳細調整欄のコンテキストメニュー", async ({ page }) => {
   await navigateToMain(page);
   await page.waitForTimeout(100);