@sproutsocial/seeds-react-menu 1.6.16 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.6.16",
+  "version": "1.7.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -17,25 +17,25 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.6",
-    "@sproutsocial/seeds-react-button": "^1.3.5",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.8",
-    "@sproutsocial/seeds-react-icon": "^2.0.0",
-    "@sproutsocial/seeds-react-input": "^1.4.11",
-    "@sproutsocial/seeds-react-label": "^1.0.5",
-    "@sproutsocial/seeds-react-popout": "^2.4.11",
-    "@sproutsocial/seeds-react-radio": "^1.3.4",
-    "@sproutsocial/seeds-react-switch": "^1.2.8",
+    "@sproutsocial/seeds-react-box": "^1.1.7",
+    "@sproutsocial/seeds-react-button": "^1.3.6",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.9",
+    "@sproutsocial/seeds-react-icon": "^2.0.1",
+    "@sproutsocial/seeds-react-input": "^1.4.12",
+    "@sproutsocial/seeds-react-label": "^1.0.6",
+    "@sproutsocial/seeds-react-popout": "^2.4.12",
+    "@sproutsocial/seeds-react-radio": "^1.3.5",
+    "@sproutsocial/seeds-react-switch": "^1.2.9",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
-    "@sproutsocial/seeds-react-theme": "^3.2.0",
-    "@sproutsocial/seeds-react-token-input": "^1.4.11",
+    "@sproutsocial/seeds-react-theme": "^3.2.1",
+    "@sproutsocial/seeds-react-token-input": "^1.4.12",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "downshift": "9.0.4",
     "lodash.uniqueid": "^4.0.1",
     "motion": "^12.6.3"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.0.10",
+    "@sproutsocial/seeds-react-tooltip": "^1.0.11",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/MenuToggleButton/MenuToggleButton.tsx

@@ -42,6 +42,21 @@ export const MenuToggleButton = (props: TypeMenuToggleButtonProps) => {
     ...(isListbox ? {} : { role: "button", "aria-haspopup": "menu" }),
   });
 
+  // Clean up default downshift aria attributes
+  // If there is not an active descendant, remove the attribute
+  if (toggleButtonProps && toggleButtonProps["aria-activedescendant"] === "") {
+    toggleButtonProps["aria-activedescendant"] = undefined;
+  }
+  // If the menu is closed, remove the aria-controls attribute
+  if (toggleButtonProps && toggleButtonProps["aria-expanded"] === false) {
+    // @ts-expect-error downshift types require aria-controls even though it is not required
+    toggleButtonProps["aria-controls"] = undefined;
+  }
+  // Remove aria-labelledby, we add our own Label component
+  if (toggleButtonProps) {
+    toggleButtonProps["aria-labelledby"] = undefined;
+  }
+
   return (
     <Button appearance="secondary" {...toggleButtonProps} {...restProps} />
   );

package/src/MenuToggleButton/__tests__/MenuToggleButton.test.tsx

@@ -0,0 +1,495 @@
+import React from "react";
+import {
+  render,
+  screen,
+  fireEvent,
+} from "@sproutsocial/seeds-react-testing-library";
+import { MenuToggleButton } from "../MenuToggleButton";
+import { MenuToggleContext } from "../../MenuContext";
+import type { TypeMenuToggleContext } from "../../MenuContext";
+
+describe("MenuToggleButton", () => {
+  describe("aria attribute logic", () => {
+    it("should add role='button' and aria-haspopup='menu' when isListbox is false", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: false,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": true,
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).toHaveAttribute("role", "button");
+      expect(button).toHaveAttribute("aria-haspopup", "menu");
+    });
+
+    it("should not add role='button' or aria-haspopup when isListbox is true", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": true,
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      // Button role comes from the Button component itself, not from our override
+      expect(button).not.toHaveAttribute("aria-haspopup", "menu");
+    });
+
+    it("should remove aria-activedescendant when it is an empty string", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": true,
+          "aria-activedescendant": "",
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).not.toHaveAttribute("aria-activedescendant");
+    });
+
+    it("should keep aria-activedescendant when it has a value", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": true,
+          "aria-activedescendant": "menu-item-1",
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).toHaveAttribute("aria-activedescendant", "menu-item-1");
+    });
+
+    it("should remove aria-controls when aria-expanded is false", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": false,
+          "aria-controls": "menu-content",
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).toHaveAttribute("aria-expanded", "false");
+      expect(button).not.toHaveAttribute("aria-controls");
+    });
+
+    it("should keep aria-controls when aria-expanded is true", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": true,
+          "aria-controls": "menu-content",
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).toHaveAttribute("aria-expanded", "true");
+      expect(button).toHaveAttribute("aria-controls", "menu-content");
+    });
+
+    it("should always remove aria-labelledby", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": true,
+          "aria-labelledby": "some-label-id",
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).not.toHaveAttribute("aria-labelledby");
+    });
+
+    it("should handle all aria attribute cleanups together", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: false,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": false,
+          "aria-controls": "menu-content",
+          "aria-activedescendant": "",
+          "aria-labelledby": "some-label-id",
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+
+      // Should have role and haspopup because isListbox is false
+      expect(button).toHaveAttribute("role", "button");
+      expect(button).toHaveAttribute("aria-haspopup", "menu");
+
+      // Should clean up invalid aria attributes
+      expect(button).not.toHaveAttribute("aria-controls");
+      expect(button).not.toHaveAttribute("aria-activedescendant");
+      expect(button).not.toHaveAttribute("aria-labelledby");
+
+      // Should keep aria-expanded
+      expect(button).toHaveAttribute("aria-expanded", "false");
+    });
+  });
+
+  describe("user event handlers", () => {
+    it("should call user-supplied onClick handler", () => {
+      const userOnClick = jest.fn();
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": false,
+          onClick: (e) => {
+            // @ts-expect-error partial mock for testing
+            props.onClick?.(e);
+          },
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton onClick={userOnClick}>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      button.click();
+
+      expect(userOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call user-supplied onKeyDown handler", () => {
+      const userOnKeyDown = jest.fn();
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": false,
+          onKeyDown: (e) => {
+            // @ts-expect-error partial mock for testing
+            props.onKeyDown?.(e);
+          },
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton onKeyDown={userOnKeyDown}>
+            Toggle Menu
+          </MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+
+      // Simulate keydown using fireEvent
+      fireEvent.keyDown(button, { key: "Enter" });
+
+      expect(userOnKeyDown).toHaveBeenCalled();
+    });
+
+    it("should call user-supplied onBlur handler", () => {
+      const userOnBlur = jest.fn();
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": false,
+          onBlur: (e) => {
+            // @ts-expect-error partial mock for testing
+            props.onBlur?.(e);
+          },
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton onBlur={userOnBlur}>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      button.focus();
+      button.blur();
+
+      expect(userOnBlur).toHaveBeenCalled();
+    });
+  });
+
+  describe("getDropdownProps integration", () => {
+    it("should use getDropdownProps when provided", () => {
+      const mockGetDropdownProps = jest.fn((props) => ({
+        ...props,
+        "data-testid": "dropdown-test",
+      }));
+
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": false,
+          ...props,
+        })),
+        getDropdownProps: mockGetDropdownProps,
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      expect(mockGetDropdownProps).toHaveBeenCalledWith(
+        expect.objectContaining({
+          preventKeyAction: true,
+        })
+      );
+    });
+
+    it("should fallback to defaultDropdownProps when getDropdownProps is not provided", () => {
+      const mockGetToggleButtonProps = jest.fn((props) => ({
+        "aria-expanded": false,
+        ...props,
+      }));
+
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        getToggleButtonProps: mockGetToggleButtonProps,
+        getDropdownProps: undefined,
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      // Should still render successfully
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe("ariaProps integration", () => {
+    it("should merge ariaProps from context", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": true,
+          ...props,
+        })),
+        ariaProps: {
+          "aria-describedby": "menu-description",
+        },
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).toHaveAttribute("aria-describedby", "menu-description");
+    });
+  });
+
+  describe("Button props forwarding", () => {
+    it("should forward appearance prop to Button and render successfully", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": false,
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton appearance="primary">Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      // Should render successfully with appearance prop
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should render with secondary appearance by default", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": false,
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      // Should render successfully with default appearance
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should forward other Button props like disabled", () => {
+      const mockContext: TypeMenuToggleContext = {
+        items: [],
+        itemsMap: {},
+        isItemSelected: jest.fn(),
+        getInputComponentProps: jest.fn(),
+        isListbox: true,
+        // @ts-expect-error partial mock for testing
+        getToggleButtonProps: jest.fn((props) => ({
+          "aria-expanded": false,
+          ...props,
+        })),
+      };
+
+      render(
+        <MenuToggleContext.Provider value={mockContext}>
+          <MenuToggleButton disabled>Toggle Menu</MenuToggleButton>
+        </MenuToggleContext.Provider>
+      );
+
+      const button = screen.getByRole("button", { name: "Toggle Menu" });
+      expect(button).toBeDisabled();
+    });
+  });
+});