@sproutsocial/seeds-react-menu 1.16.16 → 1.18.0

package/src/v3/MultiSearchableSelect.tsx

@@ -32,16 +32,16 @@ import {
 } from "./Common/ComboboxStyles";
 import { ClearIcon, StyledChevron, ChevronIcon } from "./Common/SelectIcons";
 import Icon from "@sproutsocial/seeds-react-icon";
-import styled from "styled-components";
+import { cn } from "./Common/cn";
 
-// ─── Styled components ────────────────────────────────────────────────────────
+// ─── CSS-class components (see menu.css) ────────────────────────────────────
 
-const SelectionText = styled.span`
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
+const SelectionText = ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => (
+  <span className={cn("seeds-select-selection-text", className)} {...rest} />
+);
 
 // ─── Sentinels ────────────────────────────────────────────────────────────────
 
@@ -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

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Select } from "@base-ui/react/select";
-import styled from "styled-components";
 import { useSeedsPortalContainer } from "./SeedsPortal";
 import SelectItem from "./Common/SelectItem";
 import type { DataWithId } from "./Common/types";
@@ -17,25 +16,21 @@ import {
   SelectPopup,
 } from "./Common/SelectStyles";
 import { StyledChevron, ChevronIcon } from "./Common/SelectIcons";
+import { cn } from "./Common/cn";
 
-// ─── Styled components ────────────────────────────────────────────────────────
+// ─── CSS-class components (see menu.css) ────────────────────────────────────
 
-const SelectionText = styled.span`
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
+const SelectionText = ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => (
+  <span className={cn("seeds-select-selection-text", className)} {...rest} />
+);
 
 // The styles in here need cleaned up, but in MultiSearchableSelect are correct
-const Placeholder = styled.div`
-  color: ${({ theme }) => theme.colors.text.subtext};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  line-height: 16px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  margin: 2px 8px 0px 0px;
-`;
+const Placeholder = ({ className, ...rest }: React.ComponentProps<"div">) => (
+  <div className={cn("seeds-select-placeholder", className)} {...rest} />
+);
 
 // ─── Props ────────────────────────────────────────────────────────────────────
 
@@ -43,6 +38,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 +91,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 +232,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

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Select } from "@base-ui/react/select";
-import styled from "styled-components";
 import { useSeedsPortalContainer } from "./SeedsPortal";
 import SelectItem from "./Common/SelectItem";
 import type { DataWithId } from "./Common/types";
@@ -16,21 +15,22 @@ import {
   SelectPopup,
 } from "./Common/SelectStyles";
 import { StyledChevron, ChevronIcon } from "./Common/SelectIcons";
+import { cn, type WithStringClassName } from "./Common/cn";
 
 // <Listbox(?!\.|B)
-// ─── Styled components ────────────────────────────────────────────────────────
+// ─── CSS-class components (see menu.css) ────────────────────────────────────
 
-const StyledValue = styled(Select.Value)`
-  flex: 1;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &[data-placeholder] {
-    color: ${({ theme }) => theme.colors.text.subtext};
-  }
-`;
+const StyledValue = React.forwardRef<
+  React.ElementRef<typeof Select.Value>,
+  WithStringClassName<React.ComponentProps<typeof Select.Value>>
+>(({ className, ...rest }, ref) => (
+  <Select.Value
+    ref={ref}
+    className={cn("seeds-select-value-text", className)}
+    {...rest}
+  />
+));
+StyledValue.displayName = "StyledValue";
 
 // ─── Props ────────────────────────────────────────────────────────────────────
 
@@ -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");
+  });
+});