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

`ListBoxSelection`, used by `MultiSelect` and `ComboBox`, currently  
applies the wrong `aria-label` for the clear selection button. It uses
the `translateId` (e.g., `"clearAll"`) instead of the user-friendly copy.
This commit is contained in:
Eric Liu 2025-03-22 12:59:16 -07:00 committed by GitHub
commit dd1338ffc4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 5 deletions

View file

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

View file

@ -193,6 +193,16 @@ describe("ComboBox", () => {
expect(screen.getByRole("listbox")).toHaveClass("bx--list-box--up"); 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 () => { it("should programmatically clear selection", async () => {
render(ComboBoxCustom, { props: { selectedId: "1" } }); render(ComboBoxCustom, { props: { selectedId: "1" } });

View file

@ -166,15 +166,14 @@ describe("MultiSelect", () => {
expect(screen.queryByText("Fax")).not.toBeInTheDocument(); 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, { render(MultiSelect, {
items, items,
filterable: true, filterable: true,
selectedIds: ["0"], selectedIds: ["0"],
}); });
const clearButton = screen.getByLabelText("Clear all"); const clearButton = screen.getByLabelText("Clear all selected items");
await user.click(clearButton); await user.click(clearButton);
const input = screen.getByRole("combobox"); const input = screen.getByRole("combobox");