@astryxdesign/core 0.4.0 → 0.4.1-canary.0ad35c3

package/src/Chat/ChatMessageBubble.doc.mjs

@@ -45,6 +45,11 @@ export const docs = {
       type: "'first' | 'middle' | 'last'",
       description: 'Position within a multi-bubble group. Controls corner radius reduction on the sender side. Leave unset for standalone bubbles (full radius).',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description: 'Width of the bubble (number = pixels, string = used as-is). When set, replaces the default max(80%, 280px) width cap. Combine with variant="ghost" to let custom content (an artifact card, attachments) span the full message column.',
+    },
   ],
 };
 
@@ -59,6 +64,7 @@ export const docsZh = {
     name: '气泡上方渲染的发送者名称，与气泡文本内边距对齐。用于消息中的第一个气泡。',
     metadata: '气泡下方渲染的元数据内容，与气泡文本内边距对齐。用于消息中的最后一个气泡。',
     group: '多气泡组中的位置。控制发送者侧的圆角缩减。',
+    width: '气泡宽度（数字 = 像素，字符串 = 按原样使用）。设置后替代默认的 max(80%, 280px) 宽度上限；与 ghost 变体组合可让自定义内容占满消息列宽度。',
   },
 };
 
@@ -74,5 +80,6 @@ export const docsDense = {
     displayName: 'sender name above bubble, aligned w/ bubble padding',
     metadata: 'metadata below bubble, aligned w/ bubble padding',
     group: 'position in multi-bubble group; controls corner radius reduction',
+    width: 'bubble width (number=px, string=as-is); replaces default max(80%,280px) cap; ghost+width="100%" spans full message column',
   },
 };

package/src/Chat/ChatMessageBubble.test.tsx

@@ -7,6 +7,16 @@ import {ChatMessageBubble} from './ChatMessageBubble';
 import {ChatMessageList} from './ChatMessageList';
 import {ChatMessageMetadata} from './ChatMessageMetadata';
 
+/**
+ * Classes shared between two elements. StyleX emits one atomic class per
+ * style declaration, so two elements share a class exactly when they share
+ * a declaration — e.g. the same density paddingInline.
+ */
+function sharedClasses(a: Element, b: Element): string[] {
+  const bClasses = new Set(Array.from(b.classList));
+  return Array.from(a.classList).filter(c => bClasses.has(c));
+}
+
 describe('ChatMessageBubble', () => {
   it('renders children', () => {
     render(
@@ -29,9 +39,7 @@ describe('ChatMessageBubble', () => {
 
   it('defaults to assistant when no context', () => {
     render(
-      <ChatMessageBubble data-testid="bubble">
-        Standalone
-      </ChatMessageBubble>,
+      <ChatMessageBubble data-testid="bubble">Standalone</ChatMessageBubble>,
     );
     const el = screen.getByTestId('bubble');
     expect(el.className).toContain('assistant');
@@ -41,9 +49,7 @@ describe('ChatMessageBubble', () => {
     render(
       <ChatMessageList density="compact">
         <ChatMessage sender="assistant">
-          <ChatMessageBubble data-testid="bubble">
-            Compact
-          </ChatMessageBubble>
+          <ChatMessageBubble data-testid="bubble">Compact</ChatMessageBubble>
         </ChatMessage>
       </ChatMessageList>,
     );
@@ -59,6 +65,89 @@ describe('ChatMessageBubble', () => {
     );
     expect(screen.getByTestId('my-bubble')).toBeTruthy();
   });
+
+  it('ghost variant aligns custom content with the bubble text column (#2574)', () => {
+    // Repro from the issue: a raw child renders flush with the message
+    // edge — it carries none of the inset the bubble's name slot gets.
+    const {container} = render(
+      <ChatMessage sender="assistant">
+        <ChatMessageBubble name="Navi">Hello</ChatMessageBubble>
+        <div data-testid="raw">Artifact card</div>
+        <ChatMessageBubble variant="ghost" data-testid="ghost">
+          Artifact card
+        </ChatMessageBubble>
+      </ChatMessage>,
+    );
+    const nameSlot = container.querySelector('[data-chat-name]')!;
+    expect(nameSlot).toBeTruthy();
+
+    // Unwrapped custom content: no shared inset — the misalignment case.
+    expect(sharedClasses(screen.getByTestId('raw'), nameSlot)).toEqual([]);
+
+    // Ghost-wrapped content: shares the bubble slot's paddingInline
+    // declaration, so its text column matches the filled bubble exactly.
+    expect(
+      sharedClasses(screen.getByTestId('ghost'), nameSlot).length,
+    ).toBeGreaterThan(0);
+  });
+
+  it('ghost inset tracks message density', () => {
+    const renderAtDensity = (density: 'balanced' | 'spacious') => {
+      const {container} = render(
+        <ChatMessage sender="assistant" density={density}>
+          <ChatMessageBubble name="Navi">Hello</ChatMessageBubble>
+          <ChatMessageBubble variant="ghost" data-testid={`ghost-${density}`}>
+            Card
+          </ChatMessageBubble>
+        </ChatMessage>,
+      );
+      return sharedClasses(
+        screen.getByTestId(`ghost-${density}`),
+        container.querySelector('[data-chat-name]')!,
+      );
+    };
+
+    const balancedInset = renderAtDensity('balanced');
+    const spaciousInset = renderAtDensity('spacious');
+
+    // Both densities align with their own bubble's slot padding...
+    expect(balancedInset.length).toBeGreaterThan(0);
+    expect(spaciousInset.length).toBeGreaterThan(0);
+    // ...and spacious uses a wider inset than balanced.
+    expect(spaciousInset).not.toEqual(balancedInset);
+  });
+
+  it('width prop replaces the default width cap', () => {
+    render(
+      <ChatMessage sender="assistant">
+        <ChatMessageBubble data-testid="capped">Text</ChatMessageBubble>
+        <ChatMessageBubble variant="ghost" width="100%" data-testid="full">
+          Card
+        </ChatMessageBubble>
+      </ChatMessage>,
+    );
+    const capped = screen.getByTestId('capped');
+    const full = screen.getByTestId('full');
+
+    // Default bubbles keep the cap; a width bubble replaces it with none.
+    expect(getComputedStyle(capped).maxWidth).toMatch(/^max\(80%,\s*280px\)$/);
+    expect(getComputedStyle(full).maxWidth).toBe('none');
+    // The dynamic width value is set on the element (string passes through).
+    expect(full.getAttribute('style')).toContain('100%');
+  });
+
+  it('numeric width is treated as pixels', () => {
+    render(
+      <ChatMessage sender="assistant">
+        <ChatMessageBubble width={420} data-testid="fixed">
+          Artifact
+        </ChatMessageBubble>
+      </ChatMessage>,
+    );
+    expect(screen.getByTestId('fixed').getAttribute('style')).toContain(
+      '420px',
+    );
+  });
 });
 
 describe('ChatMessageMetadata', () => {

package/src/Chat/ChatMessageBubble.tsx

@@ -15,6 +15,9 @@
  * - If you use bubbles on one side (e.g. assistant), use them consistently
  *   for all messages on that side. Use `ghost` variant for content that
  *   needs alignment without a visual boundary.
+ * - For custom content (cards, attachments, citations) that should span
+ *   the full message column instead of the default width cap, combine
+ *   `ghost` with `width="100%"` (#2574).
  * - Put `name` on the first bubble in a message, `metadata` on the last.
  * - For unbubbled messages, use ChatMessage's `name` and `metadata`
  *   props instead.
@@ -36,6 +39,7 @@ import {
 } from '../theme/tokens.stylex';
 import {useChatMessageContext} from './ChatContext';
 import {mergeProps} from '../utils';
+import type {SizeValue} from '../utils/types';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
@@ -83,6 +87,15 @@ export interface ChatMessageBubbleProps extends BaseProps<HTMLDivElement> {
    * Leave unset for standalone bubbles (full radius).
    */
   group?: 'first' | 'middle' | 'last';
+
+  /**
+   * Width of the bubble.
+   * Numbers are treated as pixels, strings are used as-is (e.g. "100%").
+   * When set, replaces the default `max(80%, 280px)` width cap; leave unset
+   * to keep the cap. Combine with `variant="ghost"` to let custom content
+   * (an artifact card, attachments) span the full message column.
+   */
+  width?: SizeValue;
 }
 
 // =============================================================================
@@ -189,6 +202,16 @@ const styles = stylex.create({
   },
 });
 
+// Dynamic styles for sizing props
+const dynamicStyles = stylex.create({
+  sizing: (width: SizeValue) => ({
+    width,
+    // An explicit width replaces the default cap — a full-column or
+    // fixed-width bubble shouldn't also be clamped by max(80%, 280px).
+    maxWidth: 'none',
+  }),
+});
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -216,6 +239,7 @@ export function ChatMessageBubble({
   name,
   metadata,
   group,
+  width,
   xstyle,
   className,
   style: styleProp,
@@ -292,6 +316,7 @@ export function ChatMessageBubble({
             paddingStyle,
             variant === 'ghost' && styles.paddingBlockNone,
             groupStyle,
+            width != null && dynamicStyles.sizing(width),
             xstyle,
           ),
           className,

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -17,6 +17,7 @@ import {Theme} from '../theme/Theme';
 import {defineTheme} from '../theme/defineTheme';
 import {getForcedColorsRules} from '../__tests__/forcedColors';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {FOCUS_OUTLINE_PARTS} from '../utils/focusOutline.stylex';
 
 afterEach(() => {
   __resetLiveRegionsForTest();
@@ -686,7 +687,9 @@ describe('focus ring ownership (WCAG 2.4.7)', () => {
       <CheckboxInput label="Accept" value={false} onChange={() => {}} />,
     );
     focusInput(container);
-    expect(indicatorOf(container).style.outlineStyle).toBe('solid');
+    expect(indicatorOf(container).style.outlineStyle).toBe(
+      FOCUS_OUTLINE_PARTS.outlineStyle,
+    );
   });
 
   it('paints it on a replacement that forwards nothing', () => {
@@ -701,7 +704,7 @@ describe('focus ring ownership (WCAG 2.4.7)', () => {
     expect(replaced.className).toBe('');
     // ...and it still gets a ring, because the owner drew it.
     focusInput(container);
-    expect(replaced.style.outlineStyle).toBe('solid');
+    expect(replaced.style.outlineStyle).toBe(FOCUS_OUTLINE_PARTS.outlineStyle);
   });
 
   it('clears the ring on blur', () => {
@@ -709,7 +712,9 @@ describe('focus ring ownership (WCAG 2.4.7)', () => {
       <CheckboxInput label="Accept" value={false} onChange={() => {}} />,
     );
     const input = focusInput(container);
-    expect(indicatorOf(container).style.outlineStyle).toBe('solid');
+    expect(indicatorOf(container).style.outlineStyle).toBe(
+      FOCUS_OUTLINE_PARTS.outlineStyle,
+    );
     fireEvent.blur(input);
     expect(indicatorOf(container).style.outlineStyle).toBe('');
   });

package/src/Code/Code.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Code.tsx
  * @input Uses React, StyleX, theme tokens

package/src/CommandPalette/CommandPalette.test.tsx

@@ -9,6 +9,7 @@
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, waitFor, fireEvent, act} from '@testing-library/react';
+import {useState} from 'react';
 import {CommandPalette} from './CommandPalette';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
 import type {SearchSource, SearchableItem} from '@astryxdesign/core/Typeahead';
@@ -274,6 +275,59 @@ describe('CommandPalette', () => {
     );
   });
 
+  it('discards a search response that resolves after the palette closed', async () => {
+    // A source whose search resolves only when released, and no cancel()
+    // implementation — closing the palette must invalidate the request itself.
+    const resolvers: ((items: SearchableItem[]) => void)[] = [];
+    const source: SearchSource = {
+      bootstrap: () => [],
+      async search(): Promise<SearchableItem[]> {
+        return new Promise<SearchableItem[]>(resolve => {
+          resolvers.push(resolve);
+        });
+      },
+    };
+
+    function Harness() {
+      const [isOpen, setIsOpen] = useState(true);
+      return (
+        <CommandPalette
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          searchSource={source}
+        />
+      );
+    }
+    render(<Harness />);
+
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, {target: {value: 'a'}});
+    await waitFor(() => expect(resolvers).toHaveLength(1));
+
+    // Close while the search is still in flight.
+    const dialog = screen.getByRole('dialog');
+    const escapeEvent = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true,
+    });
+    dialog.dispatchEvent(escapeEvent);
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {hidden: true})).not.toHaveAttribute(
+        'open',
+      ),
+    );
+
+    // The stale response arrives after close — it must not re-commit the
+    // abandoned query/results into the closed palette.
+    await act(async () => {
+      resolvers[0]([{id: 'stale', label: 'Stale item'}]);
+    });
+
+    expect(screen.getByRole('combobox', {hidden: true})).toHaveValue('');
+    expect(screen.queryByText('Stale item')).not.toBeInTheDocument();
+  });
+
   it('does not move the highlight while typing in the search input', async () => {
     // The palette's input already filters; letting the shared combobox
     // typeahead also chase prefixes would drag the highlight — and Enter —

package/src/CommandPalette/CommandPalette.tsx

@@ -319,6 +319,11 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
   );
 
   const handleClose = useCallback(() => {
+    // Invalidate any in-flight search. Most sources don't implement cancel(),
+    // and a response that resolves after close would still pass runSearch's
+    // version check and re-commit the stale query/results into the closed
+    // palette (visible as a ghost query on reopen while bootstrap is pending).
+    searchVersionRef.current++;
     // Reset both committed and optimistic search on close
     setSearch('');
     setSearchResults([]);

package/src/ComplexSelector/ComplexSelector.test.tsx

@@ -177,7 +177,7 @@ describe('ComplexSelector', () => {
 });
 
 describe('ComplexSelector popup theme target', () => {
-  it('puts astryx-complex-selector-popup on the content box inside the layer', async () => {
+  it('puts astryx-complex-selector-popup on the surface that paints, not the content box', async () => {
     const user = userEvent.setup();
     render(
       <ComplexSelector label="Fruit blend" value="Apple" triggerLabel="Apple">
@@ -186,18 +186,27 @@ describe('ComplexSelector popup theme target', () => {
     );
     await user.click(screen.getByRole('button', {name: 'Fruit blend'}));
 
-    const layer = document.querySelector('[popover]') as HTMLElement;
     const popup = document.querySelector(
       '.astryx-complex-selector-popup',
     ) as HTMLElement;
     expect(popup).not.toBeNull();
-    // The layer is a bare positioning box; the target must be the content box
-    // it contains, which is what actually paints.
-    expect(popup).not.toBe(layer);
-    expect(layer.contains(popup)).toBe(true);
+
+    // The surface is the element usePopover renders: it carries the dialog
+    // role and the shared surface class, and the component's content box —
+    // the one with the padding and the scroll — sits INSIDE it. A target on
+    // that inner box cannot paint the popup's background or radius, which is
+    // what a theme reaches for this class to do.
+    expect(popup).toHaveAttribute('role', 'dialog');
+    expect(popup).toHaveClass('astryx-popover-surface');
+    expect(popup.querySelector('[id]')).not.toBeNull();
     expect(popup).toContainElement(
       screen.getByRole('button', {name: 'Done', ...h}),
     );
+
+    // And it is not the bare positioning layer either.
+    const layer = document.querySelector('[popover]') as HTMLElement;
+    expect(popup).not.toBe(layer);
+    expect(layer.contains(popup)).toBe(true);
   });
 
   it('keeps the target when the consumer also passes contentXstyle', async () => {

package/src/ComplexSelector/ComplexSelector.tsx

@@ -292,6 +292,11 @@ export function ComplexSelector<Value>({
     dialogLabel: label,
     hasCloseButton: false,
     hasAutoFocus: true,
+    // The popup's theme target belongs on the SURFACE — the element painting
+    // background, radius and elevation — which `usePopover` owns. Rendered on
+    // the content box below it, a theme's background or radius rule paints the
+    // wrong box.
+    surfaceTarget: 'complex-selector-popup',
     onHide: () => {
       document.getElementById(triggerId)?.focus();
     },
@@ -313,16 +318,7 @@ export function ComplexSelector<Value>({
   const triggerContent = triggerLabel ?? placeholder;
 
   const content = (
-    // The theme target sits here, not on the layer: the layer element is a
-    // bare positioning box (useLayer zeroes its borders, padding and
-    // background), so this content box is the surface a theme has to reach to
-    // paint the popup.
-    <div
-      id={contentId}
-      {...mergeProps(
-        themeProps('complex-selector-popup'),
-        stylex.props(styles.content, contentXstyle),
-      )}>
+    <div id={contentId} {...stylex.props(styles.content, contentXstyle)}>
       {children(optimisticValue, commitValue, popover.hide, {
         isOpen: popover.isOpen,
         isBusy,

package/src/DateInput/DateInput.test.tsx

@@ -25,6 +25,7 @@ import {InputGroup} from '../InputGroup';
 import {InputGroupText} from '../InputGroup/InputGroupText';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
+import {InternationalizationProvider} from '../i18n';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -170,6 +171,24 @@ describe('DateInput', () => {
     expect(screen.queryByText('Invalid date')).not.toBeInTheDocument();
   });
 
+  it('resolves the invalid-date announcement from the i18n catalog', () => {
+    const {container} = render(
+      <InternationalizationProvider
+        locale="en"
+        overrides={{en: {'@astryx.dateInput.invalidDate': 'Ungültiges Datum'}}}>
+        <DateInput label="Date" onChange={() => {}} />
+      </InternationalizationProvider>,
+    );
+
+    fireEvent.change(screen.getByRole('combobox'), {
+      target: {value: '13/45/2024'},
+    });
+
+    expect(within(container).getByRole('alert')).toHaveTextContent(
+      'Ungültiges Datum',
+    );
+  });
+
   it('reverts to previous value on blur when input is invalid', async () => {
     const onChange = vi.fn();
     render(<DateInput label="Date" value="2026-01-25" onChange={onChange} />);

package/src/DateInput/DateInput.tsx

@@ -80,11 +80,6 @@ const styles = stylex.create({
     backgroundColor: 'transparent',
     cursor: 'pointer',
     borderRadius: radiusVars['--radius-element'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: 1,
   },
   iconButtonDisabled: {
     cursor: 'not-allowed',
@@ -163,6 +158,7 @@ import {mergeProps, mergeRefs, isFocusDetached} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
 import {useTranslator} from '../i18n';
 
@@ -694,6 +690,7 @@ export function DateInput({
             : t('@astryx.dateInput.openCalendar')
         }
         {...stylex.props(
+          focusOutlineStyles.focusVisible,
           styles.iconButton,
           isEffectivelyDisabled && styles.iconButtonDisabled,
         )}>
@@ -754,7 +751,7 @@ export function DateInput({
           user would get no feedback that their entry was rejected (WCAG 3.3.1).
         */}
       <VisuallyHidden as="div" role="alert" aria-live="assertive">
-        {!isInputValid ? 'Invalid date' : ''}
+        {!isInputValid ? t('@astryx.dateInput.invalidDate') : ''}
       </VisuallyHidden>
       {hasClear && value !== undefined && !isEffectivelyDisabled && (
         <InputClearButton

package/src/DateRangeInput/DateRangeInput.tsx

@@ -61,6 +61,7 @@ import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
 import {useTranslator} from '../i18n';
 
@@ -118,11 +119,6 @@ const styles = stylex.create({
     backgroundColor: 'transparent',
     cursor: 'pointer',
     borderRadius: radiusVars['--radius-element'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: 1,
   },
   iconButtonDisabled: {
     cursor: 'not-allowed',
@@ -160,10 +156,6 @@ const styles = stylex.create({
     color: colorVars['--color-text-primary'],
     cursor: 'pointer',
     textAlign: 'start',
-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
   },
   presetButtonActive: {
     backgroundColor: colorVars['--color-accent-muted'],
@@ -592,6 +584,7 @@ export function DateRangeInput({
           }
           tabIndex={-1}
           {...stylex.props(
+            focusOutlineStyles.focusVisible,
             styles.iconButton,
             isEffectivelyDisabled && styles.iconButtonDisabled,
           )}>
@@ -661,6 +654,7 @@ export function DateRangeInput({
                     aria-current={isActive ? 'true' : undefined}
                     onClick={() => handlePresetClick(preset)}
                     {...stylex.props(
+                      focusOutlineStyles.focusVisible,
                       styles.presetButton,
                       isActive && styles.presetButtonActive,
                     )}>

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When DateTimeInput.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 {getButton, queryButton} from '../__tests__/fastRoleQueries';
@@ -17,6 +17,16 @@ import {DateTimeInput} from './DateTimeInput';
 import type {ISODateTimeString} from './DateTimeInput';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
+import {InternationalizationProvider} from '../i18n';
+import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+
+function politeRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="polite"]');
+}
+
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -626,6 +636,35 @@ describe('DateTimeInput', () => {
 
       expect(screen.getByText('Invalid time')).toBeInTheDocument();
     });
+
+    it('resolves the invalid date and time announcements from the i18n catalog', () => {
+      render(
+        <InternationalizationProvider
+          locale="en"
+          overrides={{
+            en: {
+              '@astryx.dateInput.invalidDate': 'Ungültiges Datum',
+              '@astryx.timeInput.invalidTime': 'Ungültige Zeit',
+            },
+          }}>
+          <DateTimeInput
+            label="Meeting"
+            value={'2026-03-15T10:00' as ISODateTimeString}
+            onChange={() => {}}
+          />
+        </InternationalizationProvider>,
+      );
+
+      fireEvent.change(screen.getByRole('combobox'), {
+        target: {value: '13/45/2024'},
+      });
+      expect(screen.getByText('Ungültiges Datum')).toBeInTheDocument();
+
+      fireEvent.change(screen.getByLabelText('Meeting time'), {
+        target: {value: '99:99 zz'},
+      });
+      expect(screen.getByText('Ungültige Zeit')).toBeInTheDocument();
+    });
   });
   describe('disabledMessage', () => {
     // jsdom does not implement the Popover API used by the tooltip, so mock
@@ -819,6 +858,45 @@ describe('DateTimeInput', () => {
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange.mock.calls[0][0]).toContain('14:31');
     });
+
+    // Arrow-key stepping mutates a plain textbox programmatically, and screen
+    // readers do not announce programmatic textbox changes — the new value
+    // must be announced through the polite live region (WCAG 4.1.2).
+    it('politely announces the new time after ArrowUp stepping', async () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByLabelText('Meeting time'), {
+        key: 'ArrowUp',
+      });
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('2:31 PM');
+      });
+    });
+
+    it('politely announces the new time after ArrowDown stepping', async () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByLabelText('Meeting time'), {
+        key: 'ArrowDown',
+      });
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('2:29 PM');
+      });
+    });
   });
 
   describe('weekStartsOn', () => {