mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
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:
parent
c6c80d35a9
commit
dd1338ffc4
3 changed files with 16 additions and 5 deletions
|
@ -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 />
|
||||||
|
|
|
@ -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" } });
|
||||||
|
|
||||||
|
|
|
@ -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");
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue