@sproutsocial/seeds-react-menu 1.16.16 → 1.17.0

package/.turbo/turbo-build.log

@@ -9,27 +9,27 @@ $ tsup --dts
 CJS Build start
 ESM Build start
 CJS dist/index.js        92.65 KB
-CJS dist/v3/index.js     121.51 KB
 CJS dist/v2/index.js     73.18 KB
+CJS dist/v3/index.js     123.01 KB
 CJS dist/index.js.map    180.28 KB
-CJS dist/v3/index.js.map 213.07 KB
 CJS dist/v2/index.js.map 152.19 KB
-CJS ⚡️ Build success in 73ms
-ESM dist/esm/index.js              73.60 KB
-ESM dist/esm/v3/index.js           108.01 KB
-ESM dist/esm/chunk-ROQATIB7.js     9.15 KB
+CJS dist/v3/index.js.map 215.51 KB
+CJS ⚡️ Build success in 318ms
 ESM dist/esm/v2/index.js           62.63 KB
-ESM dist/esm/index.js.map          156.29 KB
-ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
-ESM dist/esm/v3/index.js.map       213.12 KB
+ESM dist/esm/v3/index.js           109.51 KB
+ESM dist/esm/chunk-ROQATIB7.js     9.15 KB
+ESM dist/esm/index.js              73.60 KB
 ESM dist/esm/v2/index.js.map       132.57 KB
-ESM ⚡️ Build success in 84ms
+ESM dist/esm/v3/index.js.map       215.56 KB
+ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
+ESM dist/esm/index.js.map          156.29 KB
+ESM ⚡️ Build success in 319ms
 DTS Build start
-DTS ⚡️ Build success in 7381ms
+DTS ⚡️ Build success in 7612ms
 DTS dist/index.d.ts     39.12 KB
 DTS dist/v2/index.d.ts  5.55 KB
-DTS dist/v3/index.d.ts  23.92 KB
+DTS dist/v3/index.d.ts  24.63 KB
 DTS dist/index.d.mts    39.12 KB
 DTS dist/v2/index.d.mts 5.55 KB
-DTS dist/v3/index.d.mts 23.92 KB
-Done in 8.14s.
+DTS dist/v3/index.d.mts 24.63 KB
+Done in 9.02s.

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.17.0
+
+### Minor Changes
+
+- 60f85a0: Adds optional `aria-label` and `aria-labelledby` props to the v3 `SingleSelect`,
+  `MultiSelect`, `SingleCombobox`, `MultiCombobox`, `SingleSearchableSelect` and
+  `MultiSearchableSelect`, and forwards them to the popup listbox.
+
+  Base UI's `Select.List` and `Combobox.List` render `role="listbox"` with only an id — they
+  never derive a name from the trigger or from `Select.Label` — and these components spread no
+  extra props, so the popup listbox had no accessible name and no way for a consumer to give it
+  one.
+
+  That goes unnoticed while the popup is open, because axe exempts a listbox that a
+  `role="combobox"` element references through a live `aria-controls`. It surfaces on close:
+  Base UI keeps the popup mounted through the exit animation while the trigger has already
+  dropped `aria-controls`, leaving the listbox painted, unnamed and unreferenced. axe reports
+  that window as `aria-input-field-name` (serious).
+
+  No change for callers that pass neither prop.
+
 ## 1.16.16
 
 ### Patch Changes

package/dist/esm/v3/index.js

@@ -307,6 +307,8 @@ var StyledValue = styled4(Select3.Value)`
 function SingleSelect(props) {
   const { id, placeholder, includePlaceholderItem, fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const selectedItemId = props.selectedItemId;
@@ -380,43 +382,50 @@ function SingleSelect(props) {
           ),
           /* @__PURE__ */ jsx3(Select3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx3(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ jsxs2(SelectPopup, { children: [
             /* @__PURE__ */ jsx3(Select3.ScrollUpArrow, {}),
-            /* @__PURE__ */ jsx3(Select3.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs2(React4.Fragment, { children: [
-              /* @__PURE__ */ jsxs2(SelectGroup, { children: [
-                /* @__PURE__ */ jsx3(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                group.items.map((item) => /* @__PURE__ */ jsx3(
-                  SelectItem,
-                  {
-                    value: String(item.id),
-                    label: itemToString(item),
-                    disabled: item.disabled,
-                    inputType,
-                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                  },
-                  item.id
-                ))
-              ] }),
-              index < arr.length - 1 && /* @__PURE__ */ jsx3(SelectSeparator, {})
-            ] }, group.value)) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-              includePlaceholderItem && /* @__PURE__ */ jsx3(
-                SelectItem,
-                {
-                  value: null,
-                  label: placeholder ?? ""
-                },
-                "placeholder"
-              ),
-              data.map((item) => /* @__PURE__ */ jsx3(
-                SelectItem,
-                {
-                  value: String(item.id),
-                  label: itemToString(item),
-                  disabled: item.disabled,
-                  inputType,
-                  renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                },
-                item.id
-              ))
-            ] }) }),
+            /* @__PURE__ */ jsx3(
+              Select3.List,
+              {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs2(React4.Fragment, { children: [
+                  /* @__PURE__ */ jsxs2(SelectGroup, { children: [
+                    /* @__PURE__ */ jsx3(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                    group.items.map((item) => /* @__PURE__ */ jsx3(
+                      SelectItem,
+                      {
+                        value: String(item.id),
+                        label: itemToString(item),
+                        disabled: item.disabled,
+                        inputType,
+                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                      },
+                      item.id
+                    ))
+                  ] }),
+                  index < arr.length - 1 && /* @__PURE__ */ jsx3(SelectSeparator, {})
+                ] }, group.value)) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                  includePlaceholderItem && /* @__PURE__ */ jsx3(
+                    SelectItem,
+                    {
+                      value: null,
+                      label: placeholder ?? ""
+                    },
+                    "placeholder"
+                  ),
+                  data.map((item) => /* @__PURE__ */ jsx3(
+                    SelectItem,
+                    {
+                      value: String(item.id),
+                      label: itemToString(item),
+                      disabled: item.disabled,
+                      inputType,
+                      renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                    },
+                    item.id
+                  ))
+                ] })
+              }
+            ),
             /* @__PURE__ */ jsx3(Select3.ScrollDownArrow, {})
           ] }) }) })
         ]
@@ -447,6 +456,8 @@ var Placeholder = styled5.div`
 function MultiSelect(props) {
   const { id, placeholder = "Select...", fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -532,10 +543,29 @@ function MultiSelect(props) {
           ),
           /* @__PURE__ */ jsx4(Select4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx4(SelectPositioner, { sideOffset: 8, alignItemWithTrigger: false, children: /* @__PURE__ */ jsxs3(SelectPopup, { children: [
             /* @__PURE__ */ jsx4(Select4.ScrollUpArrow, {}),
-            /* @__PURE__ */ jsx4(Select4.List, { children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs3(React5.Fragment, { children: [
-              /* @__PURE__ */ jsxs3(SelectGroup, { children: [
-                /* @__PURE__ */ jsx4(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                group.items.map((item) => /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx4(
+              Select4.List,
+              {
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: children ? children : groupBy ? groupItems(data, groupBy).map((group, index, arr) => /* @__PURE__ */ jsxs3(React5.Fragment, { children: [
+                  /* @__PURE__ */ jsxs3(SelectGroup, { children: [
+                    /* @__PURE__ */ jsx4(SelectGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
+                    group.items.map((item) => /* @__PURE__ */ jsx4(
+                      SelectItem,
+                      {
+                        value: String(item.id),
+                        label: itemToString(item),
+                        disabled: item.disabled,
+                        inputType,
+                        hidden: removeSelectedItems && value.includes(String(item.id)),
+                        renderItem: renderItem ? () => renderItem(item) : void 0
+                      },
+                      item.id
+                    ))
+                  ] }),
+                  index < arr.length - 1 && /* @__PURE__ */ jsx4(SelectSeparator, {})
+                ] }, group.value)) : data.map((item) => /* @__PURE__ */ jsx4(
                   SelectItem,
                   {
                     value: String(item.id),
@@ -543,24 +573,12 @@ function MultiSelect(props) {
                     disabled: item.disabled,
                     inputType,
                     hidden: removeSelectedItems && value.includes(String(item.id)),
-                    renderItem: renderItem ? () => renderItem(item) : void 0
+                    renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
                   },
                   item.id
                 ))
-              ] }),
-              index < arr.length - 1 && /* @__PURE__ */ jsx4(SelectSeparator, {})
-            ] }, group.value)) : data.map((item) => /* @__PURE__ */ jsx4(
-              SelectItem,
-              {
-                value: String(item.id),
-                label: itemToString(item),
-                disabled: item.disabled,
-                inputType,
-                hidden: removeSelectedItems && value.includes(String(item.id)),
-                renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-              },
-              item.id
-            )) }),
+              }
+            ),
             /* @__PURE__ */ jsx4(Select4.ScrollDownArrow, {})
           ] }) }) })
         ]
@@ -1359,6 +1377,8 @@ function SingleCombobox(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -1462,6 +1482,8 @@ function SingleCombobox(props) {
                 /* @__PURE__ */ jsx8(
                   ComboboxList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -1551,6 +1573,8 @@ function MultiCombobox(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -1911,6 +1935,8 @@ function MultiCombobox(props) {
                 /* @__PURE__ */ jsx9(
                   ComboboxList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -2008,6 +2034,8 @@ function SingleSearchableSelect(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -2115,6 +2143,8 @@ function SingleSearchableSelect(props) {
                 /* @__PURE__ */ jsx10(
                   SearchableSelectList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,
@@ -2221,6 +2251,8 @@ function MultiSearchableSelect(props) {
     fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -2525,6 +2557,8 @@ function MultiSearchableSelect(props) {
                 /* @__PURE__ */ jsx11(
                   SearchableSelectList,
                   {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
                     style: isVirtualized ? {
                       padding: 0,
                       flex: 1,