Skip to content

Commit dd1338f

Browse files
authored
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.
1 parent c6c80d3 commit dd1338f

File tree

3 files changed

+16
-5
lines changed

3 files changed

+16
-5
lines changed

src/ListBox/ListBoxSelection.svelte

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@
4848
$: translationId = selectionCount
4949
? translationIds.clearAll
5050
: translationIds.clearSelection;
51-
51+
$: buttonLabel =
52+
translateWithId?.(translationIds.clearAll) ??
53+
defaultTranslations[translationIds.clearAll];
5254
$: description =
5355
translateWithId?.(translationId) ?? defaultTranslations[translationId];
5456
</script>
@@ -79,7 +81,7 @@
7981
}
8082
}}
8183
{disabled}
82-
aria-label={translationIds.clearAll}
84+
aria-label={buttonLabel}
8385
title={description}
8486
>
8587
<Close />

tests/ComboBox/ComboBox.test.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,16 @@ describe("ComboBox", () => {
193193
expect(screen.getByRole("listbox")).toHaveClass("bx--list-box--up");
194194
});
195195

196+
it("should clear filter on selection clear", async () => {
197+
render(ComboBoxCustom, { props: { selectedId: "1" } });
198+
199+
const clearButton = screen.getByLabelText("Clear selected item");
200+
await user.click(clearButton);
201+
202+
const input = screen.getByRole("textbox");
203+
expect(input).toHaveValue("");
204+
});
205+
196206
it("should programmatically clear selection", async () => {
197207
render(ComboBoxCustom, { props: { selectedId: "1" } });
198208

tests/MultiSelect/MultiSelect.test.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -166,15 +166,14 @@ describe("MultiSelect", () => {
166166
expect(screen.queryByText("Fax")).not.toBeInTheDocument();
167167
});
168168

169-
// TODO(bug): ListBoxSelection aria-labels should be user-friendly
170-
it.skip("should clear filter on selection clear", async () => {
169+
it("should clear filter on selection clear", async () => {
171170
render(MultiSelect, {
172171
items,
173172
filterable: true,
174173
selectedIds: ["0"],
175174
});
176175

177-
const clearButton = screen.getByLabelText("Clear all");
176+
const clearButton = screen.getByLabelText("Clear all selected items");
178177
await user.click(clearButton);
179178

180179
const input = screen.getByRole("combobox");

0 commit comments

Comments
 (0)