@sproutsocial/seeds-react-menu 1.10.8 → 1.10.9

package/dist/index.js

@@ -475,22 +475,26 @@ var MenuItem = ({
   });
   const item = itemsMap[id] || { index: 0, id };
   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
+  }) ?? {};
+  if (!isListbox && "aria-selected" in downshiftItemProps) {
+    delete downshiftItemProps["aria-selected"];
+  }
   return hiddenItemsMap[item.id] ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemContainer, { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     StyledMenuItem,
     {
       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,
       as: isListbox ? void 0 : href ? "a" : "button",
       type: href ? void 0 : "button",
       href,
@@ -919,7 +923,18 @@ var StyledMenuGroupUl = import_styled_components7.default.ul`
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime9 = (
+  // 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.
+  require("react/jsx-runtime")
+);
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
@@ -939,15 +954,21 @@ var MenuGroup = ({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     StyledMenuGroup,
     {
-      role: "group",
+      role: "none",
       id,
       isSingleSelect,
-      "aria-labelledby": title ? titleId : void 0,
       color: color5,
       ...rest,
       children: [
         title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledMenuGroupUl, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          StyledMenuGroupUl,
+          {
+            role: "group",
+            "aria-labelledby": title ? titleId : void 0,
+            children
+          }
+        )
       ]
     }
   );