@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/FileInput/FileInput.tsx

@@ -37,12 +37,7 @@ import {
   durationVars,
   easeVars,
 } from '../theme/tokens.stylex';
-import {
-  Field,
-  InputClearButton,
-  type InputStatus,
-  type FieldStatusVariant,
-} from '../Field';
+import {Field, InputClearButton, type InputStatus} from '../Field';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -68,7 +63,9 @@ import {useTranslator} from '../i18n';
 import type {TranslatorFn} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useListFormatter} from '../i18n/useListFormatter';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
+import type {FieldStatusPlacement} from '../Field/fieldStatusPlacement';
 function formatFileSize(bytes: number, t: TranslatorFn): string {
   if (bytes < 1024) {
     return t('@astryx.fileInput.fileSize.bytes', {size: bytes});
@@ -237,6 +234,10 @@ const styles = stylex.create({
       ':focus-within': colorVars['--color-accent'],
     },
   },
+  busy: {
+    cursor: 'default',
+    boxShadow: 'none',
+  },
   hiddenInput: {
     position: 'absolute',
     width: 1,
@@ -312,6 +313,9 @@ export interface FileInputProps extends Omit<
   FieldInputBaseProps,
   'onChange' | 'defaultValue' | 'value'
 > {
+  /**
+   * Ref to the native file input.
+   */
   ref?: React.Ref<HTMLInputElement>;
   /**
    * Accessible label for the file input.
@@ -400,9 +404,13 @@ export interface FileInputProps extends Omit<
    * - 'attached': message overlaps directly below the input (bordered treatment)
    * - 'detached': message floats below as a separate element with spacing
    * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
+   *
+   * Dropzone mode does not support 'attached': its tall surface cannot carry an
+   * overlapping message. Use 'detached' or 'tooltip' there. From the next minor
+   * release, a dropzone resolves 'attached' to 'detached' and defaults to it.
    * @default 'attached'
    */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusPlacement;
   /**
    * Description text displayed below the label.
    */
@@ -492,9 +500,14 @@ export function FileInput({
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [isDragOver, setIsDragOver] = useState(false);
   const [validationError, setValidationError] = useState<string | null>(null);
+  const formatList = useListFormatter();
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
+  const isSelectionDisabled = isDisabled || isBusy;
+  if (isDragOver && isSelectionDisabled) {
+    setIsDragOver(false);
+  }
   // A pick is one user action, already announced as "file selected"; a busy
   // period it starts (changeAction, or a caller setting isLoading from
   // onChange) adds no second message (spec:AST-086 FR6). The mark lasts until
@@ -562,6 +575,31 @@ export function FileInput({
       .filter(Boolean)
       .join(' ') || undefined;
 
+  // The native input keeps taking the caller's base props (the shared FR10
+  // contract), but it is `aria-hidden` and never focused, so a caller's
+  // `aria-*` props are also set on the trigger, the field's focusable control,
+  // where assistive tech reads them. The ones the trigger composes itself are
+  // not copied, and a caller's description is joined to its own, first.
+  const {
+    'aria-describedby': callerDescribedBy,
+    'aria-label': _callerLabel,
+    'aria-labelledby': _callerLabelledBy,
+    'aria-hidden': _callerHidden,
+    'aria-disabled': _callerDisabled,
+    'aria-busy': _callerBusy,
+    'aria-invalid': _callerInvalid,
+    ...otherRest
+  } = rest as typeof rest & Record<string, unknown>;
+  const triggerAriaProps: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(otherRest)) {
+    // Booleans and numbers are valid ARIA values too: React serializes them.
+    if (key.startsWith('aria-') && value != null) {
+      triggerAriaProps[key] = value;
+    }
+  }
+  const triggerDescribedBy =
+    [callerDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+
   const defaultPlaceholder = isMultiple
     ? t('@astryx.fileInput.placeholderMultiple')
     : t('@astryx.fileInput.placeholder');
@@ -569,7 +607,7 @@ export function FileInput({
 
   const handleFiles = useCallback(
     (fileList: File[]) => {
-      if (isDisabled) {
+      if (isSelectionDisabled) {
         return;
       }
 
@@ -583,7 +621,9 @@ export function FileInput({
       );
 
       if (errors.length > 0) {
-        setValidationError(errors[0]);
+        // Every rejected file is identified, in one status message
+        // (WCAG 3.3.1), joined as a list in the active locale.
+        setValidationError(formatList(errors));
       } else {
         setValidationError(null);
       }
@@ -618,7 +658,7 @@ export function FileInput({
     },
     [
       accept,
-      isDisabled,
+      isSelectionDisabled,
       isMultiple,
       maxFiles,
       maxSize,
@@ -628,6 +668,7 @@ export function FileInput({
       setOptimisticValue,
       announce,
       t,
+      formatList,
     ],
   );
 
@@ -673,22 +714,24 @@ export function FileInput({
   );
 
   const handleClick = useCallback(() => {
-    if (!isDisabled) {
+    if (!isSelectionDisabled) {
       inputRef.current?.click();
     }
-  }, [isDisabled]);
+  }, [isSelectionDisabled]);
 
   // Explicit keyboard activation so Enter/Space open the picker even where a
-  // synthetic keydown does not raise a native click. The isDisabled guard
-  // blocks activation while focusable-disabled.
+  // synthetic keydown does not raise a native click. Disabled and busy triggers
+  // also cancel the default activation while remaining focusable.
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      if ((e.key === 'Enter' || e.key === ' ') && !isDisabled) {
+      if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
-        inputRef.current?.click();
+        if (!isSelectionDisabled) {
+          inputRef.current?.click();
+        }
       }
     },
-    [isDisabled],
+    [isSelectionDisabled],
   );
 
   // Make the surface clickable without giving it an interactive role. Clicks on
@@ -698,29 +741,29 @@ export function FileInput({
     useClickableContainer({
       containerRef,
       onClick: handleClick,
-      disabled: isDisabled,
+      disabled: isSelectionDisabled,
     });
 
   const handleDragEnter = useCallback(
     (e: DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
-      if (!isDisabled && mode === 'dropzone') {
+      if (!isSelectionDisabled && mode === 'dropzone') {
         setIsDragOver(true);
       }
     },
-    [isDisabled, mode],
+    [isSelectionDisabled, mode],
   );
 
   const handleDragOver = useCallback(
     (e: DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
-      if (!isDisabled && mode === 'dropzone') {
+      if (!isSelectionDisabled && mode === 'dropzone') {
         setIsDragOver(true);
       }
     },
-    [isDisabled, mode],
+    [isSelectionDisabled, mode],
   );
 
   const handleDragLeave = useCallback((e: DragEvent) => {
@@ -743,7 +786,7 @@ export function FileInput({
       e.preventDefault();
       e.stopPropagation();
       setIsDragOver(false);
-      if (isDisabled || mode !== 'dropzone') {
+      if (isSelectionDisabled || mode !== 'dropzone') {
         return;
       }
       const fileList = Array.from(e.dataTransfer.files);
@@ -751,7 +794,7 @@ export function FileInput({
         handleFiles(fileList);
       }
     },
-    [isDisabled, mode, handleFiles],
+    [isSelectionDisabled, mode, handleFiles],
   );
 
   const hasFiles =
@@ -763,15 +806,30 @@ export function FileInput({
       : (optimisticValue?.name ?? '')
     : null;
 
+  // The tooltip placement renders no message box: its focusable status button
+  // is the only place the message lives, and the trigger's aria-describedby
+  // points at that button's tooltip. Every content branch that can show a
+  // status keeps it, so the message stays reachable in dropzone mode and while
+  // busy (family:input-fields FR8).
+  const tooltipStatus = statusTooltipDescribedBy != null ? statusIcon : null;
+
   const renderDropzoneContent = () => {
     if (isBusy) {
-      return <Spinner size="md" aria-hidden="true" />;
+      return (
+        <>
+          <Spinner size="md" aria-hidden="true" />
+          {tooltipStatus}
+        </>
+      );
     }
     if (hasFiles) {
       return (
-        <div {...stylex.props(styles.fileNameText, styles.fileNameDropzone)}>
-          {fileNames}
-        </div>
+        <>
+          <div {...stylex.props(styles.fileNameText, styles.fileNameDropzone)}>
+            {fileNames}
+          </div>
+          {tooltipStatus}
+        </>
       );
     }
     return (
@@ -785,6 +843,7 @@ export function FileInput({
         <span {...stylex.props(styles.placeholderText)}>
           {isDragOver ? t('@astryx.fileInput.dropHint') : displayPlaceholder}
         </span>
+        {tooltipStatus}
       </>
     );
   };
@@ -797,6 +856,7 @@ export function FileInput({
             {fileNames ?? displayPlaceholder}
           </span>
           <Spinner size="sm" aria-hidden="true" />
+          {tooltipStatus}
         </>
       );
     }
@@ -864,17 +924,21 @@ export function FileInput({
           // keyboard focus. Handlers are gated internally by isEnabled.
           disabledMessageTooltip.ref(el);
         }}
-        onClick={!isDisabled ? onContainerClick : undefined}
-        onMouseUp={!isDisabled ? onContainerMouseUp : undefined}
+        onClick={!isSelectionDisabled ? onContainerClick : undefined}
+        onMouseUp={!isSelectionDisabled ? onContainerMouseUp : undefined}
         {...dragDropProps}
         {...mergeProps(
           themeProps('file-input', {mode, status: status?.type ?? null}),
           stylex.props(
             isDropzone ? styles.dropzone : styles.compact,
-            isDropzone && !isDisabled && styles.dropzoneHover,
-            isDropzone && isDragOver && styles.dropzoneActive,
+            isDropzone && !isSelectionDisabled && styles.dropzoneHover,
+            isDropzone &&
+              !isSelectionDisabled &&
+              isDragOver &&
+              styles.dropzoneActive,
             isDropzone && isDisabled && styles.dropzoneDisabled,
             !isDropzone && isDisabled && styles.compactDisabled,
+            isBusy && styles.busy,
             status && statusBorderStyles[status.type],
             controlXstyle,
           ),
@@ -894,7 +958,7 @@ export function FileInput({
             type="button"
             // A disabled trigger keeps its Tab stop (spec:AST-085 FR1).
             tabIndex={0}
-            aria-disabled={isDisabled ? 'true' : undefined}
+            aria-disabled={isSelectionDisabled ? 'true' : undefined}
             onClick={handleClick}
             onKeyDown={handleKeyDown}
             // aria-label suppresses child content from the accessible name, so
@@ -907,8 +971,9 @@ export function FileInput({
                 : label
             }
             aria-busy={isBusy || undefined}
-            aria-describedby={ariaDescribedBy}
             aria-invalid={status?.type === 'error' ? 'true' : undefined}
+            {...triggerAriaProps}
+            aria-describedby={triggerDescribedBy}
           />
         </VisuallyHidden>
         <input
@@ -922,8 +987,10 @@ export function FileInput({
           // submitted and `required` does not block submission (FR3).
           form={isDisabled ? '' : undefined}
           // A label or description click activates this input directly; cancel
-          // it so a disabled input never opens the picker (FR2).
-          onClick={isDisabled ? event => event.preventDefault() : rest.onClick}
+          // it so a disabled or busy input never opens the picker (FR2).
+          onClick={
+            isSelectionDisabled ? event => event.preventDefault() : rest.onClick
+          }
           onChange={handleInputChange}
           // The visually-hidden native input is never focused (tabIndex={-1});
           // its describedby/required/invalid live on the trigger button.

package/src/HoverCard/HoverCard.doc.mjs

@@ -104,7 +104,7 @@ export const docs = {
           name: 'touchTrigger',
           type: "'auto' | 'tap' | 'none'",
           description:
-            'What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own (a button, link, or form control), whose tap belongs to the control. tap always opens. none never opens on touch. A tap-opened card is dismissed by a tap outside it.',
+            'What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own (a button, link, or form control), whose tap belongs to the control; an aria-disabled control performs none, so a tap on it opens its reason. tap always opens. none never opens on touch. A tap-opened card is dismissed by a tap outside it.',
           default: "'auto'",
         },
         {
@@ -289,7 +289,7 @@ export const docsZh = {
           name: 'touchTrigger',
           type: "'auto' | 'tap' | 'none'",
           description:
-            '在没有悬停的触摸设备上，轻点的行为。auto：轻点即打开，除非触发元素本身会执行操作（按钮、链接、表单控件），此时轻点归该控件所有。tap：始终轻点打开。none：触摸永不打开。轻点打开的卡片可通过点击卡片外部关闭。',
+            '在没有悬停的触摸设备上，轻点的行为。auto：轻点即打开，除非触发元素本身会执行操作（按钮、链接、表单控件），此时轻点归该控件所有；设置了 aria-disabled 的控件不执行操作，因此轻点它会显示其原因。tap：始终轻点打开。none：触摸永不打开。轻点打开的卡片可通过点击卡片外部关闭。',
           default: "'auto'",
         },
         {
@@ -439,7 +439,7 @@ export const docsDense = {
         hideDelay: 'Hide delay in ms.',
         focusTrigger: 'Controls when focus events trigger hover card.',
         touchTrigger:
-          'Tap behavior where there is no hover. auto = tap opens unless the trigger acts (button/link/control); tap = always opens; none = never on touch. Tap-opened cards close on a tap outside.',
+          'Tap behavior where there is no hover. auto = tap opens unless the trigger acts (button/link/control; an aria-disabled control does not act); tap = always opens; none = never on touch. Tap-opened cards close on a tap outside.',
         isEnabled: 'Enable/disable hover + focus triggers.',
         label:
           'Accessible name for the popup. With label: named role="dialog"; without: role="group".',

package/src/HoverCard/useHoverCard.doc.mjs

@@ -12,7 +12,7 @@ export const docs = {
     {name: 'delay', type: 'number', description: 'Delay before showing the hover card on hover, in milliseconds.', default: '300'},
     {name: 'hideDelay', type: 'number', description: 'Delay before hiding after mouse or focus leaves, in milliseconds.', default: '200'},
     {name: 'focusTrigger', type: "'auto' | 'always' | 'never'", description: 'When focus should open the hover card. auto only attaches focus listeners to naturally focusable elements.', default: "'auto'"},
-    {name: 'touchTrigger', type: "'auto' | 'tap' | 'none'", description: 'What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own; tap always opens; none never opens on touch.', default: "'auto'"},
+    {name: 'touchTrigger', type: "'auto' | 'tap' | 'none'", description: 'What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own (an aria-disabled control performs none); tap always opens; none never opens on touch.', default: "'auto'"},
     {name: 'isEnabled', type: 'boolean', description: 'Whether hover and focus triggers are enabled.', default: 'true'},
     {name: 'label', type: 'string', description: 'Accessible name for the hover card popup. When provided, the popup is exposed as a named role="dialog"; when omitted, it falls back to role="group" (a group may validly be unnamed).'},
     {name: 'isOpen', type: 'boolean', description: 'Controlled open state. true force-shows, false force-hides, undefined lets hover/focus manage visibility.'},

package/src/Item/Item.tsx

@@ -718,7 +718,7 @@ export function Item({
 
   // Inline rows are one line by definition, so the description always
   // ellipsizes there — a ReactNode description cannot wrap the row open.
-  const isInline = layout === 'inline' && description != null;
+  const isInline = layout === 'inline' && hasRenderableDescription;
 
   const descriptionTruncateStyle =
     descriptionLines != null
@@ -742,9 +742,9 @@ export function Item({
         )}>
         {label}
       </span>
-      {description != null && (
+      {hasRenderableDescription && (
         <span
-          id={hasRenderableDescription ? descriptionID : undefined}
+          id={descriptionID}
           {...stylex.props(
             styles.description,
             isInline && styles.inlineDescription,
@@ -772,7 +772,7 @@ export function Item({
 
   const content = (
     <>
-      {startContent != null && (
+      {isRenderable(startContent) && (
         <span
           {...stylex.props(
             styles.startContent,
@@ -830,7 +830,7 @@ export function Item({
         </span>
       )}
 
-      {endContent != null && (
+      {isRenderable(endContent) && (
         <span
           {...stylex.props(
             styles.endContent,

package/src/Item/ItemSwipeLayer.tsx

@@ -31,6 +31,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
+import {disabledInteractionProps} from '../utils/disabledInteraction';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {
@@ -307,13 +308,19 @@ export default function ItemSwipeLayer({
               <button
                 key={entry.id ?? entry.label}
                 type="button"
-                disabled={entry.isDisabled === true}
+                aria-disabled={entry.isDisabled === true ? true : undefined}
                 onClick={() =>
                   swipe.activateEntry(() => {
                     void entry.onActivate();
                     return entry.hasRemoval === true;
                   })
                 }
+                // A disabled entry stays focusable while the row rests open but
+                // is inert: it runs no `onActivate` and its click does not
+                // reach the row (spec:AST-085 FR1, FR2).
+                {...(entry.isDisabled === true
+                  ? disabledInteractionProps<HTMLButtonElement>()
+                  : null)}
                 {...mergeProps(
                   themeProps('item-swipe-action', {variant}),
                   focusOutlineProps.focusVisible(

package/src/Layer/useTouchTrigger.ts

@@ -5,11 +5,14 @@
 /**
  * @file useTouchTrigger.ts
  * @input Touch trigger mode, layer open state, trigger ref, show/hide callbacks
- * @output Exports useTouchTrigger hook, isActionTrigger, LayerTouchTrigger type
+ * @output Exports useTouchTrigger hook, isActionTrigger, LayerTouchTrigger type,
+ *   tapLandsOnDisabledControl, TOUCH_POINTER_TYPES and useTapStop (internal:
+ *   not re-exported from index)
  * @position Layer hook; shared touch behavior for useTooltip and useHoverCard
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Layer/index.ts
+ * - /packages/core/src/hooks/useClickableContainer.ts (innermostInteractive)
  *
  * Hover is the one trigger a touch screen cannot express. A tap synthesizes
  * `mouseenter`, so an untreated hover layer either opens on every tap and
@@ -23,7 +26,10 @@
  * action — an info icon, an abbreviation, a truncated label — has nothing to
  * lose, so the tap opens the layer and the next tap outside dismisses it. That
  * is `auto`; `tap` and `none` state the choice outright, which is what an
- * icon-button whose only job is to reveal the layer needs.
+ * icon-button whose only job is to reveal the layer needs. An `aria-disabled`
+ * control performs no action: a tap that lands in one, or on a label for a
+ * disabled control, opens the layer, so its reason has a touch path. (A
+ * natively `disabled` control receives no click at all.)
  *
  * A touch decides nothing until it is a tap. A finger landing on the trigger
  * may be starting a scroll, a pinch or a long press, and only the browser
@@ -37,12 +43,21 @@
  * which is when UIKit dismisses a popover.
  */
 
-import {useCallback, useEffect, useRef, type RefObject} from 'react';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+} from 'react';
 import {currentGesture} from './gestureCounter';
 import {
-  getInteractionModality,
-  useInteractionModalityTracking,
-} from '../utils/interactionModality';
+  innermostInteractive,
+  matchesInteractiveSelectors,
+} from '../hooks/useClickableContainer';
+import {isDisabledControl} from '../utils/pressDisabled';
+import {useInteractionModalityTrackingFor} from '../utils/interactionModality';
 
 /**
  * How a hover layer behaves on a touch pointer.
@@ -61,7 +76,31 @@ export type LayerTouchTrigger = 'auto' | 'tap' | 'none';
  * does, on a device where `(hover: hover)` matches — and only becomes a tap
  * once it lands. See `handlePointerEnter`.
  */
-const TOUCH_POINTER_TYPES = new Set(['touch', 'pen']);
+export const TOUCH_POINTER_TYPES = new Set(['touch', 'pen']);
+
+export function useTapStop(event: 'click'): {
+  onPointerDown: (event: ReactPointerEvent<Element>) => void;
+  onClick: (event: ReactMouseEvent<Element>) => void;
+};
+export function useTapStop(event: 'mousedown'): {
+  onPointerDown: (event: ReactPointerEvent<Element>) => void;
+  onMouseDown: (event: ReactMouseEvent<Element>) => void;
+};
+export function useTapStop(event: 'click' | 'mousedown') {
+  const pressIsTapRef = useRef(false);
+  const onPointerDown = (pointer: ReactPointerEvent<Element>) => {
+    pressIsTapRef.current = TOUCH_POINTER_TYPES.has(pointer.pointerType);
+  };
+  const cancel = (mouse: ReactMouseEvent<Element>) => {
+    if (pressIsTapRef.current) {
+      mouse.preventDefault();
+    }
+    pressIsTapRef.current = false;
+  };
+  return event === 'click'
+    ? {onPointerDown, onClick: cancel}
+    : {onPointerDown, onMouseDown: cancel};
+}
 
 /**
  * ARIA roles that make an element do something when activated. An explicit
@@ -99,15 +138,25 @@ const ACTION_ROLES = new Set([
  * with no role) gets both: the layer opens and the handler runs.
  */
 export function isActionTrigger(element: HTMLElement): boolean {
+  // A disabled control performs no action: its tap is free to open the layer
+  // that explains why it is disabled.
+  if (isDisabledControl(element)) {
+    return false;
+  }
   const role = element.getAttribute('role');
   if (role != null && role !== '') {
     return ACTION_ROLES.has(role);
   }
 
   switch (element.tagName) {
+    case 'LABEL': {
+      // A label acts by operating its control, so a label for a disabled one
+      // performs none.
+      const control = (element as HTMLLabelElement).control;
+      return control == null || !isDisabledControl(control);
+    }
     case 'BUTTON':
     case 'INPUT':
-    case 'LABEL':
     case 'SELECT':
     case 'SUMMARY':
     case 'TEXTAREA':
@@ -120,6 +169,41 @@ export function isActionTrigger(element: HTMLElement): boolean {
   }
 }
 
+/**
+ * Whether this element takes a tap itself, as a disabled control does: an
+ * `aria-disabled` (or `:disabled`) control, or a label for one.
+ */
+function isDisabledTarget(element: Element): boolean {
+  if (isDisabledControl(element)) {
+    return true;
+  }
+  if (element.tagName === 'LABEL') {
+    const control = (element as HTMLLabelElement).control;
+    return control != null && isDisabledControl(control);
+  }
+  return false;
+}
+
+/**
+ * Whether a tap landed in a disabled control: walking out from the tapped
+ * element on the clickable containers' own walk (`innermostInteractive`),
+ * with labels counted, the innermost interactive element is an
+ * `aria-disabled` control or a label for a disabled control. That element
+ * takes the tap: the layer opens with its reason, and nothing activates.
+ * Every other tap is left to the trigger (`isActionTrigger`).
+ */
+export function tapLandsOnDisabledControl(tapped: Element): boolean {
+  const innermost = innermostInteractive(
+    tapped,
+    null,
+    element =>
+      matchesInteractiveSelectors(element) ||
+      element.tagName === 'LABEL' ||
+      isDisabledControl(element),
+  );
+  return innermost != null && isDisabledTarget(innermost);
+}
+
 /**
  * Whether typing into this element edits it. Reads the attribute as well as
  * the property: jsdom does not implement `isContentEditable`, and an editor
@@ -252,7 +336,7 @@ export function useTouchTrigger(
   // waiting. The next press, a cancel, the tap itself or unmounting calls it.
   const forgetPendingTapRef = useRef<(() => void) | null>(null);
 
-  useInteractionModalityTracking();
+  const readModality = useInteractionModalityTrackingFor(triggerRef);
 
   const disarmOutsideDismiss = useCallback(() => {
     isTapOpenRef.current = false;
@@ -307,8 +391,8 @@ export function useTouchTrigger(
   useEffect(() => () => forgetPendingTapRef.current?.(), []);
 
   const isTouchInteraction = useCallback(
-    () => isTouchPointerRef.current && getInteractionModality() === 'pointer',
-    [],
+    () => isTouchPointerRef.current && readModality() === 'pointer',
+    [readModality],
   );
 
   const handlePointerEnter = useCallback((event: PointerEvent) => {
@@ -321,14 +405,19 @@ export function useTouchTrigger(
 
   // What a tap on the trigger does. It runs from the tap's `click`, after the
   // render that armed it, so it reads the latest props through this ref.
-  const answerTapRef = useRef<() => void>(() => {});
-  answerTapRef.current = () => {
+  const answerTapRef = useRef<(tapEvent: Event) => void>(() => {});
+  answerTapRef.current = (tapEvent: Event) => {
     const trigger = triggerRef.current;
+    // A tap that landed in a disabled control is that control's: its reason
+    // opens. Every other tap is the trigger's to decide.
+    const tapped = tapEvent.target instanceof Element ? tapEvent.target : null;
     const mode =
       touchTrigger === 'auto'
-        ? trigger != null && isActionTrigger(trigger)
-          ? 'none'
-          : 'tap'
+        ? tapped != null && tapLandsOnDisabledControl(tapped)
+          ? 'tap'
+          : trigger != null && isActionTrigger(trigger)
+            ? 'none'
+            : 'tap'
         : touchTrigger;
 
     if (mode === 'none' || !isEnabled) {
@@ -380,10 +469,10 @@ export function useTouchTrigger(
           forgetPendingTapRef.current = null;
         }
       };
-      const handleTap = () => {
+      const handleTap = (tapEvent: Event) => {
         forget();
         if (currentGesture() === gesture) {
-          answerTapRef.current();
+          answerTapRef.current(tapEvent);
         }
       };
       trigger.addEventListener('click', handleTap);