fix(list-box): correct button/description translations based on selection count (#2139)

The `ListBoxSelection` component now properly handles
translations for the clear button based on the selected items:

- Fix `buttonLabel` and `description` to use the same translation logic
- Add tests for custom translations in both `ComboBox` and `MultiSelect`

src/ListBox/ListBoxSelection.svelte

@@ -44,13 +44,12 @@
   $: if (ctx && ref) {
     ctx.declareRef({ key: "selection", ref });
   }
-
+  $: translationId =
-  $: translationId = selectionCount
+    selectionCount === undefined
-    ? translationIds.clearAll
+      ? translationIds.clearSelection
-    : translationIds.clearSelection;
+      : translationIds.clearAll;
   $: buttonLabel =
-    translateWithId?.(translationIds.clearAll) ??
+    translateWithId?.(translationId) ?? defaultTranslations[translationId];
-    defaultTranslations[translationIds.clearAll];
   $: description =
     translateWithId?.(translationId) ?? defaultTranslations[translationId];
 </script>

tests/ComboBox/ComboBox.test.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { ComboBox } from "carbon-components-svelte";
-  import type { ComboBoxItem } from "carbon-components-svelte/ComboBox/ComboBox.svelte";
+  import type { ComponentProps } from "svelte";
 
-  export let items: ComboBoxItem[] = [
+  export let items: ComponentProps<ComboBox>["items"] = [
     { id: "0", text: "Slack" },
     { id: "1", text: "Email" },
     { id: "2", text: "Fax" },
   ];
-  export let selectedId: string | undefined = undefined;
+  export let selectedId: ComponentProps<ComboBox>["selectedId"] = undefined;
   export let value = "";
   export let disabled = false;
   export let invalid = false;
@@ -20,8 +20,12 @@
   export let warnText = "";
   export let helperText = "";
   export let size: "sm" | "xl" | undefined = undefined;
-  export let shouldFilterItem = (item: ComboBoxItem, value: string) =>
+  export let shouldFilterItem: ComponentProps<ComboBox>["shouldFilterItem"] = (
-    item.text.toLowerCase().includes(value.toLowerCase());
+    item,
+    value,
+  ) => item.text.toLowerCase().includes(value.toLowerCase());
+  export let translateWithIdSelection: ComponentProps<ComboBox>["translateWithIdSelection"] =
+    undefined;
 </script>
 
 <ComboBox
@@ -40,6 +44,7 @@
   {warn}
   {warnText}
   {shouldFilterItem}
+  {translateWithIdSelection}
   on:select={(e) => {
     console.log("select", e.detail);
   }}

tests/ComboBox/ComboBox.test.ts

@@ -60,13 +60,35 @@ describe("ComboBox", () => {
       },
     });
 
-    const clearButton = screen.getByRole("button", { name: /clear/i });
+    const clearButton = screen.getByRole("button", {
+      name: "Clear selected item",
+    });
     await user.click(clearButton);
 
     expect(consoleLog).toHaveBeenCalledWith("clear", expect.any(String));
     expect(screen.getByRole("textbox")).toHaveValue("");
   });
 
+  it("should use custom translations when translateWithId is provided", () => {
+    const customTranslations = {
+      clearSelection: "Remove selected item",
+      clearAll: "Remove all items",
+    } as const;
+
+    render(ComboBox, {
+      props: {
+        selectedId: "1",
+        value: "Email",
+        translateWithIdSelection: (id) => customTranslations[id],
+      },
+    });
+
+    const clearButton = screen.getByRole("button", {
+      name: "Remove selected item",
+    });
+    expect(clearButton).toBeInTheDocument();
+  });
+
   it("should handle disabled state", () => {
     render(ComboBox, { props: { disabled: true } });
 

tests/MultiSelect/MultiSelect.test.ts

@@ -124,7 +124,7 @@ describe("MultiSelect", () => {
       await toggleOption("C");
       expect(nthRenderedOptionText(0)).toBe("A");
 
-      // The newly-selected item also shouldn’t move after the dropdown is closed
+      // The newly-selected item also shouldn't move after the dropdown is closed
       // and reopened.
       await closeMenu();
       await openMenu();
@@ -179,6 +179,42 @@ describe("MultiSelect", () => {
       const input = screen.getByRole("combobox");
       expect(input).toHaveValue("");
     });
+
+    it("should show correct clear button label regardless of selection count", async () => {
+      render(MultiSelect, {
+        items,
+        selectedIds: ["0"],
+      });
+
+      expect(
+        screen.getByLabelText("Clear all selected items"),
+      ).toBeInTheDocument();
+
+      await openMenu();
+      await toggleOption("Email");
+      expect(
+        screen.getByLabelText("Clear all selected items"),
+      ).toBeInTheDocument();
+    });
+
+    it("should use custom translations when translateWithId is provided", async () => {
+      const customTranslations = {
+        clearSelection: "Remove selected item",
+        clearAll: "Remove all items",
+      } as const;
+
+      render(MultiSelect, {
+        items,
+        selectedIds: ["0"],
+        translateWithIdSelection: (id) => customTranslations[id],
+      });
+
+      expect(screen.getByLabelText("Remove all items")).toBeInTheDocument();
+
+      await openMenu();
+      await toggleOption("Email");
+      expect(screen.getByLabelText("Remove all items")).toBeInTheDocument();
+    });
   });
 
   describe("keyboard navigation", () => {