fix(list-box): correct button/description translations based on selection count (#2139)

The `ListBoxSelection` component now properly handles
translations for the clear button based on the selected items:

- Fix `buttonLabel` and `description` to use the same translation logic
- Add tests for custom translations in both `ComboBox` and `MultiSelect`
This commit is contained in:
Eric Liu 2025-03-23 11:28:06 -07:00 committed by GitHub
commit 1a5f2d8e67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 75 additions and 13 deletions

View file

@ -124,7 +124,7 @@ describe("MultiSelect", () => {
await toggleOption("C");
expect(nthRenderedOptionText(0)).toBe("A");
// The newly-selected item also shouldnt move after the dropdown is closed
// The newly-selected item also shouldn't move after the dropdown is closed
// and reopened.
await closeMenu();
await openMenu();
@ -179,6 +179,42 @@ describe("MultiSelect", () => {
const input = screen.getByRole("combobox");
expect(input).toHaveValue("");
});
it("should show correct clear button label regardless of selection count", async () => {
render(MultiSelect, {
items,
selectedIds: ["0"],
});
expect(
screen.getByLabelText("Clear all selected items"),
).toBeInTheDocument();
await openMenu();
await toggleOption("Email");
expect(
screen.getByLabelText("Clear all selected items"),
).toBeInTheDocument();
});
it("should use custom translations when translateWithId is provided", async () => {
const customTranslations = {
clearSelection: "Remove selected item",
clearAll: "Remove all items",
} as const;
render(MultiSelect, {
items,
selectedIds: ["0"],
translateWithIdSelection: (id) => customTranslations[id],
});
expect(screen.getByLabelText("Remove all items")).toBeInTheDocument();
await openMenu();
await toggleOption("Email");
expect(screen.getByLabelText("Remove all items")).toBeInTheDocument();
});
});
describe("keyboard navigation", () => {