@sproutsocial/seeds-react-menu 1.16.16 → 1.17.0

package/package.json

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

package/src/ActionMenu/ActionMenu.stories.tsx

@@ -42,7 +42,7 @@ type ActionMenuStoryArgs = TypeActionMenuProps & {
 type Story = StoryObj<ActionMenuStoryArgs>;
 
 const meta: Meta<ActionMenuStoryArgs> = {
-  title: "Under Development/ActionMenu",
+  title: "Components/Menus/v1/ActionMenu",
   component: ActionMenu,
   argTypes: {
     "Trigger Appearance": {

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -25,7 +25,7 @@ import Button from "@sproutsocial/seeds-react-button";
 type CustomAutocompleteArgs = React.ComponentProps<typeof Autocomplete>;
 
 const meta: Meta<CustomAutocompleteArgs> = {
-  title: "Under Development/Autocomplete",
+  title: "Components/Menus/v1/Autocomplete",
   component: Autocomplete,
   parameters: {
     controls: {

package/src/MenuContent/MenuContent.stories.tsx

@@ -18,7 +18,7 @@ import {
 } from "../index";
 
 const meta: Meta<typeof MenuContent> = {
-  title: "Under Development/Primitives/MenuContent",
+  title: "Components/Menus/v1/Primitives/MenuContent",
   component: MenuContent,
 };
 

package/src/MenuFooter/MenuFooter.stories.tsx

@@ -31,7 +31,7 @@ type Story = StoryObj<MenuFooterStoryArgs>;
 const optionsArr = ["Button Example", "Link Example", "Text Example", "none"];
 
 const meta: Meta<MenuFooterStoryArgs> = {
-  title: "Under Development/Primitives/MenuFooter",
+  title: "Components/Menus/v1/Primitives/MenuFooter",
   component: MenuFooter,
   parameters: {
     controls: { expanded: true, sort: "requiredFirst" },

package/src/MenuGroup/MenuGroup.stories.tsx

@@ -17,7 +17,7 @@ import {
 } from "../index";
 
 const meta: Meta<typeof MenuGroup> = {
-  title: "Under Development/Primitives/MenuGroup",
+  title: "Components/Menus/v1/Primitives/MenuGroup",
   component: MenuGroup,
   decorators: [
     (Story) => (

package/src/MenuHeader/MenuHeader.stories.tsx

@@ -29,7 +29,7 @@ interface MenuHeaderStoryArgs extends TypeMenuHeaderProps {
 type Story = StoryObj<MenuHeaderStoryArgs>;
 
 const meta: Meta<MenuHeaderStoryArgs> = {
-  title: "Under Development/Primitives/MenuHeader",
+  title: "Components/Menus/v1/Primitives/MenuHeader",
   component: MenuHeader,
   parameters: {
     controls: { expanded: true, sort: "requiredFirst" },

package/src/MenuItem/MenuItem.stories.tsx

@@ -34,7 +34,7 @@ interface MenuItemStoryArgs extends TypeMenuItemProps {
 type Story = StoryObj<MenuItemStoryArgs>;
 
 const meta: Meta<MenuItemStoryArgs> = {
-  title: "Under Development/Primitives/MenuItem",
+  title: "Components/Menus/v1/Primitives/MenuItem",
   component: MenuItem,
   decorators: [
     (Story) => (

package/src/MenuToggleButton/MenuToggleButton.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from "../index";
 
 const meta: Meta<typeof MenuToggleButton> = {
-  title: "Under Development/Primitives/MenuToggleButton",
+  title: "Components/Menus/v1/Primitives/MenuToggleButton",
   component: MenuToggleButton,
   decorators: [
     (Story) => (

package/src/MultiSelectMenu/MultiSelectMenu.stories.tsx

@@ -23,7 +23,7 @@ type TypeMultiSelectMenuStoryProps = TypeMultiSelectMenuProps & {
 };
 
 const meta: Meta<TypeMultiSelectMenuStoryProps> = {
-  title: "Under Development/MultiSelectMenu",
+  title: "Components/Menus/v1/MultiSelectMenu",
   component: MultiSelectMenu,
   decorators: [
     (Story) => (

package/src/NestedMenu/NestedMenu.stories.tsx

@@ -23,7 +23,7 @@ import { MotionConfig } from "motion/react";
 type CustomNestedMenuArgs = React.ComponentProps<typeof NestedMenu>;
 
 const meta: Meta<CustomNestedMenuArgs> = {
-  title: "Under Development/NestedMenu",
+  title: "Components/Menus/v1/NestedMenu",
   component: NestedMenu,
   parameters: {
     controls: {

package/src/SingleSelectMenu/SingleSelectMenu.stories.tsx

@@ -24,7 +24,7 @@ type CustomSingleSelectArgs = TypeSingleSelectMenuProps & {
 };
 
 const meta: Meta<CustomSingleSelectArgs> = {
-  title: "Under Development/SingleSelectMenu",
+  title: "Components/Menus/v1/SingleSelectMenu",
   component: SingleSelectMenu,
   parameters: {
     controls: {

package/src/SubmenuItem/SubmenuItem.stories.tsx

@@ -18,7 +18,7 @@ type SubmenuItemStoryArgs = TypeMenuItemProps & {
 type Story = StoryObj<SubmenuItemStoryArgs>;
 
 const meta: Meta<SubmenuItemStoryArgs> = {
-  title: "Under Development/Submenu",
+  title: "Components/Menus/v1/Submenu",
   decorators: [(Story) => <Story />],
 };
 

package/src/v2/Autocomplete/Autocomplete.stories.tsx

@@ -15,7 +15,7 @@ import type { ToggleItem, GroupHeading } from "../Common-V2";
 type CustomAutocompleteArgs = React.ComponentProps<typeof MultiAutocomplete>;
 
 const meta: Meta<CustomAutocompleteArgs> = {
-  title: "Really Under Development/Autocomplete",
+  title: "Components/Menus/v2/Autocomplete",
   component: MultiAutocomplete,
   parameters: {
     controls: {

package/src/v2/Select/Select.stories.tsx

@@ -17,7 +17,7 @@ import type { ToggleItem } from "../Common-V2";
 type CustomSelectArgs = React.ComponentProps<typeof MultiSelect>;
 
 const meta: Meta<CustomSelectArgs> = {
-  title: "Really Under Development/Select",
+  title: "Components/Menus/v2/Select",
   component: MultiSelect,
   parameters: {
     controls: {

package/src/v3/ActionMenu.stories.tsx

@@ -14,7 +14,7 @@ import {
 } from "./ActionMenu";
 
 const meta: Meta<typeof ActionMenu> = {
-  title: "Really Under Development/V3/ActionMenu",
+  title: "Components/Menus/v3/ActionMenu",
   component: ActionMenu,
   decorators: [
     (Story) => (

package/src/v3/MenuButton.stories.tsx

@@ -6,7 +6,7 @@ import { MenuButton } from "./MenuButton";
 import { MenuItem } from "./ActionMenu";
 
 const meta: Meta<typeof MenuButton> = {
-  title: "Really Under Development/V3/MenuButton",
+  title: "Components/Menus/v3/MenuButton",
   component: MenuButton,
   decorators: [
     (Story) => (

package/src/v3/ModalStories.stories.tsx

@@ -138,7 +138,7 @@ function AllComponents() {
 // ─── Meta ─────────────────────────────────────────────────────────────────────
 
 const meta: Meta = {
-  title: "Really Under Development/V3/In Modal",
+  title: "Components/Menus/v3/In Modal",
 };
 
 export default meta;

package/src/v3/MultiCombobox.stories.tsx

@@ -18,7 +18,7 @@ import {
 } from "./storyData";
 
 const meta: Meta<typeof MultiCombobox> = {
-  title: "Really Under Development/V3/Multi Combobox",
+  title: "Components/Menus/v3/Multi Combobox",
   component: MultiCombobox,
 };
 

package/src/v3/MultiCombobox.tsx

@@ -74,6 +74,9 @@ interface MultiComboboxBaseProps {
   filter?: ((item: unknown, query: string) => boolean) | null;
   inputValue?: string;
   onInputValueChange?: (value: string) => void;
+  "aria-label"?: string;
+  /** Id of a visible label. Preferred over `aria-label`. */
+  "aria-labelledby"?: string;
   "aria-describedby"?: string;
   isInvalid?: boolean;
   required?: boolean;
@@ -150,6 +153,8 @@ export function MultiCombobox<T extends DataWithId>(
     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;
@@ -674,6 +679,8 @@ export function MultiCombobox<T extends DataWithId>(
               <ComboboxStatus>{isLoading ? loadingText : null}</ComboboxStatus>
               <ComboboxEmpty>{isLoading ? null : emptyText}</ComboboxEmpty>
               <ComboboxList
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
                 style={
                   isVirtualized
                     ? {

package/src/v3/MultiSearchableSelect.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from "./storyData";
 
 const meta: Meta<typeof MultiSearchableSelect> = {
-  title: "Really Under Development/V3/Multi Searchable Select",
+  title: "Components/Menus/v3/Multi Searchable Select",
   component: MultiSearchableSelect,
 };
 

package/src/v3/MultiSearchableSelect.tsx

@@ -79,6 +79,9 @@ interface MultiSearchableSelectBaseProps {
   loadingText?: string;
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
+  "aria-label"?: string;
+  /** Id of a visible label. Preferred over `aria-label`. */
+  "aria-labelledby"?: string;
   "aria-describedby"?: string;
   isInvalid?: boolean;
   required?: boolean;
@@ -151,6 +154,8 @@ export function MultiSearchableSelect<T extends DataWithId>(
     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;
@@ -609,6 +614,8 @@ export function MultiSearchableSelect<T extends DataWithId>(
               <ComboboxStatus>{isLoading ? loadingText : null}</ComboboxStatus>
               <ComboboxEmpty>{isLoading ? null : emptyText}</ComboboxEmpty>
               <SearchableSelectList
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
                 style={
                   isVirtualized
                     ? {

package/src/v3/MultiSelect.stories.tsx

@@ -12,7 +12,7 @@ import {
 } from "./storyData";
 
 const meta: Meta<typeof MultiSelect> = {
-  title: "Really Under Development/V3/Multi Select",
+  title: "Components/Menus/v3/Multi Select",
   component: MultiSelect,
 };
 

package/src/v3/MultiSelect.tsx

@@ -43,6 +43,9 @@ interface MultiSelectBaseProps {
   id?: string;
   placeholder?: string;
   disabled?: boolean;
+  "aria-label"?: string;
+  /** Id of a visible label. Preferred over `aria-label`. */
+  "aria-labelledby"?: string;
   "aria-describedby"?: string;
   isInvalid?: boolean;
   required?: boolean;
@@ -93,6 +96,8 @@ export type MultiSelectProps<T extends DataWithId> =
 export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
   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;
@@ -232,7 +237,10 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
           <SelectPositioner sideOffset={8} alignItemWithTrigger={false}>
             <SelectPopup>
               <Select.ScrollUpArrow />
-              <Select.List>
+              <Select.List
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
+              >
                 {children
                   ? children
                   : groupBy

package/src/v3/SingleCombobox.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from "./storyData";
 
 const meta: Meta<typeof SingleCombobox> = {
-  title: "Really Under Development/V3/Single Combobox",
+  title: "Components/Menus/v3/Single Combobox",
   component: SingleCombobox,
 };
 

package/src/v3/SingleCombobox.tsx

@@ -32,6 +32,9 @@ interface SingleComboboxBaseProps {
   emptyText?: string;
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
+  "aria-label"?: string;
+  /** Id of a visible label. Preferred over `aria-label`. */
+  "aria-labelledby"?: string;
   "aria-describedby"?: string;
   isInvalid?: boolean;
   required?: boolean;
@@ -96,6 +99,8 @@ export function SingleCombobox<T extends DataWithId>(
     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;
@@ -244,6 +249,8 @@ export function SingleCombobox<T extends DataWithId>(
             >
               <ComboboxEmpty>{emptyText}</ComboboxEmpty>
               <ComboboxList
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
                 style={
                   isVirtualized
                     ? {

package/src/v3/SingleSearchableSelect.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from "./storyData";
 
 const meta: Meta<typeof SingleSearchableSelect> = {
-  title: "Really Under Development/V3/Single Searchable Select",
+  title: "Components/Menus/v3/Single Searchable Select",
   component: SingleSearchableSelect,
 };
 

package/src/v3/SingleSearchableSelect.tsx

@@ -41,6 +41,9 @@ interface SingleSearchableSelectBaseProps {
   loadingText?: string;
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
+  "aria-label"?: string;
+  /** Id of a visible label. Preferred over `aria-label`. */
+  "aria-labelledby"?: string;
   "aria-describedby"?: string;
   isInvalid?: boolean;
   required?: boolean;
@@ -112,6 +115,8 @@ export function SingleSearchableSelect<T extends DataWithId>(
     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;
@@ -278,6 +283,8 @@ export function SingleSearchableSelect<T extends DataWithId>(
               <ComboboxStatus>{isLoading ? loadingText : null}</ComboboxStatus>
               <ComboboxEmpty>{isLoading ? null : emptyText}</ComboboxEmpty>
               <SearchableSelectList
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
                 style={
                   isVirtualized
                     ? {

package/src/v3/SingleSelect.stories.tsx

@@ -12,7 +12,7 @@ import {
 } from "./storyData";
 
 const meta: Meta<typeof SingleSelect> = {
-  title: "Really Under Development/V3/Single Select",
+  title: "Components/Menus/v3/Single Select",
   component: SingleSelect,
 };
 

package/src/v3/SingleSelect.tsx

@@ -39,6 +39,9 @@ interface SingleSelectBaseProps {
   placeholder?: string;
   includePlaceholderItem?: boolean;
   disabled?: boolean;
+  "aria-label"?: string;
+  /** Id of a visible label. Preferred over `aria-label`. */
+  "aria-labelledby"?: string;
   "aria-describedby"?: string;
   isInvalid?: boolean;
   required?: boolean;
@@ -85,6 +88,8 @@ export function SingleSelect<T extends DataWithId>(
 ) {
   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;
@@ -193,7 +198,10 @@ export function SingleSelect<T extends DataWithId>(
           <SelectPositioner sideOffset={8} alignItemWithTrigger={false}>
             <SelectPopup>
               <Select.ScrollUpArrow />
-              <Select.List>
+              <Select.List
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
+              >
                 {children ? (
                   children
                 ) : groupBy ? (

package/src/v3/__tests__/ariaLabels.test.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import { SingleSelect } from "../SingleSelect";
+import { MultiSelect } from "../MultiSelect";
+import { SingleCombobox } from "../SingleCombobox";
+import { MultiCombobox } from "../MultiCombobox";
+import { SingleSearchableSelect } from "../SingleSearchableSelect";
+import { MultiSearchableSelect } from "../MultiSearchableSelect";
+import { books, itemToString } from "../storyData";
+
+// Base UI's Select.List and Combobox.List render role="listbox" with no name of
+// their own. axe only reports that as aria-input-field-name once the trigger has
+// dropped its aria-controls, which happens while the popup animates closed — a
+// state jsdom does not reach. So these assert the property that fixes the rule:
+// the listbox carries a name of its own, independent of the trigger.
+
+const LABEL_ID = "book-label";
+const VisibleLabel = () => <span id={LABEL_ID}>Book</span>;
+
+const openSelectPopup = () => {
+  fireEvent.click(screen.getByRole("combobox"));
+};
+
+const openComboboxPopup = () => {
+  fireEvent.click(screen.getByRole("button", { name: "Open popup" }));
+};
+
+interface Labelling {
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+
+interface Case {
+  name: string;
+  renderWith: (labelling: Labelling) => ReturnType<typeof render>;
+  openPopup: () => void;
+}
+
+const cases: Case[] = [
+  {
+    name: "SingleSelect",
+    renderWith: (labelling) =>
+      render(
+        <SingleSelect data={books} itemToString={itemToString} {...labelling} />
+      ),
+    openPopup: openSelectPopup,
+  },
+  {
+    name: "MultiSelect",
+    renderWith: (labelling) =>
+      render(
+        <MultiSelect data={books} itemToString={itemToString} {...labelling} />
+      ),
+    openPopup: openSelectPopup,
+  },
+  {
+    name: "SingleSearchableSelect",
+    renderWith: (labelling) =>
+      render(
+        <SingleSearchableSelect
+          data={books}
+          itemToString={itemToString}
+          {...labelling}
+        />
+      ),
+    openPopup: openSelectPopup,
+  },
+  {
+    name: "MultiSearchableSelect",
+    renderWith: (labelling) =>
+      render(
+        <MultiSearchableSelect
+          data={books}
+          itemToString={itemToString}
+          {...labelling}
+        />
+      ),
+    openPopup: openSelectPopup,
+  },
+  {
+    name: "SingleCombobox",
+    renderWith: (labelling) =>
+      render(
+        <SingleCombobox
+          data={books}
+          itemToString={itemToString}
+          {...labelling}
+        />
+      ),
+    openPopup: openComboboxPopup,
+  },
+  {
+    name: "MultiCombobox",
+    renderWith: (labelling) =>
+      render(
+        <MultiCombobox
+          data={books}
+          itemToString={itemToString}
+          {...labelling}
+        />
+      ),
+    openPopup: openComboboxPopup,
+  },
+];
+
+describe.each(cases)("$name popup listbox", ({ renderWith, openPopup }) => {
+  test("is named by aria-label", () => {
+    renderWith({ "aria-label": "Book" });
+    openPopup();
+
+    expect(screen.getByRole("listbox", { name: "Book" })).toBeInTheDocument();
+  });
+
+  test("is named by aria-labelledby", () => {
+    render(<VisibleLabel />);
+    renderWith({ "aria-labelledby": LABEL_ID });
+    openPopup();
+
+    expect(screen.getByRole("listbox", { name: "Book" })).toBeInTheDocument();
+  });
+
+  test("is unnamed when neither is given", () => {
+    renderWith({});
+    openPopup();
+
+    expect(screen.getByRole("listbox")).not.toHaveAttribute("aria-label");
+    expect(screen.getByRole("listbox")).not.toHaveAttribute("aria-labelledby");
+  });
+});