@astryxdesign/core 0.4.0 → 0.4.1-canary.1ce0b4c

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', () => {

package/src/DateTimeInput/DateTimeInput.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file DateTimeInput.tsx
- * @input Uses React, Field, Calendar, usePopover, time parsing utilities
+ * @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities
  * @output Exports DateTimeInput component, DateTimeInputProps
  * @position Core implementation; consumed by index.ts, tested by DateTimeInput.test.tsx
  *
@@ -82,8 +82,10 @@ import {
 
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
+import {useAnnounce} from '../hooks/useAnnounce';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {useTranslator} from '../i18n';
 
 export type ISODateTimeString = string & {
@@ -118,11 +120,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',
@@ -450,6 +447,10 @@ export function DateTimeInput({
   ...rest
 }: DateTimeInputProps) {
   const t = useTranslator();
+  // Speaks arrow-key stepping results through the persistent live regions:
+  // stepping programmatically rewrites a plain textbox's value, which screen
+  // readers do not announce on their own (WCAG 4.1.2).
+  const announce = useAnnounce();
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateTimeInput.placeholder');
   const timePlaceholder =
@@ -855,11 +856,23 @@ export function DateTimeInput({
           const combined = combineDateTime(valueParts.date, newTime);
           if (combined) {
             fireChange(combined);
+            // Screen readers do not announce the programmatic value rewrite,
+            // so speak the new time explicitly (WCAG 4.1.2).
+            announce(formatDisplayTime(newTime, hasSeconds));
           }
         }
       }
     },
-    [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange],
+    [
+      valueParts,
+      hasSeconds,
+      timeIncrement,
+      timeMin,
+      timeMax,
+      fireChange,
+      announce,
+      formatDisplayTime,
+    ],
   );
 
   // --- Clear ---
@@ -941,6 +954,7 @@ export function DateTimeInput({
                 : t('@astryx.dateInput.openCalendar')
             }
             {...stylex.props(
+              focusOutlineStyles.focusVisible,
               styles.iconButton,
               isEffectivelyDisabled && styles.iconButtonDisabled,
             )}>
@@ -988,7 +1002,7 @@ export function DateTimeInput({
             rejected (WCAG 3.3.1).
           */}
           <VisuallyHidden as="div" role="alert" aria-live="assertive">
-            {!isDateInputValid ? 'Invalid date' : ''}
+            {!isDateInputValid ? t('@astryx.dateInput.invalidDate') : ''}
           </VisuallyHidden>
           {hasClear && value !== undefined && !isEffectivelyDisabled && (
             <InputClearButton
@@ -1061,7 +1075,7 @@ export function DateTimeInput({
             technology (WCAG 3.3.1).
           */}
           <VisuallyHidden as="div" role="alert" aria-live="assertive">
-            {!isTimeInputValid ? 'Invalid time' : ''}
+            {!isTimeInputValid ? t('@astryx.timeInput.invalidTime') : ''}
           </VisuallyHidden>
         </div>
       </div>

package/src/DropdownMenu/DropdownMenuRadioGroup.tsx

@@ -92,6 +92,7 @@ export function DropdownMenuRadioGroup({
   label,
   hasCloseOnSelect = true,
   children,
+  xstyle,
   className,
   style,
   ...rest
@@ -106,7 +107,7 @@ export function DropdownMenuRadioGroup({
       {...rest}
       role="group"
       aria-label={label}
-      {...mergeProps(stylex.props(styles.group), {className, style})}>
+      {...mergeProps(stylex.props(styles.group, xstyle), {className, style})}>
       <DropdownMenuRadioGroupContext value={contextValue}>
         {children}
       </DropdownMenuRadioGroupContext>