@sproutsocial/seeds-react-menu 1.11.9 → 1.12.0

package/package.json

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

package/src/MenuGroup/MenuGroup.tsx

@@ -26,7 +26,7 @@ import { mapMenuItems } from "../hooks/useMenuChildren";
  */
 
 const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
-  titleAs = "h3",
+  titleAs = "div",
   children: childrenProp,
   title,
   color,
@@ -68,7 +68,7 @@ const MenuGroup = <I extends TypeMenuItemProps = TypeMenuItemProps>({
       {...rest}
     >
       {title && (
-        <StyledTitle role="heading" as={titleAs} id={titleId}>
+        <StyledTitle as={titleAs} id={titleId}>
           {title}
         </StyledTitle>
       )}

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

@@ -199,12 +199,12 @@ describe("MenuGroup", () => {
         </SingleSelectMenu>
       );
 
-      // Find associated label for the group. (Menu Group uses aria-labelledby to point to heading element)
+      // The group is labelled via aria-labelledby pointing to the title div.
+      // The title must not carry role="heading" since heading is not an allowed
+      // descendant of listbox/menu (axe: aria-allowed-attr).
       const menuGroup = screen.getByRole("group", { name: menuTitle });
       expect(menuGroup).toBeInTheDocument();
-      expect(
-        screen.queryByRole("heading", { name: menuTitle })
-      ).toBeInTheDocument();
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
     });
 
     it("does not place role=group on an <li> (axe aria-allowed-role)", () => {

package/src/MenuSearchInput/MenuSearchInput.tsx

@@ -26,6 +26,7 @@ export const MenuSearchInput = ({
   getIsItemVisible,
   inputProps,
   onChange,
+  "aria-label": ariaLabel,
   ...restInputProps
 }: TypeMenuSearchInputProps) => {
   const {
@@ -69,8 +70,9 @@ export const MenuSearchInput = ({
       // apply onKeyDown logic for downshift keyboard accessibility support
       onKeyDown={handleKeyDown}
       autoComplete={false}
-      aria-autocomplete="list"
+      ariaLabel={ariaLabel}
       inputProps={{
+        ["aria-autocomplete"]: "list",
         ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
         ["aria-controls"]: toggleButtonProps["aria-controls"],
         ...inputProps,

package/src/SingleSelectMenu/SingleSelectMenu.stories.tsx

@@ -275,6 +275,66 @@ export const SingleSelectMenuWithCustomEmpty: Story = {
   },
 };
 
+const russianBooks = TEST_BOOKS.filter(({ author }) =>
+  [
+    "Leo Tolstoy",
+    "Fyodor Dostoyevsy",
+    "Fyodor Dostoevsky",
+    "Lev Tolstoy",
+  ].includes(author)
+);
+const worldBooks = TEST_BOOKS.filter(
+  ({ author }) =>
+    ![
+      "Leo Tolstoy",
+      "Fyodor Dostoyevsy",
+      "Fyodor Dostoevsky",
+      "Lev Tolstoy",
+    ].includes(author)
+);
+
+export const SingleSelectMenuWithSearchAndGroups: Story = {
+  name: "Single Select Menu with Search and Groups",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) => {
+          if (!item) return "";
+          return TEST_BOOKS.find(({ id }) => id === item.id)?.title ?? "";
+        }}
+        menuToggleElement={<StorybookMenuToggleButton />}
+        onStateChange={(changes) => action("onStateChange")(changes)}
+        {...(args as object)}
+      >
+        <MenuHeader title="Select Book">
+          <MenuSearchInput
+            id="single-select-search-groups"
+            name="search"
+            type="search"
+            aria-label="Search Books"
+          />
+        </MenuHeader>
+        <MenuContent>
+          <MenuGroup id="russian-lit" title="Russian Literature">
+            {russianBooks.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+          <MenuGroup id="world-lit" title="World Literature">
+            {worldBooks.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
 export const SingleSelectMenuSmallSize: Story = {
   name: "Small Size",
   render: ({ inputType, ...args }) => {