@astryxdesign/core 0.7.7 → 0.7.8-canary.0588a13

package/src/Stepper/Stepper.tsx

@@ -23,14 +23,7 @@
  * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
  */
 
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
+import {useCallback, useMemo, useRef, useState, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 
 import {spacingVars} from '../theme/tokens.stylex';
@@ -360,32 +353,22 @@ export function Stepper({
   // still owns the ref and DOM pass-throughs and fills that frame, so its width
   // is the effective component width to observe.
   const [rootWidth, setRootWidth] = useState(0);
-  const stopObservingRootRef = useRef<(() => void) | null>(null);
   const attachRoot = useCallback(
     (el: HTMLOListElement | null) => {
-      stopObservingRootRef.current?.();
-      stopObservingRootRef.current = null;
-      if (el && isHorizontal) {
-        // observeResize calls back once, synchronously, as it subscribes. That
-        // is what keeps the collapse off the screen: a ref callback runs during
-        // commit, so the width lands and the re-render happens before the
-        // browser has painted the uncollapsed stepper it would otherwise show
-        // first.
-        stopObservingRootRef.current = observeResize(el, entry =>
-          setRootWidth(entry.target.clientWidth),
-        );
+      if (el == null || !isHorizontal) {
+        return;
       }
+      // observeResize calls back once, synchronously, as it subscribes. That
+      // is what keeps the collapse off the screen: a ref callback runs during
+      // commit, so the width lands and the re-render happens before the
+      // browser has painted the uncollapsed stepper it would otherwise show
+      // first. React calls the returned unsubscribe when the list detaches or
+      // when the orientation changes.
+      return observeResize(el, entry => setRootWidth(entry.target.clientWidth));
     },
     [isHorizontal],
   );
   const rootRef = useMergedRefs(ref, attachRoot);
-  useEffect(
-    () => () => {
-      stopObservingRootRef.current?.();
-      stopObservingRootRef.current = null;
-    },
-    [],
-  );
 
   // Width is measured rather than asked of a container query because the
   // answer changes what is *rendered*, not just how it looks: the labels and

package/src/Switch/Switch.tsx

@@ -52,7 +52,6 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {useAnnounce} from '../hooks/useAnnounce';
-import {useResolvedRequired} from '../hooks/useResolvedRequired';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {usePressFeedback} from '../hooks/usePressFeedback';
@@ -867,10 +866,6 @@ export function Switch({
   const pressable = usePressFeedback();
   const descriptionID = useId();
   const statusMessageID = useId();
-  // Announce the effective required state (form default included) while the
-  // native `required` stays bound to the explicit `isRequired` so a layout
-  // default never switches on browser validation.
-  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
 
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
@@ -1003,7 +998,8 @@ export function Switch({
         aria-disabled={isDisabled ? 'true' : undefined}
         form={isDisabled ? '' : undefined}
         required={isRequired}
-        aria-required={isEffectivelyRequired ? 'true' : undefined}
+        // A form's required default sets nothing here: an off switch is an answer.
+        aria-required={isRequired ? 'true' : undefined}
         onChange={e => {
           if (isDisabled || isBusy) {
             return;

package/src/Switch/useSwitchTouch.ts

@@ -23,7 +23,7 @@ import type {GestureTouch} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {
-  createAnimator,
+  createMotionAnimator,
   type Animator,
   type MotionCurve,
 } from '../motion/animator';
@@ -282,15 +282,15 @@ export class SwitchTouchController {
       return;
     }
     registerSwitchTable();
-    this.thumb = createAnimator(elements.thumb);
+    this.thumb = createMotionAnimator(elements.thumb);
     // The layer rests clear (its class's opacity 0) while the visuals show
     // the value; from here its opacity is the animator's.
-    this.fade = createAnimator(elements.track, {
+    this.fade = createMotionAnimator(elements.track, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });
     this.fade.set({opacity: 0});
-    this.shadow = createAnimator(elements.thumb, {
+    this.shadow = createMotionAnimator(elements.thumb, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });

package/src/Table/BaseTable.tsx

@@ -14,7 +14,14 @@
  * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
-import {memo, useRef, type ReactElement, type ReactNode, type Ref} from 'react';
+import {
+  memo,
+  useId,
+  useRef,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react';
 import {isRenderable} from '../utils/isRenderable';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
@@ -423,6 +430,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
   } satisfies TableRenderProps);
 
   // --- Plugin pipeline: header cells ---
+  const headerLabelIdBase = useId();
   const headerCells = resolvedColumns.map((col, columnIndex) => {
     const headerContent = col.header ?? col.key;
 
@@ -477,28 +485,54 @@ function BaseTableInner<T extends Record<string, unknown>>({
     const hasSlots =
       before != null || after != null || overlay != null || below != null;
 
-    const headerInner = hasSlots ? (
+    const labelRow = isRenderable(after) ? (
+      <div {...stylex.props(styles.headerLabelRow)}>
+        {resolvedContent}
+        {after}
+      </div>
+    ) : (
+      resolvedContent
+    );
+
+    // The overlay is a control of its own. Keep its name and value out of the
+    // header's name.
+    const namesOwnHeader =
+      isRenderable(overlay) &&
+      mergedHtmlProps['aria-label'] == null &&
+      mergedHtmlProps['aria-labelledby'] == null;
+    const labelId = `${headerLabelIdBase}-label-${columnIndex}`;
+    const belowId = `${headerLabelIdBase}-below-${columnIndex}`;
+    const hasBelow = isRenderable(below);
+
+    const headerInner = !hasSlots ? (
+      resolvedContent
+    ) : namesOwnHeader ? (
+      <>
+        {/* Inline, so the cell's text-overflow still reaches the label. */}
+        <span id={labelId}>
+          {before}
+          {labelRow}
+        </span>
+        {overlay}
+        {hasBelow && <div id={belowId}>{below}</div>}
+      </>
+    ) : (
       <>
         {before}
-        {isRenderable(after) ? (
-          <div {...stylex.props(styles.headerLabelRow)}>
-            {resolvedContent}
-            {after}
-          </div>
-        ) : (
-          resolvedContent
-        )}
+        {labelRow}
         {overlay}
         {below}
       </>
-    ) : (
-      resolvedContent
     );
+    const headerNameProps = namesOwnHeader
+      ? {'aria-labelledby': hasBelow ? `${labelId} ${belowId}` : labelId}
+      : {};
 
     return (
       <HeaderCellComponent
         key={col.key}
         {...mergedHtmlProps}
+        {...headerNameProps}
         {...headerTitleProp}
         contextMenuActions={cellRenderProps.contextMenuActions}
         xstyle={cellRenderProps.xstyle}>

package/src/Table/plugins/columnResize/useTableColumnResize.tsx

@@ -865,7 +865,7 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
     }
   }, []);
 
-  // Clean up observer on unmount
+  // Releases the table resize observer on unmount.
   useEffect(() => {
     return () => {
       unobserveTableRef.current?.();
@@ -934,6 +934,7 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
     };
   }, []);
 
+  // Releases the resize gate on unmount.
   useEffect(() => {
     return () => {
       gateCleanupRef.current?.();

package/src/Table/plugins/filtering/useTableFiltering.tsx

@@ -820,6 +820,7 @@ function StringListFilterControl({
       }}
       size={size}
       hasClear={hasClear}
+      presentation="popover"
     />
   );
 }

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -102,6 +102,17 @@ export interface UseTableRowExpansionConfig<T extends Record<string, unknown>> {
    * it is expanded. Receives the row's item.
    */
   renderExpanded: (item: T) => ReactNode;
+  /**
+   * Derive a human-readable row identity for the expansion control's accessible
+   * name. The plugin combines it with localized expand/collapse wording. Blank
+   * labels fall back to the generic row label.
+   *
+   * @example
+   * ```
+   * getRowLabel: item => item.name
+   * ```
+   */
+  getRowLabel?: (item: T) => string;
   /**
    * Control which rows are expandable. Non-expandable rows show no chevron, no
    * context-menu action, and never render a panel. @default all rows expandable
@@ -345,13 +356,22 @@ const chevronOffsetStyles = stylex.create({
 // =============================================================================
 
 function ExpansionChevron({
+  rowLabel,
   isExpanded,
   onToggle,
 }: {
+  rowLabel?: string;
   isExpanded: boolean;
   onToggle: () => void;
 }) {
   const t = useComponentTranslator();
+  const ariaLabel = rowLabel
+    ? isExpanded
+      ? t('@astryx.tableRowExpansion.collapseRowNamed', {label: rowLabel})
+      : t('@astryx.tableRowExpansion.expandRowNamed', {label: rowLabel})
+    : isExpanded
+      ? t('@astryx.tableRowExpansion.collapseRow')
+      : t('@astryx.tableRowExpansion.expandRow');
   const ctx = useTableContext();
   return (
     <button
@@ -365,11 +385,7 @@ function ExpansionChevron({
         e.stopPropagation();
         onToggle();
       }}
-      aria-label={
-        isExpanded
-          ? t('@astryx.tableRowExpansion.collapseRow')
-          : t('@astryx.tableRowExpansion.expandRow')
-      }
+      aria-label={ariaLabel}
       aria-expanded={isExpanded}>
       <Icon
         icon="chevronRight"
@@ -439,6 +455,8 @@ function PanelDividerModeWatch({
   const {mode} = useTheme();
   const themeName = useThemeName();
   const lastRef = useRef({mode, themeName});
+  // Syncs the panel dividers with the computed theme CSS after a color mode or
+  // theme change.
   useLayoutEffect(() => {
     const last = lastRef.current;
     if (last.mode === mode && last.themeName === themeName) {
@@ -582,6 +600,7 @@ function ExpansionSnapshot({
  *       return next;
  *     }),
  *   getRowKey: item => item.id,
+ *   getRowLabel: item => item.name,
  *   renderExpanded: item => <OrderDetails order={item} />,
  * });
  * <Table data={data} columns={columns} idKey="id" plugins={{expansion}} />;
@@ -595,6 +614,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
     onToggle,
     getRowKey,
     renderExpanded,
+    getRowLabel,
     getIsItemExpandable,
     hasRowClickExpansion,
     panelVariant = 'transparent',
@@ -703,6 +723,8 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
       }
     }
   }, []);
+  // Syncs the chevron transitions with the `animatedLayout` handle. Without a
+  // handle, the chevrons use the theme's turn.
   useLayoutEffect(() => {
     if (animatedLayout == null) {
       resetChevrons();
@@ -837,15 +859,17 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
           return null;
         }
         const key = getRowKey(item);
+        const isExpanded = expandedKeys.has(key);
         return (
           <ExpansionChevron
-            isExpanded={expandedKeys.has(key)}
+            rowLabel={getRowLabel?.(item)?.trim() || undefined}
+            isExpanded={isExpanded}
             onToggle={() => onToggle(key)}
           />
         );
       },
     }),
-    [expandedKeys, onToggle, getRowKey, getIsItemExpandable, t],
+    [expandedKeys, onToggle, getRowKey, getIsItemExpandable, getRowLabel, t],
   );
 
   return useMemo(

package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx

@@ -432,6 +432,8 @@ function PinnedDividerModeWatch({
   const {mode} = useTheme();
   const themeName = useThemeName();
   const lastRef = useRef({mode, themeName});
+  // Syncs the pinned divider with the computed theme CSS after a color mode or
+  // theme change.
   useLayoutEffect(() => {
     const last = lastRef.current;
     if (last.mode !== mode || last.themeName !== themeName) {

package/src/Table/plugins/tree/useTableTreeData.tsx

@@ -87,6 +87,17 @@ export interface UseTableTreeDataConfig<T extends Record<string, unknown>> {
   getRowMeta: (item: T) => TableTreeRowMeta | undefined;
   /** Toggle a row's expansion. */
   onToggleItem: (item: T) => void;
+  /**
+   * Derive a human-readable row identity for the expander's accessible name.
+   * The plugin combines it with localized expand/collapse wording. Blank labels
+   * fall back to the generic row label.
+   *
+   * @example
+   * ```
+   * getRowLabel: item => item.name
+   * ```
+   */
+  getRowLabel?: (item: T) => string;
   /**
    * Whether any row in the dataset is expandable. When false the plugin is
    * a no-op: no expanders, no indent, no tree ARIA — flat data renders
@@ -164,38 +175,42 @@ function createTreeStore<T extends Record<string, unknown>>(
 const TreeStoreContext = createContext<TreeStore<any> | null>(null);
 TreeStoreContext.displayName = 'TreeStoreContext';
 
-/** Indent token -> index, for the numeric row snapshot. */
+/** Indent token -> index, for the primitive row snapshot. */
 const INDENT_INDEX = {sm: 0, md: 1, lg: 2} as const;
 
 /**
- * Encode a row's tree meta as a primitive for useSyncExternalStore —
- * object snapshots would tear. The indent token participates so a
- * runtime `indent` change re-renders the affected cells.
+ * Encode a row's tree meta and optional accessible label as a primitive for
+ * useSyncExternalStore — object snapshots would tear. The numeric fast path is
+ * retained when getRowLabel is absent. When it is present, the derived label
+ * participates so config-only label changes re-render the affected cells.
  * Encoding: level * 16 + indentIndex * 4 + hasChildren * 2 + isExpanded;
  * -1 = no meta.
  */
-function encodeRowMeta<T extends Record<string, unknown>>(
+function getRowSnapshot<T extends Record<string, unknown>>(
   config: UseTableTreeDataConfig<T>,
   item: T,
-): number {
+): number | string {
   const meta = config.getRowMeta(item);
   if (!meta) {
     return -1;
   }
-  return (
+  const metaSnapshot =
     meta.level * 16 +
     INDENT_INDEX[config.indent ?? 'md'] * 4 +
     (meta.hasChildren ? 2 : 0) +
-    (meta.isExpanded ? 1 : 0)
-  );
+    (meta.isExpanded ? 1 : 0);
+  if (!config.getRowLabel) {
+    return metaSnapshot;
+  }
+  return `${metaSnapshot}\u0000${config.getRowLabel(item)?.trim() ?? ''}`;
 }
 
-function useRowMetaSnapshot<T extends Record<string, unknown>>(
+function useRowSnapshot<T extends Record<string, unknown>>(
   store: TreeStore<T>,
   item: T,
-): number {
+): number | string {
   const getSnapshot = useCallback(
-    () => encodeRowMeta(store.getConfig(), item),
+    () => getRowSnapshot(store.getConfig(), item),
     [store, item],
   );
 
@@ -324,11 +339,22 @@ const treeStyles = stylex.create({
 function TreeExpander({
   isExpanded,
   onToggle,
+  rowLabel,
 }: {
   isExpanded: boolean;
   onToggle: () => void;
+  rowLabel?: string;
 }) {
   const t = useComponentTranslator();
+  const normalizedRowLabel = rowLabel?.trim();
+  const ariaLabel = normalizedRowLabel
+    ? isExpanded
+      ? t('@astryx.tableTree.collapseRowNamed', {label: normalizedRowLabel})
+      : t('@astryx.tableTree.expandRowNamed', {label: normalizedRowLabel})
+    : isExpanded
+      ? t('@astryx.tableTree.collapseRow')
+      : t('@astryx.tableTree.expandRow');
+
   return (
     <button
       type="button"
@@ -337,11 +363,7 @@ function TreeExpander({
         e.stopPropagation();
         onToggle();
       }}
-      aria-label={
-        isExpanded
-          ? t('@astryx.tableTree.collapseRow')
-          : t('@astryx.tableTree.expandRow')
-      }
+      aria-label={ariaLabel}
       aria-expanded={isExpanded}>
       <Icon
         icon="chevronRight"
@@ -440,9 +462,9 @@ function TreeCellContentInner<T extends Record<string, unknown>>({
   item: T;
   children: ReactNode;
 }) {
-  // Subscribe to this row's structural meta so a toggle re-renders only
-  // the affected cells.
-  useRowMetaSnapshot(store, item);
+  // Subscribe to this row's structural meta and derived label so only affected
+  // cells re-render when either changes.
+  useRowSnapshot(store, item);
 
   const config = store.getConfig();
   const meta = config.getRowMeta(item);
@@ -463,6 +485,7 @@ function TreeCellContentInner<T extends Record<string, unknown>>({
         <TreeExpander
           isExpanded={meta.isExpanded}
           onToggle={() => store.getConfig().onToggleItem(item)}
+          rowLabel={config.getRowLabel?.(item)}
         />
       ) : (
         <span {...stylex.props(treeStyles.leafSpacer)} />

package/src/Table/useTableRowExpansion.doc.mjs

@@ -28,6 +28,12 @@ export const docs = {
       description: 'Derive a stable unique key from a row item.',
       required: true,
     },
+    {
+      name: 'getRowLabel',
+      type: '(item: T) => string',
+      description:
+        'Derive a human-readable row identity for the chevron accessible name. Astryx combines it with localized expand/collapse wording. Omit it, or return blank text, to keep the generic "Expand row" and "Collapse row" labels.',
+    },
     {
       name: 'renderExpanded',
       type: '(item: T) => ReactNode',
@@ -75,6 +81,7 @@ const expansion = useTableRowExpansion({
       return next;
     }),
   getRowKey: item => item.id,
+  getRowLabel: item => item.name,
   renderExpanded: item => <OrderDetails order={item} />,
 });
 
@@ -122,6 +129,8 @@ export const docsDense = {
     expandedKeys: 'Set of currently-expanded row keys. Consumer-owned.',
     onToggle: 'Called with a row key when its expansion is toggled.',
     getRowKey: 'Derive a stable unique key from a row item.',
+    getRowLabel:
+      'Derive a row identity for the localized expand/collapse control label. Blank or omitted values keep the generic row label.',
     renderExpanded:
       'Render the full-width detail panel below an expanded row. Receives the row item.',
     getIsItemExpandable:

package/src/Table/useTableTreeData.doc.mjs

@@ -19,9 +19,15 @@ export const docs = {
     {
       name: 'onToggleItem',
       type: '(item: T) => void',
-      description: 'Toggle a row\'s expansion.',
+      description: "Toggle a row's expansion.",
       required: true,
     },
+    {
+      name: 'getRowLabel',
+      type: '(item: T) => string',
+      description:
+        'Derive a human-readable row identity for the expander. Astryx combines it with localized expand/collapse wording. Omit it, or return blank text, to keep the generic "Expand row" and "Collapse row" labels.',
+    },
     {
       name: 'hasExpandableRows',
       type: 'boolean',
@@ -81,7 +87,10 @@ export const docs = {
   idKey: 'id',
   defaultExpandedIds: ['src'],
 });
-const tree = useTableTreeData(treeConfig);
+const tree = useTableTreeData({
+  ...treeConfig,
+  getRowLabel: item => item.name,
+});
 
 <Table data={visibleData} columns={columns} idKey="id" plugins={{tree}} />;`,
     },
@@ -97,10 +106,13 @@ export const docsDense = {
     getRowMeta:
       'structural meta per visible row: {id, level (0-based), hasChildren, isExpanded}',
     onToggleItem: 'toggle row expansion',
+    getRowLabel:
+      'derive a row identity for the localized expand/collapse accessible name. Blank or omitted values keep the generic row label.',
     hasExpandableRows: 'false => plugin is a no-op (no expanders/indent/ARIA)',
     indent:
       "indent step per level: 'sm' | 'md' | 'lg' (spacing-3/4/6). Defaults to 'md'.",
-    treeColumnKey: 'column carrying indent + expander. Defaults to first column.',
+    treeColumnKey:
+      'column carrying indent + expander. Defaults to first column.',
     hasExpandAllControl:
       'show expand-all/collapse-all toggle in tree column header. Needs isAllExpanded + onExpandAll/onCollapseAll (from useTableTreeState). Defaults to false.',
     isAllExpanded:

package/src/TextArea/TextArea.tsx

@@ -45,6 +45,7 @@ import {
 } from '../Field';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {isRenderable} from '../utils/isRenderable';
+import {withholdCallerHandlers} from '../utils/disabledInteraction';
 import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
 import {mergeProps} from '../utils';
@@ -476,13 +477,7 @@ export function TextArea({
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   // A disabled field keeps its tab stop but, like a natively disabled one,
   // runs no caller event handler other than focus and blur (`spec:AST-085` FR2).
-  const fieldProps = isDisabled
-    ? Object.fromEntries(
-        Object.entries(rest).filter(
-          ([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key),
-        ),
-      )
-    : rest;
+  const fieldProps = withholdCallerHandlers(rest, isDisabled);
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
     // The container div is not naturally focusable; focusin bubbles up from

package/src/TextInput/TextInput.tsx

@@ -35,21 +35,23 @@ import {
   typographyVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
+import {Field} from '../Field/Field';
+import {InputClearButton} from '../Field/InputClearButton';
 import {
-  Field,
-  InputClearButton,
-  type InputStatus,
   inputWrapperStyles,
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
-} from '../Field';
-import {renderIconSlot, type IconType} from '../Icon';
+} from '../Field/inputStyles.stylex';
+import type {InputStatus} from '../Field/types';
+import {renderIconSlot, type IconType} from '../Icon/Icon';
 import {isRenderable} from '../utils/isRenderable';
-import {Spinner} from '../Spinner';
-import {useTooltip} from '../Tooltip';
-import {VisuallyHidden} from '../VisuallyHidden';
-import {getInputARIA, isImeKeyEvent} from '../utils';
+import {withholdCallerHandlers} from '../utils/disabledInteraction';
+import {Spinner} from '../Spinner/Spinner';
+import {useTooltip} from '../Tooltip/useTooltip';
+import {VisuallyHidden} from '../VisuallyHidden/VisuallyHidden';
+import {getInputARIA} from '../utils/inputAria';
+import {isImeKeyEvent} from '../utils/ime';
 import {
   textEntryTraitAttributes,
   type TextEntryTraitProps,
@@ -109,7 +111,7 @@ export type {
   InputStatus as TextInputStatus,
   InputStatusType as TextInputStatusType,
 } from '../Field';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputContainer} from '../hooks/useInputContainer';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
@@ -373,13 +375,7 @@ export function TextInput({
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   // A disabled field keeps its tab stop but, like a natively disabled one,
   // runs no caller event handler other than focus and blur (`spec:AST-085` FR2).
-  const fieldProps = isDisabled
-    ? Object.fromEntries(
-        Object.entries(rest).filter(
-          ([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key),
-        ),
-      )
-    : rest;
+  const fieldProps = withholdCallerHandlers(rest, isDisabled);
   const size = useSize(sizeProp, 'md');
 
   const generatedID = useId();

package/src/TimeInput/TimeInput.tsx

@@ -491,6 +491,8 @@ function TimeField({
   // region mounted together with its content is not reliably announced.
   // Ungrouped mode delegates to Field -> FieldStatus, which announces itself.
   const announce = useAnnounce();
+  // Syncs the live region with `status.message` when the field is in an
+  // InputGroup.
   useEffect(() => {
     if (inputGroup && status?.message) {
       announce(