fix(list-box-selection): fix aria-label for clear button

src/ListBox/ListBoxSelection.svelte

@@ -48,7 +48,9 @@
   $: translationId = selectionCount
     ? translationIds.clearAll
     : translationIds.clearSelection;
-
+  $: buttonLabel =
+    translateWithId?.(translationIds.clearAll) ??
+    defaultTranslations[translationIds.clearAll];
   $: description =
     translateWithId?.(translationId) ?? defaultTranslations[translationId];
 </script>
@@ -79,7 +81,7 @@
         }
       }}
       {disabled}
-      aria-label={translationIds.clearAll}
+      aria-label={buttonLabel}
       title={description}
     >
       <Close />

tests/ComboBox/ComboBox.test.ts

@@ -193,6 +193,16 @@ describe("ComboBox", () => {
     expect(screen.getByRole("listbox")).toHaveClass("bx--list-box--up");
   });
 
+  it("should clear filter on selection clear", async () => {
+    render(ComboBoxCustom, { props: { selectedId: "1" } });
+
+    const clearButton = screen.getByLabelText("Clear selected item");
+    await user.click(clearButton);
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveValue("");
+  });
+
   it("should programmatically clear selection", async () => {
     render(ComboBoxCustom, { props: { selectedId: "1" } });
 

tests/MultiSelect/MultiSelect.test.ts

@@ -166,15 +166,14 @@ describe("MultiSelect", () => {
       expect(screen.queryByText("Fax")).not.toBeInTheDocument();
     });
 
-    // TODO(bug): ListBoxSelection aria-labels should be user-friendly
+    it("should clear filter on selection clear", async () => {
-    it.skip("should clear filter on selection clear", async () => {
       render(MultiSelect, {
         items,
         filterable: true,
         selectedIds: ["0"],
       });
 
-      const clearButton = screen.getByLabelText("Clear all");
+      const clearButton = screen.getByLabelText("Clear all selected items");
       await user.click(clearButton);
 
       const input = screen.getByRole("combobox");