@astryxdesign/core 0.4.3 → 0.4.4-canary.2022d94

package/src/Chat/ChatComposerInput.tsx

@@ -43,7 +43,7 @@ import {
   typeScaleVars,
   typographyVars,
 } from '../theme/tokens.stylex';
-import {mergeProps} from '../utils';
+import {mergeProps, isImeKeyEvent} from '../utils';
 import {useTriggerMenu} from './useTriggerMenu';
 import {useChatComposerTokens, isCustomToken} from './useChatComposerTokens';
 import {ensureCaretInside, insertTextAtCursor} from './chatComposerSelection';
@@ -559,9 +559,8 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
 
       if (e.key === 'Enter' && !e.shiftKey) {
         // Never submit mid-composition — an IME uses Enter to commit a
-        // candidate (e.g. Japanese/Chinese/Korean input), and browsers may
-        // also surface the legacy keyCode 229 for composing keystrokes.
-        if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) {
+        // candidate. See utils/ime.ts for the full rationale.
+        if (isImeKeyEvent(e.nativeEvent)) {
           return;
         }
 

package/src/ComplexSelector/ComplexSelector.tsx

@@ -46,7 +46,7 @@ import {
   typographyVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
-import {mergeProps} from '../utils';
+import {isRenderable, mergeProps} from '../utils';
 import {composeEventHandlers} from '../utils/composeEventHandlers';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import type {SizeValue} from '../utils/types';
@@ -439,6 +439,11 @@ export function ComplexSelector<Value>({
 
   const triggerContent = triggerLabel ?? placeholder;
 
+  const startIconSlot = renderIconSlot(startIcon, {
+    size: 'sm',
+    color: 'secondary',
+  });
+
   const content = (
     <div id={contentId} {...stylex.props(styles.content, contentXstyle)}>
       {children(optimisticValue, commitValue, close, {
@@ -467,9 +472,12 @@ export function ComplexSelector<Value>({
             inputWrapperStyles.base,
             styles.triggerContainer,
             styles[size],
-            variant === 'input' && focusOutlineStyles.focusWithin,
+            // The ring belongs to the wrapper (the focusable `<button>` sits
+            // inside it), but it must still be a KEYBOARD ring: `:focus-within`
+            // matched a mouse click on the trigger and drew the outline for
+            // pointer users too. `focusWithin` here is `:has(:focus-visible)`.
+            focusOutlineStyles.focusWithin,
             variant === 'ghost' && styles.triggerGhost,
-            variant === 'ghost' && focusOutlineStyles.focusWithin,
             isDisabled && inputWrapperStyles.disabled,
             variant === 'ghost' && isDisabled && styles.triggerGhostDisabled,
             isDisabled && styles.disabled,
@@ -479,8 +487,7 @@ export function ComplexSelector<Value>({
           className,
           style,
         )}>
-        {startIcon &&
-          renderIconSlot(startIcon, {size: 'sm', color: 'secondary'})}
+        {isRenderable(startIconSlot) && startIconSlot}
         <button
           ref={triggerRef}
           id={triggerId}

package/src/ContextMenu/ContextMenu.tsx

@@ -63,7 +63,7 @@ import {
   easeVars,
   shadowVars,
 } from '../theme/tokens.stylex';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, isImeKeyEvent} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {StyleXStyles} from '../theme/types';
 import {themeProps} from '../utils/themeProps';
@@ -334,7 +334,9 @@ export function ContextMenu({
       if (e.key !== 'Escape') {
         return;
       }
-      if (e.isComposing || e.keyCode === 229) {
+      if (isImeKeyEvent(e)) {
+        // Ignore Escape that is committing/cancelling an IME composition;
+        // see utils/ime.ts for why.
         return;
       }
       e.preventDefault();

package/src/DateInput/DateInput.test.tsx

@@ -536,6 +536,27 @@ describe('DateInput', () => {
     expect(onChange).toHaveBeenCalledWith('2026-03-15');
   });
 
+  it('does not commit on a composing Enter (IME)', () => {
+    const onChange = vi.fn();
+    render(<DateInput label="Date" onChange={onChange} />);
+
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, {target: {value: '03/15/2026'}});
+    onChange.mockClear();
+
+    // The composing keydown (isComposing / legacy keyCode 229) that commits an
+    // IME candidate fires before compositionend; it must not be read as
+    // "commit the typed date".
+    fireEvent.keyDown(input, {key: 'Enter', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(input, {key: 'Enter', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing Enter still commits.
+    fireEvent.keyDown(input, {key: 'Enter'});
+    expect(onChange).toHaveBeenCalledWith('2026-03-15');
+  });
+
   // --- Arrow-down opens calendar popover ---
 
   // Note: Tests involving popover rendering (show/hide with calendar)

package/src/DateInput/DateInput.tsx

@@ -60,7 +60,7 @@ import {useCalendarConstraints} from '../Calendar/hooks';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {usePopover} from '../Popover';
 import {useTooltip} from '../Tooltip';
-import {getInputARIA, parseDateInput} from '../utils';
+import {getInputARIA, isImeKeyEvent, parseDateInput} from '../utils';
 import {
   plainDateFromISO,
   plainDateToISO,
@@ -627,6 +627,14 @@ export function DateInput({
   // Handle keyboard events on input
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // An in-progress IME composition uses Enter to commit the candidate and
+      // Escape to cancel it; that composing keydown fires before
+      // compositionend, so without this guard a Korean/Japanese/Chinese user
+      // committing a syllable with Enter would instead commit the pending date
+      // (or Escape would close the calendar mid-composition). See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'Escape' && popover.isOpen) {
         e.preventDefault();
         popover.hide();

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -204,6 +204,8 @@ export const docs = {
         className: 'astryx-date-time-input-time-segment',
         visualProps: ['size', 'status'],
       },
+      {className: 'astryx-date-time-input-toggle-icon', states: ['state']},
+      {className: 'astryx-date-time-input-clock-icon'},
     ],
   },
   usage: {
@@ -508,6 +510,8 @@ export const docsZh = {
         className: 'astryx-date-time-input-time-segment',
         visualProps: ['size', 'status'],
       },
+      {className: 'astryx-date-time-input-toggle-icon', states: ['state']},
+      {className: 'astryx-date-time-input-clock-icon'},
     ],
   },
 };

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -15,6 +15,7 @@ import userEvent from '@testing-library/user-event';
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateTimeInput} from './DateTimeInput';
 import type {ISODateTimeString} from './DateTimeInput';
+import {Icon} from '../Icon';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
 import {InternationalizationProvider} from '../i18n';
@@ -96,6 +97,48 @@ describe('DateTimeInput', () => {
     expect(screen.getByLabelText('Meeting time')).toBeInTheDocument();
   });
 
+  it('does not commit the date on a composing Enter (IME)', () => {
+    const onChange = vi.fn();
+    render(<DateTimeInput label="Meeting" onChange={onChange} />);
+    const dateInput = screen.getByRole('combobox');
+    fireEvent.change(dateInput, {target: {value: '03/15/2026'}});
+    onChange.mockClear();
+
+    // The composing keydown (isComposing / legacy keyCode 229) that commits an
+    // IME candidate must not be read as "commit the typed date".
+    fireEvent.keyDown(dateInput, {key: 'Enter', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(dateInput, {key: 'Enter', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing Enter still commits.
+    fireEvent.keyDown(dateInput, {key: 'Enter'});
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('does not step the time on a composing ArrowUp (IME)', () => {
+    const onChange = vi.fn();
+    render(
+      <DateTimeInput
+        label="Meeting"
+        value={'2026-03-15T14:30' as ISODateTimeString}
+        onChange={onChange}
+      />,
+    );
+    const timeInput = screen.getByLabelText('Meeting time');
+
+    // An IME candidate window navigates with the arrows; a composing ArrowUp
+    // must not step the time value.
+    fireEvent.keyDown(timeInput, {key: 'ArrowUp', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(timeInput, {key: 'ArrowUp', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing ArrowUp still steps the time by one minute.
+    fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
+    expect(onChange).toHaveBeenCalledWith('2026-03-15T14:31');
+  });
+
   it('displays formatted date in date input when value is provided', () => {
     render(
       <DateTimeInput
@@ -1063,6 +1106,100 @@ describe('DateTimeInput', () => {
       expect(css).toContain('block-size: var(--size-element-lg)');
       expect(css).toContain('padding-inline: var(--spacing-4)');
     });
+
+    it('renders the toggle-icon target on the calendar glyph with open/closed state', async () => {
+      const {container} = render(
+        <DateTimeInput label="Meeting" onChange={() => {}} />,
+      );
+      // The stable target lands on the icon element itself (not the button),
+      // so a theme can restyle just this glyph — mirroring
+      // `date-input-toggle-icon`.
+      const icon = container.querySelector(
+        '.astryx-date-time-input-toggle-icon',
+      );
+      expect(icon).not.toBeNull();
+      expect(icon).toHaveClass('astryx-icon');
+      expect(icon).toHaveAttribute('data-state', 'collapsed');
+
+      fireEvent.click(getButton('Open calendar'));
+      await waitFor(() => {
+        expect(
+          container.querySelector('.astryx-date-time-input-toggle-icon'),
+        ).toHaveAttribute('data-state', 'expanded');
+      });
+    });
+
+    it('renders the clock-icon target on the leading time glyph', () => {
+      const {container} = render(
+        <DateTimeInput label="Meeting" onChange={() => {}} />,
+      );
+      const icon = container.querySelector(
+        '.astryx-date-time-input-clock-icon',
+      );
+      expect(icon).not.toBeNull();
+      expect(icon).toHaveClass('astryx-icon');
+    });
+
+    it('leaves both leading glyphs byte-identical to a plain secondary/sm icon by default', () => {
+      // The targets are purely additive: the stable target class and its
+      // reflected state add nothing to the render until a theme targets them.
+      // Guard that by diffing each glyph's StyleX classes against a standalone
+      // secondary/sm icon, excluding only the additive target/state classes.
+      const {container} = render(
+        <DateTimeInput label="Meeting" onChange={() => {}} />,
+      );
+      const calendarIcon = container.querySelector(
+        '.astryx-date-time-input-toggle-icon',
+      ) as HTMLElement;
+      const clockIcon = container.querySelector(
+        '.astryx-date-time-input-clock-icon',
+      ) as HTMLElement;
+
+      const {container: refContainer} = render(
+        <Icon icon="calendar" size="sm" color="secondary" />,
+      );
+      const refIcon = refContainer.querySelector('.astryx-icon') as HTMLElement;
+
+      const themeTargetClasses = new Set([
+        'astryx-date-time-input-toggle-icon',
+        'astryx-date-time-input-clock-icon',
+        'collapsed',
+        'expanded',
+      ]);
+      const styleClasses = (el: HTMLElement) =>
+        el.className
+          .split(' ')
+          .filter(c => !themeTargetClasses.has(c))
+          .sort();
+
+      expect(styleClasses(calendarIcon)).toEqual(styleClasses(refIcon));
+      expect(styleClasses(clockIcon)).toEqual(styleClasses(refIcon));
+    });
+
+    it('exposes the icon targets so a theme reaches their size and per-state color', () => {
+      // jsdom cannot resolve the @layer cascade, so the generated CSS is what
+      // proves a same-element theme rule can reach these glyphs and win over
+      // the icon's own base size/color.
+      const theme = defineTheme({
+        name: 'date-time-input-icon-targets-test',
+        components: {
+          'date-time-input-toggle-icon': {
+            base: {width: '14px', height: '14px', fontSize: '14px'},
+            'state:expanded': {color: 'var(--color-icon-primary)'},
+          },
+          'date-time-input-clock-icon': {
+            base: {width: '14px', height: '14px', fontSize: '14px'},
+          },
+        },
+      });
+      const css = generateThemeTestCSS(theme);
+
+      expect(css).toContain('.astryx-date-time-input-toggle-icon {');
+      expect(css).toContain('.astryx-date-time-input-toggle-icon.expanded');
+      expect(css).toContain('.astryx-date-time-input-clock-icon {');
+      expect(css).toContain('width: 14px');
+      expect(css).toContain('color: var(--color-icon-primary)');
+    });
   });
 });
 

package/src/DateTimeInput/DateTimeInput.tsx

@@ -69,6 +69,7 @@ import {
   formatISOTime,
   isTimeInRange,
   adjustTime,
+  isImeKeyEvent,
   mergeProps,
   mergeRefs,
   isFocusDetached,
@@ -742,6 +743,13 @@ export function DateTimeInput({
 
   const handleDateKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // Guard the composing keydown (fires before compositionend): an IME uses
+      // Enter to commit the candidate and Escape to cancel it, so without this
+      // a CJK user committing a syllable with Enter would commit the pending
+      // date instead. See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'Escape' && popover.isOpen) {
         e.preventDefault();
         popover.hide();
@@ -835,6 +843,13 @@ export function DateTimeInput({
 
   const handleTimeKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
+      // ArrowUp/ArrowDown step the time and preventDefault; an IME candidate
+      // window uses those same arrows to navigate candidates, so guard the
+      // composing keydown (fires before compositionend) to avoid stealing them
+      // mid-composition. See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault();
 
@@ -960,7 +975,20 @@ export function DateTimeInput({
               styles.iconButton,
               isEffectivelyDisabled && styles.iconButtonDisabled,
             )}>
-            <Icon icon="calendar" size="sm" color="secondary" />
+            <Icon
+              icon="calendar"
+              size="sm"
+              color="secondary"
+              // Stable theme target on the calendar toggle glyph, so a theme
+              // can restyle just this icon (color, size, hover) — and each
+              // open/closed state — via `defineTheme`, mirroring
+              // `date-input-toggle-icon`. Same-element rules in
+              // @layer astryx-theme win over the icon's own base color/size,
+              // which a segment-level target could not reach.
+              {...themeProps('date-time-input-toggle-icon', {
+                state: popover.isOpen ? 'expanded' : 'collapsed',
+              })}
+            />
           </button>
           <input
             ref={mergeRefs(ref, dateInputRef)}
@@ -1039,7 +1067,16 @@ export function DateTimeInput({
             ),
           )}>
           <div {...stylex.props(styles.icon)}>
-            <Icon icon="clock" size="sm" color="secondary" />
+            <Icon
+              icon="clock"
+              size="sm"
+              color="secondary"
+              // Stable theme target on the leading clock glyph, so a theme can
+              // restyle just this icon (color, size) via `defineTheme`. The
+              // time segment has no toggle button — the clock is a static
+              // leading affordance — so this carries no interactive state.
+              {...themeProps('date-time-input-clock-icon')}
+            />
           </div>
           <input
             ref={timeInputRef}

package/src/Dialog/Dialog.tsx

@@ -27,7 +27,8 @@ import {
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {useScrollLock} from '../hooks/useScrollLock';
-import {hasActiveFocusTrapEscape, isImeKeyEvent} from '../hooks/useFocusTrap';
+import {hasActiveFocusTrapEscape} from '../hooks/useFocusTrap';
+import {isImeKeyEvent} from '../utils/ime';
 import {
   colorVars,
   radiusVars,

package/src/FileInput/FileInput.test.tsx

@@ -20,6 +20,12 @@ import {
 import userEvent from '@testing-library/user-event';
 import {FileInput} from './FileInput';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {InternationalizationProvider} from '../i18n';
+
+// The `=1` branch names the file; the `other` branch must not. Both come from
+// this test, so neither can pass against a hardcoded English string.
+const FILE_SELECTED = 'Un fichier choisi : {fileName}';
+const FILES_SELECTED = '{count, number} fichiers choisis';
 
 afterEach(() => {
   __resetLiveRegionsForTest();
@@ -324,23 +330,36 @@ describe('FileInput', () => {
 
   describe('announcements', () => {
     it('announces a single file selection politely', async () => {
-      render(<FileInput label="Upload" value={null} onChange={() => {}} />);
+      render(
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{fr: {'@astryx.fileInput.fileSelected': FILE_SELECTED}}}>
+          <FileInput label="Upload" value={null} onChange={() => {}} />
+        </InternationalizationProvider>,
+      );
       fireEvent.change(fileInputEl(), {
         target: {files: [createFile('report.pdf', 100)]},
       });
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('1 file selected: report.pdf');
+        // The single-file key, carrying the file name.
+        expect(politeRegion()?.textContent).toBe(
+          'Un fichier choisi : report.pdf',
+        );
       });
     });
 
     it('announces a multi-file count politely', async () => {
       render(
-        <FileInput
-          label="Upload"
-          value={null}
-          onChange={() => {}}
-          isMultiple
-        />,
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{fr: {'@astryx.fileInput.filesSelected': FILES_SELECTED}}}>
+          <FileInput
+            label="Upload"
+            value={null}
+            onChange={() => {}}
+            isMultiple
+          />
+        </InternationalizationProvider>,
       );
       const files = [
         createFile('a.txt', 100),
@@ -349,7 +368,32 @@ describe('FileInput', () => {
       ];
       fireEvent.change(fileInputEl(), {target: {files}});
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('3 files selected');
+        // The multi-file key: a count, and no file name.
+        expect(politeRegion()?.textContent).toBe('3 fichiers choisis');
+      });
+      expect(politeRegion()?.textContent).not.toContain('a.txt');
+    });
+
+    it('speaks the selection from a provider catalog', async () => {
+      render(
+        <InternationalizationProvider
+          locale="fr"
+          messages={{
+            fr: {
+              '@astryx.fileInput.fileSelected': {defaultMessage: FILE_SELECTED},
+            },
+          }}>
+          <FileInput label="Upload" value={null} onChange={() => {}} />
+        </InternationalizationProvider>,
+      );
+      fireEvent.change(fileInputEl(), {
+        target: {files: [createFile('report.pdf', 100)]},
+      });
+      await waitFor(() => {
+        // Same key through the catalog path rather than `overrides`.
+        expect(politeRegion()?.textContent).toBe(
+          'Un fichier choisi : report.pdf',
+        );
       });
     });
 

package/src/Lightbox/Lightbox.test.tsx

@@ -4,6 +4,7 @@ import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import {Lightbox} from './Lightbox';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {InternationalizationProvider} from '../i18n';
 
 // Mock showModal/close for jsdom
 beforeEach(() => {
@@ -27,6 +28,17 @@ function politeRegion(): HTMLElement | null {
   return document.querySelector('[data-astryx-live-region="polite"]');
 }
 
+// Both position messages, supplied by the test. Overriding the pair means an
+// assertion also proves which of the two keys the component reached for.
+const POSITION_MESSAGES = {
+  fr: {
+    '@astryx.lightbox.mediaPosition':
+      '{alt}, vue {index, number} sur {total, number}',
+    '@astryx.lightbox.imagePosition':
+      'Photo {index, number} sur {total, number}',
+  },
+};
+
 describe('Lightbox', () => {
   it('renders as a dialog element', () => {
     render(
@@ -320,47 +332,53 @@ describe('Lightbox', () => {
 
     it('announces the new image and position when navigating next via button', async () => {
       render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={0}
-        />,
+        <InternationalizationProvider locale="fr" overrides={POSITION_MESSAGES}>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={() => {}}
+            media={media}
+            defaultIndex={0}
+          />
+        </InternationalizationProvider>,
       );
       fireEvent.click(screen.getByLabelText('Next'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image B, 2 of 3');
+        expect(politeRegion()?.textContent).toBe('Image B, vue 2 sur 3');
       });
     });
 
     it('announces the new image and position when navigating via arrow keys', async () => {
       render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={1}
-        />,
+        <InternationalizationProvider locale="fr" overrides={POSITION_MESSAGES}>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={() => {}}
+            media={media}
+            defaultIndex={1}
+          />
+        </InternationalizationProvider>,
       );
       const dialog = document.querySelector('dialog')!;
       fireEvent.keyDown(dialog, {key: 'ArrowRight'});
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image C, 3 of 3');
+        expect(politeRegion()?.textContent).toBe('Image C, vue 3 sur 3');
       });
     });
 
     it('announces the new image and position when navigating prev', async () => {
       render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={2}
-        />,
+        <InternationalizationProvider locale="fr" overrides={POSITION_MESSAGES}>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={() => {}}
+            media={media}
+            defaultIndex={2}
+          />
+        </InternationalizationProvider>,
       );
       fireEvent.click(screen.getByLabelText('Previous'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image B, 2 of 3');
+        expect(politeRegion()?.textContent).toBe('Image B, vue 2 sur 3');
       });
     });
 
@@ -370,16 +388,19 @@ describe('Lightbox', () => {
         {src: '/b.jpg', alt: ''},
       ];
       render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={unlabeled}
-          defaultIndex={0}
-        />,
+        <InternationalizationProvider locale="fr" overrides={POSITION_MESSAGES}>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={() => {}}
+            media={unlabeled}
+            defaultIndex={0}
+          />
+        </InternationalizationProvider>,
       );
       fireEvent.click(screen.getByLabelText('Next'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image 2 of 2');
+        // imagePosition, not a mediaPosition with an empty {alt}.
+        expect(politeRegion()?.textContent).toBe('Photo 2 sur 2');
       });
     });
 

package/src/Lightbox/Lightbox.tsx

@@ -378,9 +378,13 @@ export function Lightbox({
       return;
     }
     const item = mediaArray[Math.min(index, mediaArray.length - 1)];
-    const position = `${index + 1} of ${mediaArray.length}`;
-    announce(item?.alt ? `${item.alt}, ${position}` : `Image ${position}`);
-  }, [index, isOpen, announce, mediaArray]);
+    const position = {index: index + 1, total: mediaArray.length};
+    announce(
+      item?.alt
+        ? t('@astryx.lightbox.mediaPosition', {alt: item.alt, ...position})
+        : t('@astryx.lightbox.imagePosition', position),
+    );
+  }, [index, isOpen, announce, mediaArray, t]);
 
   // Open/close dialog
   useIsomorphicLayoutEffect(() => {