Give MultiSelect chips accessible names and start creation fields empty.

Catalog chips now announce Select or Deselect so they are named for assistive tech. Method and value modals open blank; Generate draft inserts the catalog copy that used to be prefilled, and Customize still keeps the section headings.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/components/FinalReviewPage.test.tsx

@@ -12,6 +12,10 @@ import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalRe
 import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
 import type { CreateFlowState } from "../../app/(app)/create/types";
 
+function catalogChipName(label: string) {
+  return new RegExp(`^(Select|Deselect) ${label}$`);
+}
+
 async function confirmDiscardCustomizeEdits() {
   fireEvent.click(
     await screen.findByRole("button", { name: "Discard" }),
@@ -232,7 +236,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
   it("opens the chip modal when a chip is clicked, matching the preset copy", async () => {
     render(<FinalReviewWithCustomizeSelections />);
 
-    const signalChip = await screen.findByRole("button", { name: "Signal" });
+    const signalChip = await screen.findByRole("button", { name: catalogChipName("Signal") });
     fireEvent.click(signalChip);
 
     // Modal subtitle is the `supportText` from communication.json for the
@@ -273,7 +277,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Video Meetings" }),
+      await screen.findByRole("button", { name: catalogChipName("Video Meetings") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(within(dialog).getAllByRole("textbox")).toHaveLength(3);
@@ -287,7 +291,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
 
   it("method chip modal kebab offers Customize but not Duplicate", async () => {
     render(<FinalReviewWithCustomizeSelections />);
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
       within(dialog).getByRole("button", { name: /more options/i }),
@@ -317,7 +321,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     }
     render(<CoreValuesHarness />);
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
@@ -348,7 +352,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     }
     render(<CoreValuesHarness />);
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
@@ -366,7 +370,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
   it("opens method chip modal editable, with Save disabled until a field changes", async () => {
     render(<FinalReviewWithCustomizeSelections />);
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
 
     const saveButton = within(dialog).getByRole("button", { name: "Save" });
@@ -400,7 +404,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     }
     render(<CoreValuesHarness />);
 
-    const chip = await screen.findByRole("button", { name: "Accessibility" });
+    const chip = await screen.findByRole("button", { name: catalogChipName("Accessibility") });
     fireEvent.click(chip);
 
     await waitFor(() => {
@@ -430,7 +434,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     render(<CoreValuesHarness />);
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(
@@ -468,7 +472,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     render(<UseWithoutChangesHarness />);
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(
@@ -514,7 +518,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const valuesDialog = await screen.findByRole("dialog");
     expect(within(valuesDialog).getAllByRole("textbox").length).toBeGreaterThan(
@@ -542,7 +546,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const methodDialog = await screen.findByRole("dialog");
     expect(within(methodDialog).getAllByRole("textbox").length).toBeGreaterThan(
       0,
@@ -567,7 +571,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     expect(
       within(dialog).getByRole("button", { name: "Remove" }),
@@ -595,7 +599,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(within(dialog).getByRole("button", { name: "Remove" }));
     await waitFor(() => {
@@ -633,7 +637,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
     void latest;
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     const saveButton = within(dialog).getByRole("button", { name: "Save" });
     expect(saveButton).toBeDisabled();
@@ -663,7 +667,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     const principleField = within(dialog).getByRole("textbox", {
       name: /core principle/i,
@@ -691,7 +695,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     const principleField = within(dialog).getByRole("textbox", {
       name: /core principle/i,
@@ -719,7 +723,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     expect(dispatchBeforeUnload()).toBe(false);
     const principleField = within(dialog).getByRole("textbox", {
@@ -750,7 +754,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Custom Comm" }),
+      await screen.findByRole("button", { name: catalogChipName("Custom Comm") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(
@@ -784,9 +788,9 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
 
     expect(
-      await screen.findByRole("button", { name: "Garden IRC" }),
+      await screen.findByRole("button", { name: catalogChipName("Garden IRC") }),
     ).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Signal" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: catalogChipName("Signal") })).toBeInTheDocument();
   });
 
   it("shows editable field blocks for user-authored communication chips when configured", async () => {
@@ -818,7 +822,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Custom Comm" }),
+      await screen.findByRole("button", { name: catalogChipName("Custom Comm") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(
@@ -861,7 +865,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Custom Comm" }),
+      await screen.findByRole("button", { name: catalogChipName("Custom Comm") }),
     );
     const dialog = await screen.findByRole("dialog");
     const notesField = within(dialog).getByRole("textbox", { name: /notes/i });
@@ -887,7 +891,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
       within(dialog).getByRole("button", { name: /more options/i }),
@@ -921,7 +925,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
       within(dialog).getByRole("button", { name: /more options/i }),
@@ -957,7 +961,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
       within(dialog).getByRole("button", { name: /more options/i }),