@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0-canary.f306f13

package/src/ContextMenu/ContextMenu.test.tsx

@@ -136,21 +136,6 @@ describe('ContextMenu', () => {
     expect(HTMLElement.prototype.hidePopover).toHaveBeenCalled();
   });
 
-  it('closes the menu when Tab is pressed inside it (APG menu pattern)', () => {
-    render(
-      <ContextMenu items={[{label: 'Item 1'}]}>
-        <div>Right-click me</div>
-      </ContextMenu>,
-    );
-
-    fireEvent.contextMenu(screen.getByText('Right-click me'));
-    expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
-
-    const menu = screen.getByRole('menu', {hidden: true});
-    fireEvent.keyDown(menu, {key: 'Tab'});
-    expect(HTMLElement.prototype.hidePopover).toHaveBeenCalled();
-  });
-
   it('ignores Escape during IME composition', () => {
     render(
       <ContextMenu items={[{label: 'Item 1'}]}>
@@ -567,7 +552,7 @@ describe('ContextMenu selectable items', () => {
             <ContextMenuRadioGroup
               value="name"
               onChange={() => {}}
-              label="Sort by">
+              aria-label="Sort by">
               <ContextMenuRadioItem value="name" label="Sort by name" />
               <ContextMenuRadioItem value="date" label="Sort by date" />
             </ContextMenuRadioGroup>
@@ -602,7 +587,7 @@ describe('ContextMenu selectable items', () => {
             <ContextMenuRadioGroup
               value="name"
               onChange={onSort}
-              label="Sort by">
+              aria-label="Sort by">
               <ContextMenuRadioItem value="name" label="Sort by name" />
               <ContextMenuRadioItem value="date" label="Sort by date" />
             </ContextMenuRadioGroup>

package/src/ContextMenu/ContextMenu.tsx

@@ -353,22 +353,13 @@ export function ContextMenu({
         }
         return;
       }
-      // APG menu pattern: Tab closes the menu. Menu items are tabIndex={-1}
-      // so Tab would otherwise leak focus into the page while the menu stayed
-      // open (menus-5). Do NOT preventDefault — closing restores focus to the
-      // previously focused element, and the browser's default Tab then
-      // continues from there to the next element.
-      if (e.key === 'Tab') {
-        closeMenu();
-        return;
-      }
       if (typeahead.onKeyDown(e)) {
         e.preventDefault();
         return;
       }
       listNavKeyDown(e);
     },
-    [listNavKeyDown, closeMenu, typeahead, ownsEvent],
+    [listNavKeyDown, typeahead, ownsEvent],
   );
 
   // Place the zero-size cursor anchor at a point in the trigger's local

package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs

@@ -22,10 +22,16 @@ export const docs = {
       description: 'Callback fired when the selected value changes.',
     },
     {
-      name: 'label',
+      name: 'aria-label',
       type: 'string',
       description:
-        'Accessible name for the group, applied as aria-label so screen readers announce the radios as a named set, e.g. "Sort by". Required. Pass aria-labelledby (via base props) instead when the name already exists as a visible element.',
+        'Accessible label for the group. Required (or aria-labelledby) so screen readers announce the radios as a named set, e.g. "Sort by".',
+    },
+    {
+      name: 'aria-labelledby',
+      type: 'string',
+      description:
+        'The id of an element that labels the group, as an alternative to aria-label.',
     },
     {
       name: 'hasCloseOnSelect',
@@ -51,7 +57,8 @@ export const docsZh = {
   propDescriptions: {
     value: '组中当前选中的值。尚无选中项时传 undefined。',
     onChange: '所选值变化时触发的回调。',
-    label: '组的无障碍名称，作为 aria-label 应用，以便屏幕阅读器将单选项作为命名集合朗读，例如“Sort by”。必需。当名称已作为可见元素存在时，可改用 aria-labelledby（通过基础属性）。',
+    'aria-label': '组的无障碍标签。必需（或 aria-labelledby），以便屏幕阅读器将单选项作为命名集合朗读。',
+    'aria-labelledby': '标记该组的元素 id，作为 aria-label 的替代。',
     hasCloseOnSelect: '选择某值是否关闭菜单。默认关闭。',
     children: '组成该组的 DropdownMenuRadioItem。',
   },
@@ -65,7 +72,8 @@ export const docsDense = {
   propDescriptions: {
     value: 'selected value (undefined = none)',
     onChange: 'fired when selected value changes',
-    label: 'accessible group name (applied as aria-label); required',
+    'aria-label': 'accessible group name (or aria-labelledby); required',
+    'aria-labelledby': 'id of labelling element (alt to aria-label)',
     hasCloseOnSelect: 'close menu on select (default true)',
     children: 'the DropdownMenuRadioItems',
   },

package/src/DropdownMenu/DropdownMenuRadioGroup.tsx

@@ -49,13 +49,16 @@ export interface DropdownMenuRadioGroupProps extends Omit<
    */
   onChange: (value: string) => void;
   /**
-   * Accessible name for the group, announced by screen readers so the radios
-   * read as a named set (e.g. "Sort by"). Applied as the group's `aria-label`.
-   * Required -- an unnamed radio group is an accessibility defect. Pass
-   * `aria-labelledby` (via base props) instead if the name already exists as a
-   * visible element on the page.
+   * Accessible label for the group. Required (together with `aria-labelledby`,
+   * one of the two) so screen readers announce the radios as a named set,
+   * e.g. "Sort by".
    */
-  label: string;
+  'aria-label'?: string;
+  /**
+   * The id of an element that labels the group, as an alternative to
+   * `aria-label`.
+   */
+  'aria-labelledby'?: string;
   /**
    * Whether selecting a value closes the menu. Radio items default to closing
    * on selection (a single-choice commit), unlike checkbox items which stay
@@ -79,7 +82,7 @@ export interface DropdownMenuRadioGroupProps extends Omit<
  *   DropdownMenuRadioItem,
  * } from '@astryxdesign/core/DropdownMenu';
  * <DropdownMenu button={{label: 'Sort'}}>
- *   <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
+ *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
  *     <DropdownMenuRadioItem value="newest" label="Newest" />
  *     <DropdownMenuRadioItem value="oldest" label="Oldest" />
  *   </DropdownMenuRadioGroup>
@@ -89,7 +92,6 @@ export interface DropdownMenuRadioGroupProps extends Omit<
 export function DropdownMenuRadioGroup({
   value,
   onChange,
-  label,
   hasCloseOnSelect = true,
   children,
   className,
@@ -105,7 +107,6 @@ export function DropdownMenuRadioGroup({
     <div
       {...rest}
       role="group"
-      aria-label={label}
       {...mergeProps(stylex.props(styles.group), {className, style})}>
       <DropdownMenuRadioGroupContext value={contextValue}>
         {children}

package/src/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -145,7 +145,7 @@ export interface DropdownMenuRadioItemProps extends Omit<
  *
  * @example
  * ```
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
  *   <DropdownMenuRadioItem value="newest" label="Newest" />
  *   <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
  * </DropdownMenuRadioGroup>

package/src/DropdownMenu/DropdownMenuSelectable.test.tsx

@@ -110,7 +110,7 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
         <DropdownMenuRadioGroup
           value="newest"
           onChange={() => {}}
-          label="Sort by">
+          aria-label="Sort by">
           <DropdownMenuRadioItem value="newest" label="Newest" />
           <DropdownMenuRadioItem value="oldest" label="Oldest" />
         </DropdownMenuRadioGroup>
@@ -136,7 +136,7 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
         <DropdownMenuRadioGroup
           value="newest"
           onChange={onChange}
-          label="Sort by">
+          aria-label="Sort by">
           <DropdownMenuRadioItem value="newest" label="Newest" />
           <DropdownMenuRadioItem value="oldest" label="Oldest" />
         </DropdownMenuRadioGroup>
@@ -149,24 +149,6 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
     expect(onChange).toHaveBeenCalledWith('oldest');
   });
 
-  it('names the group from the required label prop', async () => {
-    const user = userEvent.setup();
-    render(
-      <DropdownMenu button={{label: 'Sort'}}>
-        <DropdownMenuRadioGroup
-          value="newest"
-          onChange={() => {}}
-          label="Sort by">
-          <DropdownMenuRadioItem value="newest" label="Newest" />
-        </DropdownMenuRadioGroup>
-      </DropdownMenu>,
-    );
-    await user.click(screen.getByRole('button', {name: /Sort/}));
-    expect(
-      screen.getByRole('group', {name: 'Sort by', hidden: true}),
-    ).toBeInTheDocument();
-  });
-
   it('throws when a radio item is used outside a group', () => {
     const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
     expect(() =>

package/src/Field/FieldLabel.test.tsx

@@ -12,7 +12,6 @@
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {TestIcon} from '../__tests__/TestIcon';
-import {InternationalizationProvider} from '../i18n';
 import {FieldLabel} from './FieldLabel';
 
 describe('FieldLabel', () => {
@@ -37,30 +36,6 @@ describe('FieldLabel', () => {
     expect(screen.getByText(/Required/)).toBeInTheDocument();
   });
 
-  it('localizes the required indicator via the i18n provider', () => {
-    render(
-      <InternationalizationProvider
-        locale="fr"
-        overrides={{fr: {'@astryx.field.required': 'Obligatoire'}}}>
-        <FieldLabel label="Nom" inputID="name-input" isRequired />
-      </InternationalizationProvider>,
-    );
-    expect(screen.getByText(/Obligatoire/)).toBeInTheDocument();
-    expect(screen.queryByText(/Required/)).not.toBeInTheDocument();
-  });
-
-  it('localizes the optional indicator via the i18n provider', () => {
-    render(
-      <InternationalizationProvider
-        locale="fr"
-        overrides={{fr: {'@astryx.field.optional': 'Facultatif'}}}>
-        <FieldLabel label="Nom" inputID="name-input" isOptional />
-      </InternationalizationProvider>,
-    );
-    expect(screen.getByText(/Facultatif/)).toBeInTheDocument();
-    expect(screen.queryByText(/Optional/)).not.toBeInTheDocument();
-  });
-
   it('shows Optional when both isOptional and isRequired are true', () => {
     render(
       <FieldLabel label="Name" inputID="name-input" isOptional isRequired />,

package/src/Field/FieldLabel.tsx

@@ -1,10 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file FieldLabel.tsx
- * @input Uses React, Icon, IconType, useTranslator
+ * @input Uses React, Icon, IconType
  * @output Exports FieldLabel component, FieldLabelProps
  * @position Core label implementation; used by Field, CheckboxInput, Switch
  *
@@ -12,7 +10,6 @@
  * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Field/index.ts (exports if types change)
  * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
- * - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
  */
 
 import type {ReactNode} from 'react';
@@ -29,7 +26,6 @@ import {
 } from '../theme/tokens.stylex';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {Tooltip} from '../Tooltip';
-import {useTranslator} from '../i18n';
 import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
@@ -181,12 +177,7 @@ export function FieldLabel({
   ref,
   ...rest
 }: FieldLabelProps) {
-  const t = useTranslator();
-  const statusText = isOptional
-    ? t('@astryx.field.optional')
-    : isRequired
-      ? t('@astryx.field.required')
-      : null;
+  const statusText = isOptional ? 'Optional' : isRequired ? 'Required' : null;
 
   // A group label (e.g. for a radiogroup) must not be a literal `<label>`
   // element: a `<label>` semantically names a single form control and can't be

package/src/Item/Item.doc.mjs

@@ -37,7 +37,6 @@ export const docs = {
         {name: 'labelLines', type: 'number', description: 'Max lines before label truncates with ellipsis.'},
         {name: 'descriptionLines', type: 'number', description: 'Max lines before description truncates with ellipsis.'},
         {name: 'onClick', type: '(event: MouseEvent) => void', description: 'Click handler. Makes the item clickable with button semantics.'},
-        {name: 'interactiveRef', type: 'RefObject<HTMLElement | null>', description: 'Ref to a nested control (e.g. a checkbox in startContent) that owns the item\'s keyboard access and action. The row becomes an enlarged click/tap target that delegates surface clicks to it (useClickableContainer) and renders no invisible button/anchor, so the row adds no second tab stop (WCAG 4.1.2). Mutually exclusive with onClick/href — those are ignored when set.'},
         {name: 'href', type: 'string', description: 'Link URL. Makes the item a link via an invisible anchor element.'},
         {name: 'target', type: "'_blank' | '_self'", description: 'Link target. Only used with href. target="_blank" automatically adds noopener noreferrer.'},
         {name: 'rel', type: 'string', description: 'Link relationship tokens. noopener noreferrer are merged automatically for target="_blank".'},
@@ -91,8 +90,6 @@ export const docsZh = {
         labelLines: '标签截断前的最大行数。',
         descriptionLines: '描述截断前的最大行数。',
         onClick: '点击处理函数。使项目可点击，具有按钮语义。',
-        interactiveRef:
-          '指向嵌套控件（如 startContent 中的复选框）的 ref，该控件承载项目的键盘访问和操作。行成为更大的点击/触摸目标，将表面点击委托给该控件（useClickableContainer），且不渲染不可见按钮/锚点，因此行不会增加第二个 Tab 停留点（WCAG 4.1.2）。与 onClick/href 互斥——设置后二者将被忽略。',
         href: '链接 URL。通过不可见锚点元素使项目成为链接。',
         target: '链接目标。仅与 href 一起使用。target="_blank" 会自动添加 noopener noreferrer。',
         rel: '链接关系标记。target="_blank" 会自动合并 noopener noreferrer。',
@@ -160,8 +157,6 @@ export const docsDense = {
         labelLines: 'Max label lines before truncation.',
         descriptionLines: 'Max description lines before truncation.',
         onClick: 'Click handler; enables button semantics.',
-        interactiveRef:
-          'Ref to a nested control that owns the item\'s keyboard access/action; row delegates surface clicks to it (useClickableContainer), no invisible button/anchor, no second tab stop (WCAG 4.1.2). Mutually exclusive with onClick/href.',
         href: 'Link URL; enables anchor semantics.',
         target:
           'Link target, only with href. target="_blank" auto-adds noopener noreferrer.',

package/src/Item/Item.test.tsx

@@ -9,35 +9,11 @@
  * SYNC: When Item component changes, update tests to match new behavior
  */
 
-import {useRef} from 'react';
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Item} from './Item';
 
-/**
- * Item in delegation mode: `interactiveRef` points at a nested control that
- * owns the row's keyboard access and action. The row is an enlarged tap target
- * that forwards surface clicks to that control (useClickableContainer).
- */
-function DelegatingItem({onToggle}: {onToggle?: () => void}) {
-  const ref = useRef<HTMLInputElement>(null);
-  return (
-    <Item
-      label="Row"
-      interactiveRef={ref}
-      startContent={
-        <input
-          ref={ref}
-          type="checkbox"
-          aria-label="Pick row"
-          onChange={onToggle}
-        />
-      }
-    />
-  );
-}
-
 describe('Item', () => {
   // ===========================================================================
   // Basic rendering
@@ -214,70 +190,6 @@ describe('Item', () => {
     expect(buttons).toHaveLength(1);
   });
 
-  // ===========================================================================
-  // Interactive — interactiveRef (delegation to a nested control)
-  // ===========================================================================
-
-  it('renders no invisible button in interactiveRef (delegation) mode', () => {
-    const {container} = render(<DelegatingItem />);
-    // The nested control provides keyboard access — the row must not add a
-    // second focusable control for the same action (WCAG 4.1.2).
-    expect(container.querySelector('button')).not.toBeInTheDocument();
-  });
-
-  it('keeps the nested control as the only tab stop in interactiveRef mode', async () => {
-    const user = userEvent.setup();
-    render(<DelegatingItem />);
-    await user.tab();
-    expect(screen.getByRole('checkbox')).toHaveFocus();
-    // Next tab leaves the item entirely — the row itself is not focusable.
-    await user.tab();
-    expect(screen.getByRole('checkbox')).not.toHaveFocus();
-    expect(document.body).toHaveFocus();
-  });
-
-  it('delegates a row-surface click to the interactive control', async () => {
-    const user = userEvent.setup();
-    const onToggle = vi.fn();
-    render(<DelegatingItem onToggle={onToggle} />);
-    // Clicking the label (row surface) is forwarded to the checkbox.
-    await user.click(screen.getByText('Row'));
-    expect(onToggle).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not double-fire when the interactive control itself is clicked', async () => {
-    const user = userEvent.setup();
-    const onToggle = vi.fn();
-    render(<DelegatingItem onToggle={onToggle} />);
-    await user.click(screen.getByRole('checkbox'));
-    // The row must not re-forward the control's own click back to it.
-    expect(onToggle).toHaveBeenCalledTimes(1);
-  });
-
-  it('ignores onClick when interactiveRef is set (delegation wins, single tab stop)', async () => {
-    const user = userEvent.setup();
-    const onClick = vi.fn();
-    function ItemWithBoth() {
-      const ref = useRef<HTMLInputElement>(null);
-      return (
-        <Item
-          label="Row"
-          onClick={onClick}
-          interactiveRef={ref}
-          startContent={
-            <input ref={ref} type="checkbox" aria-label="Pick row" />
-          }
-        />
-      );
-    }
-    const {container} = render(<ItemWithBoth />);
-    // No invisible button (onClick is ignored in delegation mode)...
-    expect(container.querySelector('button')).not.toBeInTheDocument();
-    // ...and the checkbox is still the sole tab stop.
-    await user.tab();
-    expect(screen.getByRole('checkbox')).toHaveFocus();
-  });
-
   // ===========================================================================
   // Interactive — href (invisible anchor pattern)
   // ===========================================================================

package/src/Item/Item.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file Item.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens
  * @output Exports Item component, ItemProps type
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
  *
@@ -16,7 +16,7 @@
  * - /packages/cli/templates/blocks/components/Item/ (showcase blocks)
  */
 
-import {useRef, type ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -27,11 +27,9 @@ import {
   typeScaleVars,
 } from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps} from '../utils';
 import {computeTargetAndRel} from '../Link/computeTargetAndRel';
 import {useLinkComponent} from '../Link/useLinkComponent';
-import {useClickableContainer} from '../hooks/useClickableContainer';
-import {useDevWarning} from '../hooks/useDevWarning';
 import {themeProps} from '../utils/themeProps';
 
 // =============================================================================
@@ -110,20 +108,6 @@ export interface ItemProps extends BaseProps<HTMLElement> {
    */
   onClick?: (event: React.MouseEvent) => void;
 
-  /**
-   * Ref to a nested control inside the item (e.g. a checkbox in
-   * `startContent`) that already provides the item's keyboard access and
-   * action. When set, the item becomes an enlarged click/tap target that
-   * delegates surface clicks to that control via the `useClickableContainer`
-   * pattern: it renders no invisible button/anchor, so the row adds no second
-   * tab stop (WCAG 4.1.2 — one focusable control per option). Clicks on the
-   * control itself, and on any other nested interactive element, are left to
-   * that element. Mutually exclusive with `onClick`/`href` — when
-   * `interactiveRef` is set those are ignored (the nested control is the sole
-   * action).
-   */
-  interactiveRef?: React.RefObject<HTMLElement | null>;
-
   /**
    * Link URL. Makes the item a link via an invisible anchor element.
    */
@@ -365,7 +349,6 @@ export function Item({
   labelLines,
   descriptionLines,
   onClick,
-  interactiveRef,
   href,
   target: targetFromProps,
   rel: relFromProps,
@@ -380,29 +363,7 @@ export function Item({
   ...restProps
 }: ItemProps) {
   const LinkComponent = useLinkComponent();
-
-  // Delegation mode: the row is an enlarged click/tap target for a nested
-  // control (e.g. a checkbox) that owns the keyboard access and action. The
-  // control is the row's only tab stop; the row proxies surface clicks to it.
-  const isDelegate = interactiveRef != null;
-  const containerRef = useRef<HTMLElement | null>(null);
-  // Only onClick is needed: onMouseUp handles middle-click href navigation,
-  // which delegation mode never has (href is ignored here).
-  const {onClick: delegatedOnClick} = useClickableContainer({
-    containerRef,
-    interactiveRef: interactiveRef ?? undefined,
-    disabled: isDisabled,
-  });
-
-  useDevWarning(
-    'Item',
-    '`interactiveRef` is mutually exclusive with `onClick`/`href`. In ' +
-      'delegation mode the row only forwards clicks to the referenced control, ' +
-      'so `onClick`/`href` are ignored. Drop one of them.',
-    isDelegate && (onClick != null || href != null),
-  );
-
-  const isInteractive = onClick != null || href != null || isDelegate;
+  const isInteractive = onClick != null || href != null;
   const {target, rel} = computeTargetAndRel(targetFromProps, relFromProps);
   // When a semantic role is provided (e.g. "menuitem"), a parent component
   // handles keyboard access. Skip the invisible button/anchor and put
@@ -480,10 +441,7 @@ export function Item({
         <span {...stylex.props(styles.startContent)}>{startContent}</span>
       )}
 
-      {hasParentRole || isDelegate ? (
-        // Delegation mode (and parent-role mode) put the label in a plain span:
-        // keyboard access lives on the nested control, so no invisible
-        // button/anchor is rendered and the row adds no second tab stop.
+      {hasParentRole ? (
         <span
           {...stylex.props(
             styles.content,
@@ -539,9 +497,7 @@ export function Item({
 
   return (
     <Component
-      ref={
-        (isDelegate ? mergeRefs(ref, containerRef) : ref) as React.Ref<never>
-      }
+      ref={ref as React.Ref<never>}
       {...restProps}
       aria-selected={(allowsAriaSelected && isSelected) || undefined}
       // aria-selected is invalid on roles that don't permit it (listitem, a
@@ -571,13 +527,11 @@ export function Item({
       )}
       role={role}
       onClick={
-        isDelegate
-          ? delegatedOnClick
-          : hasParentRole
-            ? onClick
-            : isInteractive
-              ? handleContainerClick
-              : undefined
+        hasParentRole
+          ? onClick
+          : isInteractive
+            ? handleContainerClick
+            : undefined
       }>
       {innerContent}
     </Component>

package/src/List/ListItem.doc.mjs

@@ -59,11 +59,6 @@ export const docs = {
       type: '(e: MouseEvent) => void',
       description: 'Click handler; enables the invisible button pattern.',
     },
-    {
-      name: 'interactiveRef',
-      type: 'RefObject<HTMLElement | null>',
-      description: 'Ref to a nested control (e.g. a checkbox in startContent) that owns the item\'s keyboard access and action. The row becomes an enlarged click/tap target that delegates surface clicks to it (useClickableContainer) and renders no invisible button/anchor, so the row adds no second tab stop (WCAG 4.1.2). Mutually exclusive with onClick/href — those are ignored when set.',
-    },
     {
       name: 'href',
       type: 'string',
@@ -126,11 +121,6 @@ export const docsZh = {
       type: '(e: MouseEvent) => void',
       description: '点击处理函数；启用隐形按钮模式。',
     },
-    {
-      name: 'interactiveRef',
-      type: 'RefObject<HTMLElement | null>',
-      description: '指向嵌套控件（如 startContent 中的复选框）的 ref，该控件承载项目的键盘访问和操作。行成为更大的点击/触摸目标，将表面点击委托给该控件（useClickableContainer），且不渲染不可见按钮/锚点，因此行不会增加第二个 Tab 停留点（WCAG 4.1.2）。与 onClick/href 互斥——设置后二者将被忽略。',
-    },
     {
       name: 'href',
       type: 'string',
@@ -172,8 +162,6 @@ export const docsDense = {
     startContent: 'Content before label area (e.g. icon, avatar).',
     endContent: 'Content after label area (e.g. badge, chevron).',
     onClick: 'Click handler; enables invisible button pattern.',
-    interactiveRef:
-      'Ref to a nested control that owns the item\'s keyboard access/action; row delegates surface clicks to it (useClickableContainer), no invisible button/anchor, no second tab stop (WCAG 4.1.2). Mutually exclusive with onClick/href.',
     href: 'Link URL; enables invisible anchor pattern.',
     target: 'Link target attribute, only when href provided. target="_blank" auto-adds noopener noreferrer.',
     rel: 'Link relationship tokens. noopener noreferrer are merged for target="_blank".',

package/src/List/ListItem.tsx

@@ -75,17 +75,6 @@ export interface ListItemProps extends BaseProps<HTMLLIElement> {
    */
   onClick?: (e: React.MouseEvent) => void;
 
-  /**
-   * Ref to a nested control inside the item (e.g. a checkbox in
-   * `startContent`) that already provides the item's keyboard access and
-   * action. When set, the item becomes an enlarged click/tap target that
-   * delegates surface clicks to that control via the `useClickableContainer`
-   * pattern: it renders no invisible button/anchor, so the row adds no second
-   * tab stop (WCAG 4.1.2 — one focusable control per option). Mutually
-   * exclusive with `onClick`/`href` — when set those are ignored.
-   */
-  interactiveRef?: React.RefObject<HTMLElement | null>;
-
   /**
    * URL for link items. Renders an invisible anchor element.
    * Automatically enables hover/press styles when provided.
@@ -210,7 +199,6 @@ export function ListItem({
   startContent,
   endContent,
   onClick,
-  interactiveRef,
   href,
   target,
   rel,
@@ -251,7 +239,6 @@ export function ListItem({
       description={description}
       endContent={endContent}
       onClick={onClick}
-      interactiveRef={interactiveRef}
       href={href}
       target={target as '_blank' | '_self'}
       rel={rel}

package/src/MetadataList/MetadataList.test.tsx

@@ -5,7 +5,6 @@ import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {MetadataList} from './MetadataList';
 import {MetadataListItem} from './MetadataListItem';
-import {InternationalizationProvider} from '../i18n';
 
 describe('MetadataList', () => {
   it('renders a description list with items', () => {
@@ -88,29 +87,6 @@ describe('MetadataList', () => {
     expect(screen.queryByText('B')).not.toBeInTheDocument();
   });
 
-  it('localizes the show more / show less labels through the i18n catalog', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <InternationalizationProvider
-        locale="fr"
-        overrides={{
-          fr: {
-            '@astryx.metadataList.showMore': 'Afficher plus',
-            '@astryx.metadataList.showLess': 'Afficher moins',
-          },
-        }}>
-        <MetadataList maxNumOfItems={1}>
-          <MetadataListItem label="A">1</MetadataListItem>
-          <MetadataListItem label="B">2</MetadataListItem>
-        </MetadataList>
-      </InternationalizationProvider>,
-    );
-
-    await user.click(screen.getByText('Afficher plus'));
-    expect(screen.getByText('Afficher moins')).toBeInTheDocument();
-  });
-
   it('does not show toggle in horizontal mode even with maxNumOfItems', () => {
     render(
       <MetadataList orientation="horizontal" maxNumOfItems={1}>