@astryxdesign/core 0.1.2 → 0.1.3-canary.6d57c8d

package/src/MultiSelector/MultiSelector.tsx

@@ -4,13 +4,15 @@
 
 /**
  * @file MultiSelector.tsx
- * @input Uses React, StyleX, usePopover, CheckboxInput, Field, Badge, Icon
+ * @input Uses React, StyleX, usePopover, useTooltip, CheckboxInput, Field, Badge, Icon, InputGroupContext
  * @output Exports MultiSelector component
  * @position Core implementation; consumed by index.ts
  *
  * SYNC: When modified, update:
  * - /packages/core/src/MultiSelector/MultiSelector.doc.mjs
+ * - /packages/core/src/MultiSelector/MultiSelector.test.tsx
  * - /packages/core/src/MultiSelector/index.ts
+ * - /apps/storybook/stories/InputGroup.stories.tsx
  * - /packages/cli/templates/blocks/components/MultiSelector/ (showcase blocks)
  */
 
@@ -27,6 +29,7 @@ import React, {
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {usePopover} from '../Popover/usePopover';
+import {useTooltip} from '../Tooltip';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import type {IconName} from '../Icon';
 import {
@@ -64,11 +67,15 @@ import {
   getSelectableOptions,
 } from '../Selector/utils';
 import {useMultiCombobox} from './hooks';
-import {mergeProps} from '../utils';
+import {getInputARIA, mergeProps} from '../utils';
+import {useAnnounce} from '../hooks/useAnnounce';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {groupStyles} from '../InputGroup/groupStyles';
+import {useInputGroup} from '../InputGroup/InputGroupContext';
+import {VisuallyHidden} from '../VisuallyHidden';
 
 // Sentinel value for the select-all item in keyboard navigation
 const SELECT_ALL_VALUE = '__xds_select_all__';
@@ -397,6 +404,30 @@ export interface MultiSelectorProps<
    */
   isDisabled?: boolean;
 
+  /**
+   * Explains why the selector is disabled. When set together with
+   * `isDisabled`, the selector shows a tooltip with this text on hover and
+   * keyboard focus, and the trigger stays focusable (via `aria-disabled`)
+   * so the reason is discoverable by keyboard and assistive technology.
+   * Activation stays blocked.
+   *
+   * Use this instead of wrapping a disabled selector in `Tooltip` — disabled
+   * controls don't emit the pointer events an external tooltip needs.
+   *
+   * @example
+   * ```
+   * <MultiSelector
+   *   label="Columns"
+   *   options={columns}
+   *   value={selected}
+   *   onChange={setSelected}
+   *   isDisabled
+   *   disabledMessage="Select a table first"
+   * />
+   * ```
+   */
+  disabledMessage?: string;
+
   /**
    * The options to display in the selector.
    * Can be strings, objects, dividers, or sections.
@@ -545,6 +576,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   isOptional = false,
   isRequired = false,
   isDisabled = false,
+  disabledMessage,
   options,
   value,
   onChange,
@@ -575,9 +607,11 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   const listboxId = useId();
   const descriptionId = useId();
   const statusMessageId = useId();
+  const inputLabelId = useId();
   const searchId = useId();
   const triggerRef = useRef<HTMLButtonElement>(null);
   const searchRef = useRef<HTMLInputElement>(null);
+  const inputGroup = useInputGroup();
 
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -592,14 +626,29 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
 
-  // Build aria-describedby
-  const ariaDescribedBy =
+  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
+  // tooltip listeners attach to the trigger container (which already exists)
+  // and the trigger button stays perceivable via aria-disabled instead of the
+  // disabled attribute. Activation is blocked by the isDisabled guards in
+  // useMultiCombobox (onTriggerClick / onKeyDown).
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The container div is not naturally focusable; focusin bubbles up from
+    // the trigger button, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage,
+  });
+
+  const {ariaLabelledBy, ariaDescribedBy} = getInputARIA(
+    inputLabelId,
     [
       description ? descriptionId : null,
       status?.message ? statusMessageId : null,
-    ]
-      .filter(Boolean)
-      .join(' ') || undefined;
+      showsDisabledMessage ? disabledMessageTooltip.describedBy : null,
+    ],
+    inputGroup,
+  );
 
   // Flatten options for keyboard navigation
   const selectableItems = useMemo(
@@ -607,6 +656,25 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     [options],
   );
 
+  // Announce selection-count changes politely (comboboxes-7 announce path).
+  // Toggling options / select-all previously produced no audible feedback.
+  const announce = useAnnounce();
+  const announceSelection = useCallback(
+    (nextValue: string[]) => {
+      const total = selectableItems.length;
+      const selectableSet = new Set(selectableItems.map(item => item.value));
+      const selectedCount = nextValue.filter(v => selectableSet.has(v)).length;
+      if (selectedCount === 0) {
+        announce('Selection cleared');
+      } else if (total > 0 && selectedCount === total) {
+        announce('All selected');
+      } else {
+        announce(`${selectedCount} of ${total} selected`);
+      }
+    },
+    [announce, selectableItems],
+  );
+
   // Filter items by search query
   const filteredItems = useMemo(() => {
     if (!searchQuery) {
@@ -696,7 +764,9 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     onHide: handleLayerHide,
     hasCloseButton: false,
     hasAutoFocus: false,
-    dialogLabel: `${label} options`,
+    // The popup's own role="listbox" is the exposed semantics; the trigger
+    // keeps DOM focus, so wrapping it in a modal dialog would misrepresent it.
+    role: 'none',
   });
 
   // Open dropdown on mount when isDefaultOpen is true
@@ -708,19 +778,34 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   }, []);
 
   // Handle toggle
-  // Handle clear button click
+  // Clear all selected values. Shared by the clear button and the keyboard
+  // Delete/Backspace path so clearing is reachable without a mouse.
+  const clearValues = useCallback(() => {
+    onChange([]);
+    announceSelection([]);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue([]);
+        await changeAction([]);
+      });
+    }
+  }, [
+    onChange,
+    changeAction,
+    startTransition,
+    setOptimisticValue,
+    announceSelection,
+  ]);
+
+  // Whether there is at least one selected value (clearing is meaningful).
+  const hasValue = optimisticValue.length > 0;
+
   const handleClear = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation(); // Don't open dropdown
-      onChange([]);
-      if (changeAction) {
-        startTransition(async () => {
-          setOptimisticValue([]);
-          await changeAction([]);
-        });
-      }
+      clearValues();
     },
-    [onChange, changeAction, startTransition, setOptimisticValue],
+    [clearValues],
   );
 
   const handleToggle = useCallback(
@@ -730,6 +815,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
         : [...optimisticValue, itemValue];
 
       onChange(newValue);
+      announceSelection(newValue);
       if (changeAction) {
         startTransition(async () => {
           setOptimisticValue(newValue);
@@ -743,6 +829,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
       changeAction,
       startTransition,
       setOptimisticValue,
+      announceSelection,
     ],
   );
 
@@ -788,6 +875,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     }
 
     onChange(newValue);
+    announceSelection(newValue);
     if (changeAction) {
       startTransition(async () => {
         setOptimisticValue(newValue);
@@ -802,6 +890,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     changeAction,
     startTransition,
     setOptimisticValue,
+    announceSelection,
   ]);
 
   // Route toggle: select-all sentinel → handleSelectAll, everything else → handleToggle
@@ -843,9 +932,24 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     }, [popover, hasSearch, optimisticValue]),
     onClose: popover.hide,
     onToggle: handleNavigableToggle,
+    onClear: hasClear ? clearValues : undefined,
+    hasValue,
     listboxId,
   });
 
+  // Keep the highlighted option visible during keyboard navigation. The
+  // listbox is a fixed-height scroll container, so without this the virtual
+  // cursor walks off-screen once navigation passes the visible window. Mirrors
+  // CommandPaletteItem's scrollIntoView({block: 'nearest'}) behavior.
+  useEffect(() => {
+    if (!popover.isOpen || highlightedIndex < 0) {
+      return;
+    }
+    document
+      .getElementById(getItemId(highlightedIndex))
+      ?.scrollIntoView?.({block: 'nearest'});
+  }, [popover.isOpen, highlightedIndex, getItemId]);
+
   // Build trigger display content
   const selectedLabels = useMemo(() => {
     return optimisticValue.map(v => {
@@ -906,17 +1010,30 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
         <input
           ref={searchRef}
           id={searchId}
-          role="searchbox"
+          // When hasSearch is set, focus moves into this input on open, so it —
+          // not the trigger — must be the combobox reporting the highlighted
+          // option via aria-activedescendant (comboboxes-4).
+          role="combobox"
+          aria-expanded={popover.isOpen}
           aria-controls={listboxId}
+          aria-autocomplete="list"
+          aria-activedescendant={
+            popover.isOpen && highlightedIndex >= 0
+              ? getItemId(highlightedIndex)
+              : undefined
+          }
           aria-label="Search options"
           type="text"
           value={searchQuery}
           onChange={e => setSearchQuery(e.target.value)}
           onKeyDown={e => {
-            // Let ArrowDown/Up/Escape/Tab propagate to parent handler
+            // Arrow keys navigate options; Enter toggles; Escape/Tab close.
+            // Space and Home/End are left to the input (type a space / move
+            // the caret), not forwarded to option navigation.
             if (
               e.key === 'ArrowDown' ||
               e.key === 'ArrowUp' ||
+              e.key === 'Enter' ||
               e.key === 'Escape' ||
               e.key === 'Tab'
             ) {
@@ -935,6 +1052,9 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     searchQuery,
     searchPlaceholder,
     onKeyDown,
+    popover.isOpen,
+    highlightedIndex,
+    getItemId,
   ]);
 
   // Render an individual item (index-based)
@@ -1062,9 +1182,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
 
       if (isDivider(option)) {
         flushPending();
-        elements.push(
-          <Divider key={`divider-${i}`} xstyle={styles.divider} />,
-        );
+        elements.push(<Divider key={`divider-${i}`} xstyle={styles.divider} />);
       } else if (isSection(option)) {
         flushPending();
         const count = option.options.length;
@@ -1096,30 +1214,15 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     return elements;
   }, [options, renderItem, sortedItems, searchQuery, hasSelectAll]);
 
-  return (
-    <Field
-      label={label}
-      isLabelHidden={isLabelHidden}
-      description={description}
-      inputID={triggerId}
-      descriptionID={description ? descriptionId : undefined}
-      isOptional={isOptional}
-      isRequired={isRequired}
-      isDisabled={isDisabled}
-      status={
-        status
-          ? {
-              type: status.type,
-              message: status.message,
-              messageID: status.message ? statusMessageId : undefined,
-            }
-          : undefined
-      }
-      labelTooltip={labelTooltip}
-      width={width}>
+  const multiSelectorContent = (
+    <>
       <div
         ref={el => {
           popover.triggerRef(el);
+          // Anchor + hover/focus listeners for the disabled-message tooltip.
+          // Handlers are gated internally by isEnabled, and anchor names
+          // compose, so attaching unconditionally is safe.
+          disabledMessageTooltip.ref(el);
         }}
         onClick={onTriggerClick}
         data-testid={testId}
@@ -1133,6 +1236,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
             optimisticValue.length === 0 && styles.triggerPlaceholder,
             status && inputStatusBorderStyles[status.type],
             status && inputStatusHoverShadowStyles[status.type],
+            inputGroup && groupStyles.inGroup,
             xstyle,
           ),
           className,
@@ -1140,26 +1244,37 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
         )}>
         {startIcon &&
           renderIconSlot(startIcon, {size: 'sm', color: 'secondary'})}
+        {inputGroup && (
+          <VisuallyHidden id={inputLabelId}>{label}</VisuallyHidden>
+        )}
         <button
           ref={triggerRef}
           id={triggerId}
           type="button"
-          role="combobox"
+          // In hasSearch mode the popup's search input is the combobox (it owns
+          // focus + aria-activedescendant, comboboxes-4), so the trigger is a
+          // plain button that opens the listbox — not a second combobox.
+          role={hasSearch ? undefined : 'combobox'}
           aria-haspopup="listbox"
           aria-expanded={popover.isOpen}
           aria-controls={listboxId}
           aria-activedescendant={
-            popover.isOpen && highlightedIndex >= 0
+            !hasSearch && popover.isOpen && highlightedIndex >= 0
               ? getItemId(highlightedIndex)
               : undefined
           }
           aria-describedby={ariaDescribedBy}
+          aria-labelledby={ariaLabelledBy}
           aria-required={isRequired ? 'true' : undefined}
           aria-invalid={status?.type === 'error' ? 'true' : undefined}
           aria-busy={isBusy || undefined}
-          disabled={isDisabled}
+          // With a disabledMessage the trigger keeps focusability via
+          // aria-disabled so the reason is focus-discoverable; activation is
+          // still blocked by the isDisabled guards in useMultiCombobox.
+          disabled={isDisabled && !showsDisabledMessage}
+          aria-disabled={showsDisabledMessage ? 'true' : undefined}
           onKeyDown={onKeyDown}
-          tabIndex={-1}
+          tabIndex={isDisabled && !showsDisabledMessage ? -1 : 0}
           {...stylex.props(styles.trigger)}>
           <span {...stylex.props(styles.triggerContent)}>
             {renderTriggerContent()}
@@ -1169,7 +1284,6 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
         {hasClear && value.length > 0 && !isDisabled && (
           <button
             type="button"
-            tabIndex={-1}
             onClick={handleClear}
             aria-label={`Clear all ${label}`}
             {...stylex.props(styles.clearButton)}>
@@ -1211,6 +1325,38 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
           xstyle: styles.popover,
         },
       )}
+
+      {showsDisabledMessage &&
+        disabledMessageTooltip.renderTooltip(disabledMessage)}
+    </>
+  );
+
+  if (inputGroup) {
+    return multiSelectorContent;
+  }
+
+  return (
+    <Field
+      label={label}
+      isLabelHidden={isLabelHidden}
+      description={description}
+      inputID={triggerId}
+      descriptionID={description ? descriptionId : undefined}
+      isOptional={isOptional}
+      isRequired={isRequired}
+      isDisabled={isDisabled}
+      status={
+        status
+          ? {
+              type: status.type,
+              message: status.message,
+              messageID: status.message ? statusMessageId : undefined,
+            }
+          : undefined
+      }
+      labelTooltip={labelTooltip}
+      width={width}>
+      {multiSelectorContent}
     </Field>
   );
 }

package/src/MultiSelector/hooks.ts

@@ -23,6 +23,17 @@ interface UseMultiComboboxOptions {
   onOpen: () => void;
   onClose: () => void;
   onToggle: (itemValue: string) => void;
+  /**
+   * Clear all selected values. When provided, pressing Delete or Backspace on
+   * the closed trigger clears the selection — a keyboard equivalent of the
+   * clear button (comboboxes-2). No-op when the popup is open or search is on.
+   */
+  onClear?: () => void;
+  /**
+   * Whether at least one value is selected (i.e. there is something to clear).
+   * The Delete/Backspace clear path is skipped when false.
+   */
+  hasValue?: boolean;
   listboxId: string;
 }
 
@@ -49,6 +60,8 @@ export function useMultiCombobox({
   onOpen,
   onClose,
   onToggle,
+  onClear,
+  hasValue = false,
   listboxId,
 }: UseMultiComboboxOptions): UseMultiComboboxResult {
   const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
@@ -179,6 +192,18 @@ export function useMultiCombobox({
           }
           break;
 
+        case 'Delete':
+        case 'Backspace':
+          // Keyboard equivalent of the clear button (comboboxes-2): clear all
+          // selected values from the closed trigger so clearing is not
+          // mouse-only. Skipped in search mode (keys edit the query) and while
+          // the popup is open (arrow navigation owns interaction).
+          if (!hasSearch && !isOpen && onClear != null && hasValue) {
+            e.preventDefault();
+            onClear();
+          }
+          break;
+
         default:
           // Typeahead only when search is not present
           if (!hasSearch && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
@@ -218,6 +243,8 @@ export function useMultiCombobox({
       getEnabledIndices,
       typeahead,
       hasSearch,
+      onClear,
+      hasValue,
     ],
   );
 

package/src/NavMenu/NavHeadingMenu.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {render, screen, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {NavHeadingMenu} from './NavHeadingMenu';
 import {NavHeadingMenuItem} from './NavHeadingMenuItem';
@@ -204,6 +204,82 @@ describe('keyboard navigation', () => {
     await user.keyboard('{End}');
     expect(document.activeElement).toBe(items[2]);
   });
+
+  it('activates a focused onClick-only item with Enter', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <NavHeadingMenu>
+        <NavHeadingMenuItem label="Action" onClick={onClick} />
+      </NavHeadingMenu>,
+    );
+    const item = screen.getByRole('menuitem');
+    item.focus();
+
+    await user.keyboard('{Enter}');
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('activates a focused onClick-only item with Space', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <NavHeadingMenu>
+        <NavHeadingMenuItem label="Action" onClick={onClick} />
+      </NavHeadingMenu>,
+    );
+    const item = screen.getByRole('menuitem');
+    item.focus();
+
+    await user.keyboard('{ }');
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('does not activate a disabled item with Enter', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <NavHeadingMenu>
+        <NavHeadingMenuItem label="Action" onClick={onClick} isDisabled />
+      </NavHeadingMenu>,
+    );
+    const item = screen.getByRole('menuitem');
+    item.focus();
+
+    await user.keyboard('{Enter}');
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('typeahead focuses the item matching the typed character (menus-11)', () => {
+    render(
+      <NavHeadingMenu>
+        <NavHeadingMenuItem label="Cut" />
+        <NavHeadingMenuItem label="Paste" />
+      </NavHeadingMenu>,
+    );
+    const menu = screen.getByRole('menu');
+    fireEvent.keyDown(menu, {key: 'p'});
+    expect(screen.getByRole('menuitem', {name: 'Paste'})).toHaveFocus();
+  });
+
+  it('typeahead skips a disabled menuitem (menus-11)', () => {
+    render(
+      <NavHeadingMenu>
+        <NavHeadingMenuItem label="Cut" />
+        <NavHeadingMenuItem label="Paste (disabled)" isDisabled />
+        <NavHeadingMenuItem label="Paste special" />
+      </NavHeadingMenu>,
+    );
+    const menu = screen.getByRole('menu');
+    // Typing "p" must land on the enabled "Paste special", never the disabled
+    // "Paste (disabled)" — the disabled item is excluded from the typeahead
+    // selector entirely.
+    fireEvent.keyDown(menu, {key: 'p'});
+    expect(screen.getByRole('menuitem', {name: 'Paste special'})).toHaveFocus();
+    expect(
+      screen.getByRole('menuitem', {name: 'Paste (disabled)'}),
+    ).not.toHaveFocus();
+  });
 });
 
 describe('context forwarding', () => {

package/src/NavMenu/NavHeadingMenu.tsx

@@ -12,12 +12,13 @@
  * - /packages/core/src/NavMenu/index.ts
  */
 
-import React, {useMemo, type ReactNode} from 'react';
+import React, {useCallback, useMemo, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {useListFocus} from '../hooks/useListFocus';
+import {useTypeahead} from '../hooks/useTypeahead';
 import {themeProps} from '../utils/themeProps';
 import {
   NavHeadingMenuContext,
@@ -98,10 +99,56 @@ export function NavHeadingMenu({
   const closeCtx = useNavHeadingCloseContext();
   const closeMenu = closeCtx?.closeMenu;
 
-  const {listRef, handleKeyDown} = useListFocus({
+  const {listRef, handleKeyDown, focusItem} = useListFocus({
+    itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
     onEscape: closeMenu,
   });
 
+  // First-character typeahead over the (enabled) menu items (menus-11).
+  const getMenuItems = useCallback(
+    (): HTMLElement[] =>
+      listRef.current
+        ? Array.from(
+            listRef.current.querySelectorAll<HTMLElement>(
+              '[role="menuitem"]:not([aria-disabled="true"])',
+            ),
+          )
+        : [],
+    [listRef],
+  );
+  const typeahead = useTypeahead({
+    getItemLabels: () => getMenuItems().map(el => el.textContent),
+    onMatch: focusItem,
+    getCurrentIndex: () =>
+      getMenuItems().findIndex(
+        el =>
+          el === document.activeElement || el.contains(document.activeElement),
+      ),
+  });
+
+  // Extend useListFocus with Enter/Space activation. Items rendered without an
+  // `href` are `<div role="menuitem">` elements, which have no native keyboard
+  // activation — without this, Enter/Space on a focused onClick-only item does
+  // nothing. Anchor items (with `href`) already activate on Enter natively.
+  const listKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        const focused = document.activeElement as HTMLElement | null;
+        if (focused?.getAttribute('role') === 'menuitem') {
+          e.preventDefault();
+          focused.click();
+          return;
+        }
+      }
+      if (typeahead.onKeyDown(e)) {
+        e.preventDefault();
+        return;
+      }
+      handleKeyDown(e);
+    },
+    [handleKeyDown, typeahead],
+  );
+
   const ctx = useMemo(
     () => ({
       closeMenu: closeMenu ?? (() => {}),
@@ -117,7 +164,7 @@ export function NavHeadingMenu({
       <div
         ref={mergeRefs(ref, listRef)}
         role="menu"
-        onKeyDown={handleKeyDown}
+        onKeyDown={listKeyDown}
         data-testid={testId}
         {...mergeProps(
           themeProps('nav-heading-menu', {size}),