Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DRAFT - DO NOT REVIEW YET] WB-1671: Dropdown: use combobox role in all openers #2345

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[DRAFT - DO NOT REVIEW YET] WB-1671: Dropdown: use combobox role in all openers #2345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a31f877
Dropdown: use combobox role (instead of button)
jandrade Oct 15, 2024
38ca18d
Dropdown: use combobox role (instead of button)
jandrade Oct 15, 2024
de869d0
Merge branch 'dropdown-combobox' of github.com:Khan/wonder-blocks int…
jandrade Oct 15, 2024
45abd05
Switch to div, remove button wording
jandrade Oct 18, 2024
a0cbf60
Revert back to button role=combobox
jandrade Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tasty-rockets-mix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/wonder-blocks-dropdown": patch
---

Update dropdown openers to use `role="combobox"` instead of `button`.
66 changes: 33 additions & 33 deletions packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ describe("MultiSelect", () => {
const {userEvent} = doRender(uncontrolledMultiSelect);

// Act
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

// Assert
expect(
Expand Down Expand Up @@ -103,7 +103,7 @@ describe("MultiSelect", () => {
doRender(uncontrolledMultiSelect);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");

// Assert
// No items are selected, display placeholder because there is one
Expand All @@ -127,7 +127,7 @@ describe("MultiSelect", () => {
);

// Assert
expect(await screen.findByRole("button")).toHaveTextContent(
expect(await screen.findByRole("combobox")).toHaveTextContent(
"item 1",
);
});
Expand All @@ -149,7 +149,7 @@ describe("MultiSelect", () => {
);

// Assert
expect(await screen.findByRole("button")).toHaveTextContent(
expect(await screen.findByRole("combobox")).toHaveTextContent(
"1 student",
);
});
Expand All @@ -171,7 +171,7 @@ describe("MultiSelect", () => {
);

// Assert
expect(await screen.findByRole("button")).toHaveTextContent(
expect(await screen.findByRole("combobox")).toHaveTextContent(
"Choose",
);
});
Expand All @@ -194,7 +194,7 @@ describe("MultiSelect", () => {

// Assert
// More than one item is selected, display n itemTypes
expect(await screen.findByRole("button")).toHaveTextContent(
expect(await screen.findByRole("combobox")).toHaveTextContent(
"2 students",
);
});
Expand All @@ -217,7 +217,7 @@ describe("MultiSelect", () => {

// Assert
// All items are selected
expect(await screen.findByRole("button")).toHaveTextContent(
expect(await screen.findByRole("combobox")).toHaveTextContent(
"All students",
);
});
Expand All @@ -240,7 +240,7 @@ describe("MultiSelect", () => {
);

// Assert
expect(await screen.findByRole("button")).toHaveTextContent(
expect(await screen.findByRole("combobox")).toHaveTextContent(
"All students",
);
});
Expand All @@ -259,7 +259,7 @@ describe("MultiSelect", () => {
);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");

// Assert
expect(opener).toHaveAttribute("data-testid", "some-test-id");
Expand Down Expand Up @@ -524,7 +524,7 @@ describe("MultiSelect", () => {

const {userEvent} = doRender(<ControlledMultiSelect />);

const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");
await userEvent.click(opener);

// Act
Expand Down Expand Up @@ -597,7 +597,7 @@ describe("MultiSelect", () => {
// Arrange
const {userEvent} = doRender(filterableMultiSelect);
// open the dropdown menu
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

// Act
const searchInput = await screen.findByPlaceholderText("Filter");
Expand All @@ -610,7 +610,7 @@ describe("MultiSelect", () => {
// Arrange
const {userEvent} = doRender(filterableMultiSelect);
// open the dropdown menu
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

const searchInput = await screen.findByPlaceholderText("Filter");

Expand All @@ -627,7 +627,7 @@ describe("MultiSelect", () => {
// Arrange
const {userEvent} = doRender(filterableMultiSelect);
// open the dropdown menu
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

const searchInput = await screen.findByPlaceholderText("Filter");

Expand Down Expand Up @@ -658,7 +658,7 @@ describe("MultiSelect", () => {

// Act
// open the dropdown menu
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

// Assert
expect(
Expand All @@ -681,7 +681,7 @@ describe("MultiSelect", () => {
</MultiSelect>,
);
// open the dropdown menu
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

const searchInput = await screen.findByPlaceholderText("Filter");

Expand All @@ -696,7 +696,7 @@ describe("MultiSelect", () => {
// Arrange
const {userEvent} = doRender(filterableMultiSelect);
// open the dropdown menu
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

// Act
const searchInput = await screen.findByPlaceholderText("Filter");
Expand All @@ -723,7 +723,7 @@ describe("MultiSelect", () => {

// Act
// open the dropdown menu
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

// Assert
expect(
Expand All @@ -747,7 +747,7 @@ describe("MultiSelect", () => {
</MultiSelect>,
);

await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

const searchInput = await screen.findByPlaceholderText("Filter");
await userEvent.type(searchInput, "Item 2");
Expand Down Expand Up @@ -779,7 +779,7 @@ describe("MultiSelect", () => {
</MultiSelect>,
);
// open the dropdown menu
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

const searchInput = await screen.findByPlaceholderText("Filter");
await userEvent.type(searchInput, "some text");
Expand All @@ -796,7 +796,7 @@ describe("MultiSelect", () => {
// Arrange
const {userEvent} = doRender(filterableMultiSelect);
// open the dropdown menu
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

const searchInput = await screen.findByPlaceholderText("Filter");
await userEvent.type(searchInput, "Should be cleared");
Expand All @@ -814,7 +814,7 @@ describe("MultiSelect", () => {
// Arrange
const {userEvent} = doRender(filterableMultiSelect);
// open the dropdown menu
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");
await userEvent.click(opener);

const searchInput = await screen.findByPlaceholderText("Filter");
Expand Down Expand Up @@ -1430,7 +1430,7 @@ describe("MultiSelect", () => {
rerender(<TranslatedComponent labels={updatedLabels} />);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");
// open dropdown
await userEvent.click(opener);

Expand Down Expand Up @@ -1646,7 +1646,7 @@ describe("MultiSelect", () => {

// Act
// Press the button
const button = await screen.findByRole("button");
const button = await screen.findByRole("combobox");
// NOTE: we need to use fireEvent here because await userEvent doesn't
// support keyUp/Down events and we use these handlers to override
// the default behavior of the button.
Expand Down Expand Up @@ -1674,7 +1674,7 @@ describe("MultiSelect", () => {

// Act
// Press the button
const button = await screen.findByRole("button");
const button = await screen.findByRole("combobox");
// NOTE: we need to use fireEvent here because await userEvent doesn't
// support keyUp/Down events and we use these handlers to override
// the default behavior of the button.
Expand Down Expand Up @@ -1789,7 +1789,7 @@ describe("MultiSelect", () => {
);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");

// Assert
expect(opener).toHaveAttribute(
Expand All @@ -1808,7 +1808,7 @@ describe("MultiSelect", () => {
);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");

// Assert
expect(opener).toHaveAttribute("id", id);
Expand All @@ -1824,7 +1824,7 @@ describe("MultiSelect", () => {

// Act
// Open the dropdown
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");
await userEvent.click(opener);

// Assert
Expand All @@ -1847,7 +1847,7 @@ describe("MultiSelect", () => {

// Act
// Open the dropdown
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");
await userEvent.click(opener);

// Assert
Expand All @@ -1869,7 +1869,7 @@ describe("MultiSelect", () => {
);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");
await userEvent.click(opener);
const dropdown = await screen.findByRole("listbox", {hidden: true});

Expand All @@ -1888,7 +1888,7 @@ describe("MultiSelect", () => {
);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");
await userEvent.click(opener);
const dropdown = await screen.findByRole("listbox", {hidden: true});

Expand Down Expand Up @@ -1965,7 +1965,7 @@ describe("MultiSelect", () => {
);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");

// Assert
expect(opener).toHaveAttribute("aria-haspopup", "listbox");
Expand Down Expand Up @@ -2004,7 +2004,7 @@ describe("MultiSelect", () => {
);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");

// Assert
expect(opener).toHaveAttribute("aria-expanded", "false");
Expand All @@ -2020,7 +2020,7 @@ describe("MultiSelect", () => {
);

// Act
const opener = await screen.findByRole("button");
const opener = await screen.findByRole("combobox");
await userEvent.click(opener);

// Assert
Expand Down
12 changes: 6 additions & 6 deletions packages/wonder-blocks-dropdown/src/components/__tests__/select-opener.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe("SelectOpener", () => {

// Act
// Press the button.
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

// Assert
expect(onOpenMock).toHaveBeenCalledTimes(1);
Expand All @@ -51,7 +51,7 @@ describe("SelectOpener", () => {

// Act
// Press the button.
const button = await screen.findByRole("button");
const button = await screen.findByRole("combobox");
// NOTE: we need to use fireEvent here because await userEvent doesn't
// support keyUp/Down events and we use these handlers to override
// the default behavior of the button.
Expand Down Expand Up @@ -87,7 +87,7 @@ describe("SelectOpener", () => {

// Act
// Press the button.
const button = await screen.findByRole("button");
const button = await screen.findByRole("combobox");
// NOTE: we need to use fireEvent here because await userEvent doesn't
// support keyUp/Down events and we use these handlers to override
// the default behavior of the button.
Expand Down Expand Up @@ -131,7 +131,7 @@ describe("SelectOpener", () => {

// Act
// Press the button.
await userEvent.click(await screen.findByRole("button"));
await userEvent.click(await screen.findByRole("combobox"));

// Assert
expect(onOpenMock).toHaveBeenCalledTimes(0);
Expand All @@ -156,7 +156,7 @@ describe("SelectOpener", () => {

// Act
// Press the button.
const button = await screen.findByRole("button");
const button = await screen.findByRole("combobox");
// NOTE: we need to use fireEvent here because await userEvent doesn't
// support keyUp/Down events and we use these handlers to override
// the default behavior of the button.
Expand Down Expand Up @@ -192,7 +192,7 @@ describe("SelectOpener", () => {

// Act
// Press the button.
const button = await screen.findByRole("button");
const button = await screen.findByRole("combobox");
// NOTE: we need to use fireEvent here because await userEvent doesn't
// support keyUp/Down events and we use these handlers to override
// the default behavior of the button.
Expand Down
Loading
Loading