@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/src/Thumbnail/Thumbnail.tsx

@@ -4,14 +4,18 @@
 
 /**
  * @file Thumbnail.tsx
- * @input Uses React, stylex, Button, Skeleton, Spinner, MediaTheme, useImageMode
+ * @input Uses React, stylex, Button, Skeleton, Spinner
  * @output Exports Thumbnail component, ThumbnailProps
  * @position Core implementation; consumed by index.ts
  *
  * Square preview card for image attachments. Shows a skeleton shimmer while
  * the image loads, the image on success, or a placeholder on failure.
- * Uses useImageMode (APCA) to detect image luminance so the overlaid
- * remove button always has sufficient contrast.
+ * The overlaid remove button sits on a fixed --color-overlay scrim with an
+ * --color-on-dark icon so it always has sufficient contrast against the image.
+ *
+ * Images without `alt` are explicitly decorative (alt="" +
+ * role="presentation" + aria-hidden, matching Avatar). A dev-time warning
+ * fires once when `src` is set with no `alt` and no other name source.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Thumbnail/Thumbnail.doc.mjs
@@ -26,7 +30,6 @@ import {
   colorVars,
   radiusVars,
   spacingVars,
-  shadowVars,
   durationVars,
   easeVars,
 } from '../theme/tokens.stylex';
@@ -35,15 +38,12 @@ import {Icon} from '../Icon';
 import {Skeleton} from '../Skeleton';
 import {Spinner} from '../Spinner';
 import {Tooltip} from '../Tooltip/Tooltip';
-import {MediaTheme} from '../theme/MediaTheme';
-import {useImageMode} from '../hooks/useImageMode';
+import {useDevWarning} from '../hooks/useDevWarning';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
-
-/** Sample the region behind the remove button (20px button, 4px inset, in 64px container). */
-const BUTTON_REGION = {x: 0.5, y: 0.06, width: 0.44, height: 0.44};
+import {thumbnailScope} from './thumbnail.markers.stylex';
 
 export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
@@ -54,7 +54,14 @@ export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
    */
   src?: string;
   /**
-   * Alt text for the image. Required for accessibility when `src` is provided.
+   * Alt text for the image.
+   *
+   * When omitted, the image is explicitly decorative (`alt=""` +
+   * `role="presentation"` + `aria-hidden`, matching Avatar) and hidden from
+   * assistive technology. Provide `alt` whenever the image conveys content;
+   * without it, screen reader users only hear the `label` (file name), or a
+   * generic "thumbnail" if `label` is also missing — which triggers a
+   * dev-time warning.
    */
   alt?: string;
   /**
@@ -90,6 +97,17 @@ export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
    * @default false
    */
   isDisabled?: boolean;
+  /**
+   * When the remove button is visible.
+   * - `'hover'` — the button is revealed on hover, and on keyboard focus so
+   *   it stays reachable. On any touch-capable device it stays visible.
+   *   This is the default.
+   * - `'always'` — the button is always shown.
+   *
+   * Only has an effect when `onRemove` is set.
+   * @default 'hover'
+   */
+  showRemoveOn?: 'always' | 'hover';
   /**
    * Test ID for testing frameworks.
    */
@@ -140,22 +158,6 @@ const styles = stylex.create({
   },
   interactive: {
     cursor: 'pointer',
-    transitionProperty: 'opacity, box-shadow',
-    transitionDuration: durationVars['--duration-fast'],
-    transitionTimingFunction: easeVars['--ease-standard'],
-    boxShadow: {
-      default: 'none',
-      ':hover': {
-        '@media (hover: hover)': shadowVars['--shadow-med'],
-      },
-    },
-    opacity: {
-      default: 1,
-      ':hover': {
-        '@media (hover: hover)': 0.85,
-      },
-      ':active': 0.75,
-    },
     outline: {
       default: null,
       ':has(:focus-visible)': `2px solid ${colorVars['--color-accent']}`,
@@ -165,6 +167,33 @@ const styles = stylex.create({
       ':has(:focus-visible)': '2px',
     },
   },
+  // Hover/pressed overlay — the exact same treatment as ClickableCard and
+  // SelectableCard. A transparent `::after` tints on hover/press instead of
+  // shifting shadow or opacity. Guarded by @media (hover: hover) so touch
+  // devices don't show a stuck hover state; active/pressed works everywhere.
+  overlay: {
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      borderRadius: 'inherit',
+      pointerEvents: 'none',
+      transitionProperty: 'background-color',
+      transitionDuration: durationVars['--duration-fast'],
+      transitionTimingFunction: easeVars['--ease-standard'],
+      backgroundColor: 'transparent',
+    },
+    ':active::after': {
+      backgroundColor: colorVars['--color-overlay-pressed'],
+    },
+  },
+  hoverOnPointer: {
+    '@media (hover: hover)': {
+      ':hover::after': {
+        backgroundColor: colorVars['--color-overlay-hover'],
+      },
+    },
+  },
   interactiveButton: {
     all: 'unset',
     cursor: 'pointer',
@@ -175,14 +204,22 @@ const styles = stylex.create({
     overflow: 'hidden',
   },
 
-  removeButtonOverrides: {
+  removeSlot: {
     position: 'absolute',
     top: spacingVars['--spacing-1'],
-    right: spacingVars['--spacing-1'],
+    insetInlineEnd: spacingVars['--spacing-1'],
     zIndex: 1,
+    lineHeight: 0,
+  },
+  removeButtonOverrides: {
     '--_button-radius': `calc(${radiusVars['--radius-element']} - ${spacingVars['--spacing-1']})`,
     height: 20,
     minWidth: 20,
+    // Fixed colors instead of luminance-adapting theme: a translucent scrim
+    // (--color-overlay) plus an --color-on-dark icon reads on any image
+    // without sampling pixel brightness.
+    backgroundColor: colorVars['--color-overlay'],
+    color: colorVars['--color-on-dark'],
   },
   disabled: {
     opacity: 0.5,
@@ -199,6 +236,28 @@ const styles = stylex.create({
     zIndex: 1,
     lineHeight: 0,
   },
+  // showRemoveOn="hover": the remove button is hidden at rest and revealed
+  // when the thumbnail is hovered or when focus enters it (keyboard). Only
+  // opacity is animated — the button stays mounted and focusable so tabbing
+  // to it triggers the :focus-within reveal. Any touch-capable device (incl.
+  // hybrid laptops that also report hover) keeps the button visible so the
+  // remove path is never gated behind an unavailable hover.
+  removeOnHover: {
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', thumbnailScope)]: {
+        '@media (hover: hover)': 1,
+      },
+      [stylex.when.ancestor(':focus-within', thumbnailScope)]: 1,
+      '@media (any-pointer: coarse)': 1,
+    },
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+  },
 });
 
 // =============================================================================
@@ -227,15 +286,18 @@ function ImagePlaceholder() {
  *
  * Shows a skeleton shimmer while the image loads, the image on success, or
  * a placeholder icon on failure / when no src is provided. An overlaid
- * remove button appears when `onRemove` is set.
+ * remove button appears when `onRemove` is set — revealed on hover or
+ * keyboard focus by default (`showRemoveOn`), or always shown.
  *
- * Uses `useImageMode` (APCA) to detect image luminance and `MediaTheme`
- * to ensure the remove button always has sufficient contrast against the image.
+ * The remove button uses a fixed `--color-overlay` scrim with an
+ * `--color-on-dark` icon so it stays legible on any image without sampling
+ * the image's luminance.
  *
  * @example
  * ```
  * <Thumbnail src="/photo.jpg" alt="Vacation photo" onRemove={() => {}} />
  * <Thumbnail src="/preview.png" alt="Preview" onClick={() => {}} label="preview.png" />
+ * <Thumbnail src="/logo.png" alt="Logo" onRemove={() => {}} showRemoveOn="always" />
  * ```
  */
 export function Thumbnail({
@@ -246,6 +308,7 @@ export function Thumbnail({
   onClick,
   isLoading = false,
   isDisabled = false,
+  showRemoveOn = 'hover',
   xstyle,
   className,
   style,
@@ -254,7 +317,6 @@ export function Thumbnail({
   ...props
 }: ThumbnailProps) {
   const t = useTranslator();
-  const imageMode = useImageMode(src, {region: BUTTON_REGION, fallback: null});
 
   const hasSrc = src != null;
   const showSkeleton = isLoading && !hasSrc;
@@ -262,13 +324,47 @@ export function Thumbnail({
   const showUploadOverlay = isLoading && hasSrc;
   const showPlaceholder = !isLoading && !hasSrc;
   const isInteractive = onClick != null && !isDisabled && !isLoading;
+  const hasRemove = onRemove != null && !isDisabled;
+  const isHoverReveal = hasRemove && showRemoveOn === 'hover';
   const accessibleName =
-    label && alt ? `${label} — ${alt}` : (label ?? alt ?? 'thumbnail');
+    label && alt
+      ? `${label} — ${alt}`
+      : (label ?? alt ?? t('@astryx.thumbnail.fallbackName'));
+
+  // Without `alt`, the image is explicitly decorative rather than silently
+  // empty-alt, matching Avatar's handling of unnamed images.
+  const isImageDecorative = !alt;
+
+  // Dev-time guardrail: `src` with no `alt` hides the image from assistive
+  // technology. That is fine when the thumbnail is otherwise named — `label`
+  // (or a consumer-provided aria name) becomes the group's accessible name —
+  // but with no name source at all the group falls back to a generic
+  // "thumbnail".
+  const hasNameSource =
+    alt != null ||
+    label != null ||
+    props['aria-label'] != null ||
+    props['aria-labelledby'] != null;
+  useDevWarning(
+    'Thumbnail',
+    '`src` is set without `alt` or `label`. The image is ' +
+      'treated as decorative and hidden from assistive technology, and ' +
+      'the thumbnail falls back to a generic "thumbnail" name. Pass ' +
+      '`alt` to describe the image content, or `label` (file name) to ' +
+      'name the thumbnail.',
+    hasSrc && !hasNameSource,
+  );
 
   const imageContent = (
     <>
       {showImage && (
-        <img src={src} alt={alt ?? ''} {...stylex.props(styles.image)} />
+        <img
+          src={src}
+          alt={alt ?? ''}
+          role={isImageDecorative ? 'presentation' : undefined}
+          aria-hidden={isImageDecorative || undefined}
+          {...stylex.props(styles.image)}
+        />
       )}
       {showSkeleton && <Skeleton radius={2} />}
       {showPlaceholder && (
@@ -279,8 +375,12 @@ export function Thumbnail({
     </>
   );
 
-  const removeButtonEl =
-    onRemove != null && !isDisabled ? (
+  const removeButtonEl = hasRemove ? (
+    <div
+      {...stylex.props(
+        styles.removeSlot,
+        isHoverReveal && styles.removeOnHover,
+      )}>
       <Button
         icon={<Icon icon="close" size="xsm" />}
         label={t('@astryx.thumbnail.remove', {accessibleName})}
@@ -293,7 +393,8 @@ export function Thumbnail({
         }}
         xstyle={styles.removeButtonOverrides}
       />
-    ) : null;
+    </div>
+  ) : null;
 
   const thumbnail = (
     <div
@@ -311,7 +412,10 @@ export function Thumbnail({
       <div
         {...stylex.props(
           styles.imageContainer,
+          isHoverReveal && thumbnailScope,
           isInteractive && styles.interactive,
+          isInteractive && styles.overlay,
+          isInteractive && styles.hoverOnPointer,
         )}>
         {isInteractive ? (
           <button
@@ -330,11 +434,7 @@ export function Thumbnail({
             <Spinner size="sm" shade="onMedia" />
           </div>
         )}
-        {removeButtonEl != null && imageMode != null ? (
-          <MediaTheme mode={imageMode}>{removeButtonEl}</MediaTheme>
-        ) : (
-          removeButtonEl
-        )}
+        {removeButtonEl}
       </div>
     </div>
   );

package/src/Thumbnail/thumbnail.markers.stylex.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Scoped marker for Thumbnail ancestor selectors. Applied to the image
+ * container so the remove button's hover/focus reveal (`showRemoveOn="hover"`)
+ * responds only to this thumbnail — not to hover/focus state from an outer
+ * container the thumbnail happens to sit inside.
+ */
+export const thumbnailScope: ReturnType<typeof stylex.defineMarker> =
+  stylex.defineMarker();

package/src/TimeInput/TimeInput.doc.mjs

@@ -229,12 +229,25 @@ export const docs = {
       description:
         'Status indicator that colors the border and displays an icon. When a message is provided it is rendered below the input.',
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached' | 'tooltip'",
+      description:
+        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing; tooltip hides the message box and surfaces it in a tooltip on the status icon.',
+      default: "'attached'",
+    },
     {
       name: 'labelTooltip',
       type: 'string',
       description:
         'Tooltip text rendered as an info icon at the end of the label row.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -372,6 +385,13 @@ export const docsZh = {
       description:
         '为边框着色并显示图标的状态指示器。当提供消息时，消息渲染在输入框下方。',
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached' | 'tooltip'",
+      description:
+        '状态消息相对于输入框的放置方式。attached 直接叠加在输入框下方（带边框处理）；detached 作为独立元素浮于下方并留有间距；tooltip 隐藏消息框，并在状态图标上以提示气泡形式显示。',
+      default: "'attached'",
+    },
     {
       name: 'labelTooltip',
       type: 'string',
@@ -545,6 +565,7 @@ export const docsDense = {
     placeholder: 'Placeholder when empty. Focused+empty shows format hint.',
     size: 'Input element height.',
     status: 'Colored border+icon. Message rendered below input.',
+    statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing; tooltip hides the box and shows it on the status icon.',
     labelTooltip: 'Tooltip as info icon at label row end.',
     xstyle:
       'StyleX styles for layout customization. Must be stylex.create() value, not inline style.',

package/src/TimeInput/TimeInput.test.tsx

@@ -9,12 +9,24 @@
  * SYNC: When TimeInput.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {TimeInput} from './TimeInput';
 import {InputGroup, InputGroupText} from '../InputGroup';
 import type {ISOTimeString} from '../utils';
+import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+
+function politeRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="polite"]');
+}
+function assertiveRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="assertive"]');
+}
+
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
 
 describe('TimeInput', () => {
   it('renders with label', () => {
@@ -352,6 +364,69 @@ describe('TimeInput', () => {
       // duplicated.
       expect(container.querySelectorAll('svg')).toHaveLength(1);
     });
+
+    // The grouped status node exists only for aria-describedby; announcing
+    // happens through the persistent useAnnounce regions because a live
+    // region mounted together with its content is not reliably announced.
+    it('keeps the grouped status node role-free while announcing via the persistent region', async () => {
+      render(
+        <InputGroup label="Schedule">
+          <InputGroupText>Starts</InputGroupText>
+          <TimeInput
+            label="Start time"
+            isLabelHidden
+            value={'09:00' as ISOTimeString}
+            onChange={() => {}}
+            status={{type: 'error', message: 'Start time is required'}}
+          />
+        </InputGroup>,
+      );
+
+      const input = screen.getByRole('textbox', {
+        name: 'Schedule Start time',
+      });
+      const describedByIDs =
+        input.getAttribute('aria-describedby')?.split(' ') ?? [];
+      const statusNode = describedByIDs
+        .map(id => document.getElementById(id))
+        .find(el => el?.textContent === 'Start time is required');
+      expect(statusNode).toBeTruthy();
+      expect(statusNode).not.toHaveAttribute('role');
+      expect(statusNode).not.toHaveAttribute('aria-live');
+
+      await waitFor(() => {
+        expect(assertiveRegion()).toHaveTextContent('Start time is required');
+      });
+    });
+
+    // Regression: a grouped status message appearing after mount (the common
+    // validation flow) must land in the persistent announce region.
+    it('announces a grouped status message that appears after mount', async () => {
+      const grouped = (status?: {
+        type: 'error' | 'warning';
+        message: string;
+      }) => (
+        <InputGroup label="Schedule">
+          <InputGroupText>Starts</InputGroupText>
+          <TimeInput
+            label="Start time"
+            isLabelHidden
+            value={'09:00' as ISOTimeString}
+            onChange={() => {}}
+            status={status}
+          />
+        </InputGroup>
+      );
+      const {rerender} = render(grouped());
+      expect(politeRegion()).toBeNull();
+
+      rerender(grouped({type: 'warning', message: 'Schedule is unusual'}));
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('Schedule is unusual');
+      });
+      // Non-error statuses stay on the polite channel.
+      expect(assertiveRegion()).toHaveTextContent('');
+    });
   });
 
   describe('disabledMessage', () => {
@@ -496,3 +571,26 @@ describe('TimeInput', () => {
     });
   });
 });
+
+
+describe('TimeInput statusVariant forwarding', () => {
+  it('defaults to attached (status renders with data-variant="attached")', () => {
+    const {container} = render(
+      <TimeInput label="Start" value={undefined} onChange={() => {}} status={{type: 'error', message: 'Required'}} />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'attached',
+    );
+  });
+
+  it('forwards statusVariant="detached" to the underlying Field status', () => {
+    const {container} = render(
+      <TimeInput label="Start" value={undefined} onChange={() => {}} status={{type: 'error', message: 'Required'}} statusVariant="detached" />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'detached',
+    );
+  });
+});

package/src/TimeInput/TimeInput.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file TimeInput.tsx
- * @input Uses React, useId, useState, useCallback, useRef, Field, Icon, InputGroupContext
+ * @input Uses React, useId, useState, useCallback, useRef, Field, Icon, InputGroupContext, useAnnounce
  * @output Exports TimeInput component, TimeInputProps
  * @position Core implementation; consumed by index.ts, tested by TimeInput.test.tsx
  *
@@ -20,6 +20,7 @@ import {
   useId,
   useState,
   useCallback,
+  useEffect,
   useRef,
   useMemo,
   useOptimistic,
@@ -28,7 +29,6 @@ import {
   type FocusEvent,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import type {IconName} from '../Icon';
 import {
   colorVars,
   sizeVars,
@@ -40,11 +40,11 @@ import {
 import {
   Field,
   type InputStatus,
-  type InputStatusType,
   inputWrapperStyles,
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
+  type FieldStatusVariant,
 } from '../Field';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
@@ -64,7 +64,9 @@ import {
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
+import {useAnnounce} from '../hooks/useAnnounce';
 import {useInputContainer} from '../hooks/useInputContainer';
+import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {useTooltip} from '../Tooltip';
@@ -296,6 +298,14 @@ export interface TimeInputProps extends Omit<
    * If message is provided, displays below the input.
    */
   status?: InputStatus;
+  /**
+   * How the status message is placed relative to the input.
+   * - '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
+   * @default 'attached'
+   */
+  statusVariant?: FieldStatusVariant;
 
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is
@@ -345,6 +355,7 @@ export function TimeInput({
   placeholder: placeholderFromProps,
   size: sizeProp,
   status,
+  statusVariant = 'attached',
   labelTooltip,
   width,
   xstyle,
@@ -369,6 +380,21 @@ export function TimeInput({
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
 
+  // In grouped mode the status message renders as a visually-hidden node that
+  // exists only for aria-describedby. Announce it through the persistent
+  // useAnnounce live regions instead of role/aria-live on that node — a live
+  // region mounted together with its content is not reliably announced.
+  // Ungrouped mode delegates to Field -> FieldStatus, which announces itself.
+  const announce = useAnnounce();
+  useEffect(() => {
+    if (inputGroup && status?.message) {
+      announce(
+        status.message,
+        status.type === 'error' ? 'assertive' : 'polite',
+      );
+    }
+  }, [announce, inputGroup, status?.message, status?.type]);
+
   // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
   // tooltip listeners attach to the input container (which already exists) and
   // the input stays perceivable via aria-disabled instead of the disabled
@@ -383,26 +409,21 @@ export function TimeInput({
   });
 
   // Status icon mapping
-  const statusIconMap: Record<InputStatusType, IconName> = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
-
-  const statusIconColorMap: Record<
-    InputStatusType,
-    'warning' | 'error' | 'success'
-  > = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
+  const {statusIcon, describedBy: statusTooltipDescribedBy} =
+    useInputStatusIcon({
+      status,
+      statusVariant,
+      isInGroup: !!inputGroup,
+    });
 
   const {ariaLabelledBy, ariaDescribedBy} = getInputARIA(
     inputLabelID,
     [
       description ? descriptionID : null,
-      status?.message ? statusMessageID : null,
+      statusVariant !== 'tooltip' && status?.message ? statusMessageID : null,
+      // The tooltip variant renders no message box; describe the input by the
+      // tooltip's content instead so the status is still announced.
+      statusTooltipDescribedBy,
       showsDisabledMessage ? disabledMessageTooltip.describedBy : null,
     ],
     inputGroup,
@@ -593,7 +614,7 @@ export function TimeInput({
           sizeStyles[size],
           isDisabled && inputWrapperStyles.disabled,
           status && inputStatusBorderStyles[status.type],
-          status && inputStatusHoverShadowStyles[status.type],
+          status && !isDisabled && inputStatusHoverShadowStyles[status.type],
           status && inputStatusFocusWithinStyles[status.type],
           inputGroup && groupStyles.inGroup,
           xstyle,
@@ -611,11 +632,7 @@ export function TimeInput({
         </VisuallyHidden>
       )}
       {inputGroup && status?.message && (
-        <VisuallyHidden
-          as="div"
-          id={statusMessageID}
-          role={status.type === 'error' ? 'alert' : 'status'}
-          aria-live={status.type === 'error' ? 'assertive' : 'polite'}>
+        <VisuallyHidden as="div" id={statusMessageID}>
           {status.message}
         </VisuallyHidden>
       )}
@@ -668,13 +685,7 @@ export function TimeInput({
           <Icon icon="close" size="sm" color="secondary" />
         </button>
       )}
-      {status && !inputGroup && (
-        <Icon
-          icon={statusIconMap[status.type]}
-          size="md"
-          color={statusIconColorMap[status.type]}
-        />
-      )}
+      {statusIcon}
     </div>
   );
 
@@ -707,6 +718,7 @@ export function TimeInput({
             }
           : undefined
       }
+      statusVariant={statusVariant}
       labelTooltip={labelTooltip}
       width={width}>
       {inputWrapper}