mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Eric Liu 2025-03-22 08:42:02 -07:00
commit 3f2bcf75a0
3 changed files with 16 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/ListBox/ListBoxSelection.svelte
View file

@ -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 />

10
tests/ComboBox/ComboBox.test.ts
View file

@ -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" } });

5
tests/MultiSelect/MultiSelect.test.ts
View file

@ -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");