diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte index beb800d8..f4192015 100644 --- a/src/ListBox/ListBoxSelection.svelte +++ b/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]; @@ -79,7 +81,7 @@ } }} {disabled} - aria-label={translationIds.clearAll} + aria-label={buttonLabel} title={description} > diff --git a/tests/ComboBox/ComboBox.test.ts b/tests/ComboBox/ComboBox.test.ts index 2ac7534f..f14fd581 100644 --- a/tests/ComboBox/ComboBox.test.ts +++ b/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" } }); diff --git a/tests/MultiSelect/MultiSelect.test.ts b/tests/MultiSelect/MultiSelect.test.ts index 7d2b8fae..cfd668e6 100644 --- a/tests/MultiSelect/MultiSelect.test.ts +++ b/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.skip("should clear filter on selection clear", async () => { + it("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");