@sproutsocial/seeds-react-menu 1.10.7 → 1.10.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.10.7",
+  "version": "1.10.9",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/MenuGroup/MenuGroup.tsx

@@ -48,11 +48,19 @@ const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
     return null;
   }
   return (
+    // role="none" on the outer <li>: this wrapper is purely visual (it exists
+    // for the border-bottom divider between groups in the parent menu <ul>).
+    // The ARIA group semantics live on the inner <ul> below — axe rejects
+    // role="group" on <li>, and a native <ul> here would trigger the `list`
+    // rule because its children are <li role="none"> menuitem wrappers.
+    //
+    // TODO(DS-4273): drop the list-based DOM entirely (MenuContent/MenuGroup
+    // as <div>, no <ul>/<li>, no role="none" wrappers). This is the followup
+    // to DS-4271's minimal ARIA patch.
     <StyledMenuGroup
-      role="group"
+      role="none"
       id={id}
       isSingleSelect={isSingleSelect}
-      aria-labelledby={title ? titleId : undefined}
       // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -64,7 +72,12 @@ const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
           {title}
         </StyledTitle>
       )}
-      <StyledMenuGroupUl>{children}</StyledMenuGroupUl>
+      <StyledMenuGroupUl
+        role="group"
+        aria-labelledby={title ? titleId : undefined}
+      >
+        {children}
+      </StyledMenuGroupUl>
     </StyledMenuGroup>
   );
 };

package/src/MenuGroup/__tests__/MenuGroup.test.tsx

@@ -207,6 +207,25 @@ describe("MenuGroup", () => {
       ).toBeInTheDocument();
     });
 
+    it("does not place role=group on an <li> (axe aria-allowed-role)", () => {
+      render(
+        <ActionMenu
+          defaultIsOpen
+          menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        >
+          <MenuContent>
+            <MenuGroup id="group">
+              <MenuItem id="item-1">Item 1</MenuItem>
+            </MenuGroup>
+          </MenuContent>
+        </ActionMenu>
+      );
+
+      // role="group" must live on the inner <ul>, not the outer <li>.
+      const group = screen.getByRole("group");
+      expect(group.tagName).toBe("UL");
+    });
+
     it("when no title is provided, it should not render a title", () => {
       render(
         <SingleSelectMenu

package/src/MenuItem/MenuItem.tsx

@@ -39,6 +39,26 @@ const MenuItem = ({
 
   const highlighted = highlightedIndex === item?.index;
 
+  const downshiftItemProps =
+    getItemProps?.({
+      ...(isListbox ? {} : { role: "menuitem" }),
+      item,
+      index: item.index,
+      // The disabled prop no longer supported in downshift. Use isItemDisabled instead.
+      // disabled,
+      onClick,
+      onKeyDown,
+      ref: innerRef,
+    }) ?? {};
+
+  // downshift's useSelect adds aria-selected to every item, but aria-selected
+  // is only valid on role="option" (listbox). For menuitem / menuitemcheckbox /
+  // menuitemradio it fails axe's aria-allowed-attr rule — menu items use
+  // aria-checked for state, not aria-selected.
+  if (!isListbox && "aria-selected" in downshiftItemProps) {
+    delete downshiftItemProps["aria-selected"];
+  }
+
   return hiddenItemsMap[item.id] ? (
     <></>
   ) : (
@@ -47,16 +67,7 @@ const MenuItem = ({
         id={id}
         $highlighted={highlighted}
         $active={active}
-        {...getItemProps?.({
-          ...(isListbox ? {} : { role: "menuitem" }),
-          item,
-          index: item.index,
-          // The disabled prop no longer supported in downshift. Use isItemDisabled instead.
-          // disabled,
-          onClick,
-          onKeyDown,
-          ref: innerRef,
-        })}
+        {...downshiftItemProps}
         // use anchor tag if href is provided and button for menuitem
         as={isListbox ? undefined : href ? "a" : "button"}
         type={href ? undefined : "button"}

package/src/MenuItem/__tests__/MenuItem.test.tsx

@@ -251,6 +251,25 @@ describe("MenuItem when not isListbox", () => {
       expect(menuItem).toContainElement(span);
     });
 
+    it("does not set aria-selected on role=menuitem (axe aria-allowed-attr)", () => {
+      render(
+        <ActionMenu
+          menuToggleElement={testMenuToggleElement}
+          isOpen
+          id="no-aria-selected"
+        >
+          <MenuContent>
+            <MenuItem {...menuItemProps} />
+          </MenuContent>
+        </ActionMenu>
+      );
+
+      // downshift's useSelect auto-adds aria-selected; it must be stripped
+      // for menuitems because aria-selected is only valid on role=option.
+      const menuItem = screen.getByRole("menuitem");
+      expect(menuItem).not.toHaveAttribute("aria-selected");
+    });
+
     it("accepts box & system Props", () => {
       render(
         <ActionMenu

package/src/MenuSearchInput/MenuSearchInput.tsx

@@ -25,6 +25,7 @@ export interface TypeMenuSearchInputProps extends TypeInputProps {
 export const MenuSearchInput = ({
   getIsItemVisible,
   inputProps,
+  onChange,
   ...restInputProps
 }: TypeMenuSearchInputProps) => {
   const {
@@ -63,6 +64,7 @@ export const MenuSearchInput = ({
     <Input
       onChange={(e, value) => {
         updateFilteredItems({ inputValue: value });
+        onChange?.(e, value);
       }}
       // apply onKeyDown logic for downshift keyboard accessibility support
       onKeyDown={handleKeyDown}

package/src/MenuSearchInput/__tests__/MenuSearchInput.test.tsx

@@ -153,5 +153,28 @@ describe("MenuSearchInput", () => {
 
       expect(customFilter).toHaveBeenCalled();
     });
+
+    it("should call the passed onChange prop and still filter items", async () => {
+      const handleChange = jest.fn();
+      const { user } = render(
+        <Component {...defaultProps({ onChange: handleChange })} />
+      );
+
+      await user.click(screen.getByRole("button", { name: "Open Menu" }));
+
+      const inputElement = screen.getByRole("searchbox") as HTMLInputElement;
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "Item 0");
+      });
+
+      // onChange prop was forwarded
+      await waitFor(() => expect(handleChange).toHaveBeenCalled());
+
+      // updateFilteredItems still ran — only the matching item is visible
+      await waitFor(() =>
+        expect(screen.queryAllByRole(menuItemRole).length).toBe(1)
+      );
+    });
   });
 });