@astryxdesign/core 0.1.6 → 0.1.7-canary.04cd8f7

package/src/Calendar/Calendar.tsx

@@ -23,12 +23,13 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useRef,
 } from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
-import {useGridFocus} from '../hooks';
+import {useAnnounce, useGridFocus} from '../hooks';
 import {
   useCalendarDays,
   useCalendarConstraints,
@@ -56,7 +57,7 @@ import {
   DATE_FORMAT_WITH_WEEKDAY,
   DATE_FORMAT_MONTH_YEAR,
 } from '../utils/plainDate';
-import {mergeProps} from '../utils';
+import {mergeProps, composeEventHandlers} from '../utils';
 import {
   computeDayCellState,
   computeRangeRounding,
@@ -84,6 +85,7 @@ import type {
 } from '../utils/dateTypes';
 import {normalizeDayOfWeek} from '../utils/dateTypes';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 /** Imperative handle for Calendar handleRef */
 
@@ -197,6 +199,7 @@ export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
  * ```
  */
 export function Calendar({ref, ...props}: CalendarProps) {
+  const t = useTranslator();
   const {
     handleRef,
     mode = 'single',
@@ -216,6 +219,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
     xstyle,
     className,
     style,
+    onKeyDown,
     ...rest
   } = props;
 
@@ -308,6 +312,25 @@ export function Calendar({ref, ...props}: CalendarProps) {
       .join(' – ');
   }, [visibleMonths, numberOfMonths]);
 
+  // Announce the newly visible month to screen readers whenever it changes.
+  // The visible month label (`<span>`) carries no live semantics, so paging the
+  // grid — via the header prev/next buttons, keyboard grid paging (arrow keys
+  // across a month boundary, PageUp/PageDown), the `navigateTo` handle, or a
+  // controlled `focusDate` change — otherwise updates the grid silently. Keying
+  // off `monthYearLabel` reuses the existing single-/multi-month formatting and
+  // only fires when the visible month actually changes (so selecting a date,
+  // which does not move the grid, stays silent). The first-render guard avoids
+  // announcing the initial month on mount.
+  const announce = useAnnounce();
+  const isInitialRenderRef = useRef(true);
+  useEffect(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+      return;
+    }
+    announce(monthYearLabel);
+  }, [monthYearLabel, announce]);
+
   // Determine if prev/next navigation is possible based on min/max
   const canNavigatePrevious = useMemo(() => {
     if (!min) {
@@ -418,18 +441,18 @@ export function Calendar({ref, ...props}: CalendarProps) {
   return (
     <div
       ref={ref}
+      {...rest}
       {...mergeProps(
         themeProps('calendar', {mode}),
         stylex.props(calendarStyles.calendar, xstyle),
         className,
         style,
       )}
-      onKeyDown={handleCalendarKeyDown}
-      {...rest}>
+      onKeyDown={composeEventHandlers(onKeyDown, handleCalendarKeyDown)}>
       {/* Header with navigation */}
       <div {...stylex.props(calendarStyles.header)}>
         <Button
-          label="Previous month"
+          label={t('@astryx.calendar.previousMonth')}
           variant="ghost"
           icon={
             // Wrapper span (not Icon props): Icon's string mode clobbers
@@ -449,7 +472,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
         </span>
 
         <Button
-          label="Next month"
+          label={t('@astryx.calendar.nextMonth')}
           variant="ghost"
           icon={
             <span {...stylex.props(calendarStyles.navIcon)}>

package/src/Card/Card.doc.mjs

@@ -62,9 +62,9 @@ export const docs = {
     },
     {
       name: 'variant',
-      type: "'default' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'",
+      type: "'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'",
       description:
-        'Background color variant. `default` uses the standard card background. `muted` uses the muted background for de-emphasised cards. The non-semantic variants use the corresponding `--color-<name>-background` token.',
+        'Background color variant. `default` uses the standard card background. `transparent` drops the background entirely. `muted` uses the muted background for de-emphasised cards. The non-semantic variants use the corresponding `--color-background-<name>` token.',
       default: "'default'",
     },
   ],
@@ -169,6 +169,6 @@ export const docsDense = {
     minHeight: 'min card height',
     children: 'content inside card',
     padding: 'internal padding via spacing scale',
-    variant: 'background color variant; `default` = standard card bg, `muted` = muted bg for de-emphasised cards; non-semantic variants use the corresponding `--color-<name>-background` token',
+    variant: 'background color variant; `default` = standard card bg, `transparent` = no background at all, `muted` = muted bg for de-emphasised cards; non-semantic variants use the corresponding `--color-background-<name>` token',
   },
 };

package/src/Carousel/Carousel.tsx

@@ -34,6 +34,7 @@ import type {BaseProps} from '../BaseProps';
 import {mergeProps, mergeRefs} from '../utils';
 import type {SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export interface CarouselProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
@@ -256,13 +257,15 @@ export function Carousel({
   hasEdgeFade = true,
   hasSnap = false,
   padding,
-  'aria-label': ariaLabel = 'Carousel',
+  'aria-label': ariaLabelFromProps,
   xstyle,
   className,
   style,
   'data-testid': testId,
   ...htmlProps
 }: CarouselProps) {
+  const t = useTranslator();
+  const ariaLabel = ariaLabelFromProps ?? t('@astryx.carousel.label');
   const scrollElRef = useRef<HTMLElement | null>(null);
   const {scrollRef, overflowStart, overflowEnd} = useScrollOverflow();
 
@@ -330,16 +333,16 @@ export function Carousel({
     <div
       ref={mergeRefs(ref, layer.ref as React.Ref<HTMLDivElement>)}
       data-testid={testId}
-      role="region"
-      aria-label={ariaLabel}
-      aria-roledescription="carousel"
+      {...htmlProps}
       {...mergeProps(
         themeProps('carousel'),
         stylex.props(styles.root, xstyle),
         className,
         style,
       )}
-      {...htmlProps}>
+      role="region"
+      aria-label={ariaLabel}
+      aria-roledescription="carousel">
       <div
         ref={composedRef}
         tabIndex={0}
@@ -366,7 +369,7 @@ export function Carousel({
               )}>
               <Button
                 icon={<Icon icon="chevronLeft" size="xsm" />}
-                label="Scroll left"
+                label={t('@astryx.carousel.scrollLeft')}
                 variant="ghost"
                 size="sm"
                 isIconOnly
@@ -387,7 +390,7 @@ export function Carousel({
               )}>
               <Button
                 icon={<Icon icon="chevronRight" size="xsm" />}
-                label="Scroll right"
+                label={t('@astryx.carousel.scrollRight')}
                 variant="ghost"
                 size="sm"
                 isIconOnly

package/src/Chat/ChatComposer.tsx

@@ -49,6 +49,7 @@ import {ChatComposerInput} from './ChatComposerInput';
 import {ChatComposerContext} from './ChatContext';
 import {ChatSendButton} from './ChatSendButton';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -268,6 +269,7 @@ const styles = stylex.create({
  * ```
  */
 export function ChatComposer(props: ChatComposerProps) {
+  const t = useTranslator();
   const {
     ref,
     onSubmit,
@@ -275,7 +277,7 @@ export function ChatComposer(props: ChatComposerProps) {
     isStopShown = false,
     value: controlledValue,
     onChange,
-    placeholder = 'Type a message\u2026',
+    placeholder: placeholderFromProps,
     isDisabled = false,
     density = 'balanced',
     drawer,
@@ -292,6 +294,8 @@ export function ChatComposer(props: ChatComposerProps) {
     style,
     ...rest
   } = props;
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.chat.composer.placeholder');
 
   const [internalValue, setInternalValue] = useState('');
 

package/src/Chat/ChatComposerDrawer.tsx

@@ -30,6 +30,7 @@ import {Badge} from '../Badge';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export interface ChatComposerDrawerProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
@@ -220,7 +221,7 @@ export function ChatComposerDrawer({
   ref,
   children,
   count,
-  label = 'Items',
+  label: labelFromProps,
   isCollapsed: controlledCollapsed,
   defaultIsCollapsed = false,
   onCollapsedChange,
@@ -230,6 +231,8 @@ export function ChatComposerDrawer({
   'data-testid': testId,
   ...htmlProps
 }: ChatComposerDrawerProps): React.ReactElement {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.chat.composerDrawer.label');
   const [internalCollapsed, setInternalCollapsed] =
     useState(defaultIsCollapsed);
   const isControlled = controlledCollapsed !== undefined;
@@ -268,7 +271,11 @@ export function ChatComposerDrawer({
           role="button"
           tabIndex={0}
           aria-expanded={!isCollapsed}
-          aria-label={isCollapsed ? `Expand ${label}` : `Collapse ${label}`}
+          aria-label={
+            isCollapsed
+              ? t('@astryx.chatComposerDrawer.expand', {label})
+              : t('@astryx.chatComposerDrawer.collapse', {label})
+          }
           onClick={toggle}
           onKeyDown={e => {
             if (e.key === 'Enter' || e.key === ' ') {

package/src/Chat/ChatComposerInput.tsx

@@ -53,6 +53,7 @@ import {
 import {Badge, type BadgeProps} from '../Badge';
 import {useChatComposerContext} from './ChatContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -96,8 +97,7 @@ export type ChatComposerTokenCustom = {
  *   Use for tooltips, hovercards, or any content beyond a badge.
  */
 export type ChatComposerToken =
-  | ChatComposerTokenBadge
-  | ChatComposerTokenCustom;
+  ChatComposerTokenBadge | ChatComposerTokenCustom;
 
 export type ChatComposerTriggerItem = SearchableItem;
 
@@ -279,6 +279,7 @@ function serialize(node: Node): string {
 // =============================================================================
 
 export function ChatComposerInput(props: ChatComposerInputProps) {
+  const t = useTranslator();
   const composerCtx = useChatComposerContext();
   const hasControlledValueProp = props.value !== undefined;
 
@@ -287,12 +288,12 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     handleRef,
     value: controlledValue = composerCtx?.value,
     onChange: onChangeProp,
-    placeholder = composerCtx?.placeholder ?? 'Type a message\u2026',
+    placeholder: placeholderFromProps,
     maxRows = 8,
     triggers,
     debounceMs = 150,
     hasHistory = true,
-    label = 'Message input',
+    label: labelFromProps,
     isDisabled = composerCtx?.isDisabled ?? false,
     onPaste: onPasteProp,
     pasteAsToken: pasteAsTokenProp,
@@ -303,6 +304,11 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     style,
     ...rest
   } = props;
+  const label = labelFromProps ?? t('@astryx.chat.composerInput.label');
+  const placeholder =
+    placeholderFromProps ??
+    composerCtx?.placeholder ??
+    t('@astryx.chat.composer.placeholder');
 
   const composerOnChange = composerCtx?.onChange;
   const onChange = useCallback(

package/src/Chat/ChatLayout.test.tsx

@@ -1,8 +1,11 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {act, render, screen} from '@testing-library/react';
 import {ChatLayout} from './ChatLayout';
+import {ChatMessageList} from './ChatMessageList';
+import {ChatMessage} from './ChatMessage';
+import {ChatMessageBubble} from './ChatMessageBubble';
 
 describe('ChatLayout', () => {
   it('renders children in the message area', () => {
@@ -99,3 +102,125 @@ describe('ChatLayout', () => {
     expect(screen.queryByRole('button')).toBeNull();
   });
 });
+
+// ---------------------------------------------------------------------------
+// First-fill scroll positioning
+//
+// jsdom has no layout, so geometry is stubbed and only the synchronous
+// paths are asserted (see useChatStreamScroll.test.tsx for the rationale).
+// The ResizeObserver stub mirrors useChatNewMessages.test.tsx.
+// ---------------------------------------------------------------------------
+
+type ObserverEntry = {element: Element; callback: ResizeObserverCallback};
+let activeObservations: ObserverEntry[] = [];
+
+class FakeResizeObserver {
+  callback: ResizeObserverCallback;
+  observed = new Set<Element>();
+
+  constructor(cb: ResizeObserverCallback) {
+    this.callback = cb;
+  }
+
+  observe(el: Element) {
+    this.observed.add(el);
+    activeObservations.push({element: el, callback: this.callback});
+    this.callback([{target: el} as ResizeObserverEntry], this);
+  }
+
+  unobserve(el: Element) {
+    this.observed.delete(el);
+    activeObservations = activeObservations.filter(o => o.element !== el);
+  }
+
+  disconnect() {
+    for (const el of this.observed) {
+      activeObservations = activeObservations.filter(o => o.element !== el);
+    }
+    this.observed.clear();
+  }
+}
+
+describe('ChatLayout — first-fill scroll positioning', () => {
+  let rafQueue: FrameRequestCallback[] = [];
+
+  beforeEach(() => {
+    activeObservations = [];
+    rafQueue = [];
+    vi.stubGlobal('ResizeObserver', FakeResizeObserver);
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      rafQueue.push(cb);
+      return rafQueue.length;
+    });
+    vi.stubGlobal('cancelAnimationFrame', () => {});
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  function setGeometry(el: HTMLElement, scrollHeight: number) {
+    Object.defineProperty(el, 'scrollHeight', {
+      value: scrollHeight,
+      configurable: true,
+    });
+    Object.defineProperty(el, 'clientHeight', {value: 400, configurable: true});
+    Object.defineProperty(el, 'offsetHeight', {
+      value: 400,
+      configurable: true,
+    });
+  }
+
+  function fireContentResize() {
+    act(() => {
+      for (const {element, callback} of [...activeObservations]) {
+        callback([{target: element} as ResizeObserverEntry], null!);
+      }
+    });
+  }
+
+  function renderLayout() {
+    render(
+      <ChatLayout composer={<div>composer</div>} data-testid="layout">
+        <ChatMessageList>
+          <ChatMessage sender="assistant">
+            <ChatMessageBubble>Hello</ChatMessageBubble>
+          </ChatMessage>
+        </ChatMessageList>
+      </ChatLayout>,
+    );
+    return screen.getByTestId('layout');
+  }
+
+  it('positions async-loaded content synchronously on the first fill', () => {
+    const root = renderLayout();
+    // Mounted while content is short (loading) — not scrollable.
+    setGeometry(root, 400);
+    act(() => rafQueue.splice(0).forEach(cb => cb(0)));
+    expect(root.scrollTop).toBe(0);
+
+    // Content lands: the message list's ResizeObserver fires.
+    setGeometry(root, 1400);
+    fireContentResize();
+    // Positioned in the same synchronous step — no animation frames.
+    expect(root.scrollTop).toBe(1000);
+  });
+
+  it('springs on growth after the first fill — animation owns it', () => {
+    const root = renderLayout();
+    setGeometry(root, 400);
+    act(() => rafQueue.splice(0).forEach(cb => cb(0)));
+
+    // First fill: instant.
+    setGeometry(root, 1400);
+    fireContentResize();
+    expect(root.scrollTop).toBe(1000);
+
+    // Streaming growth: nothing moves until animation frames run.
+    rafQueue.length = 0;
+    setGeometry(root, 1800);
+    fireContentResize();
+    expect(root.scrollTop).toBe(1000);
+    expect(rafQueue.length).toBeGreaterThan(0);
+  });
+});

package/src/Chat/ChatLayout.tsx

@@ -32,6 +32,7 @@ import {useChatNewMessages} from './useChatNewMessages';
 import {ChatLayoutScrollButton} from './ChatLayoutScrollButton';
 import {ChatLayoutContext} from './ChatContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -39,17 +40,6 @@ import {themeProps} from '../utils/themeProps';
 
 type Density = 'compact' | 'balanced' | 'spacious';
 
-/** Imperative handle for ChatLayout scroll controls. */
-export interface ChatLayoutHandle {
-  /** Scroll a message to the top and unlock for stream-in. */
-  /** Scroll to bottom and re-lock. */
-  scrollToBottom: () => void;
-  /** Navigate to a message, no lock change. */
-  scrollToMessage: (el: HTMLElement) => void;
-  /** Scroll to the last message. */
-  scrollToLastMessage: () => void;
-}
-
 export interface ChatLayoutProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element. */
   ref?: React.Ref<HTMLDivElement>;
@@ -268,7 +258,9 @@ export function ChatLayout({
   style,
   'data-testid': testId,
   ref,
+  ...rest
 }: ChatLayoutProps) {
+  const t = useTranslator();
   const rootRef = useRef<HTMLDivElement>(null);
 
   const scrollContainerRef = externalScrollRef ?? rootRef;
@@ -284,7 +276,7 @@ export function ChatLayout({
   const defaultScrollButton = (
     <ChatLayoutScrollButton
       isVisible={scroll.isScrolledUp || newMsgs.hasNewMessages}
-      label={newMsgs.hasNewMessages ? 'New messages' : undefined}
+      label={newMsgs.hasNewMessages ? t('@astryx.chatLayout.newMessages') : undefined}
       onClick={() => {
         newMsgs.dismiss();
         scroll.scrollToBottom();
@@ -327,6 +319,7 @@ export function ChatLayout({
   return (
     <ChatLayoutContext value={layoutContext}>
       <div
+        {...rest}
         ref={mergeRefs(ref, rootRef)}
         data-testid={testId}
         {...mergeProps(

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -30,6 +30,7 @@ import {Icon} from '../Icon';
 import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -120,6 +121,7 @@ export function ChatLayoutScrollButton({
   style,
   ...rest
 }: ChatLayoutScrollButtonProps) {
+  const t = useTranslator();
   return (
     <div
       ref={ref}
@@ -132,8 +134,8 @@ export function ChatLayoutScrollButton({
           label ? styles.expanded : styles.collapsed,
         )}>
         <Button
-          label={label ?? 'Scroll to bottom'}
-          aria-label={label ?? 'Scroll to bottom'}
+          label={label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')}
+          aria-label={label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')}
           icon={<Icon icon="chevronDown" size="md" />}
           variant="ghost"
           size="md"

package/src/Chat/ChatMessage.tsx

@@ -36,6 +36,7 @@ import {
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export interface ChatMessageProps extends BaseProps<HTMLElement> {
   ref?: React.Ref<HTMLElement>;
@@ -167,7 +168,9 @@ export function ChatMessage({
   style: styleProp,
   'data-testid': testId,
   ref,
+  ...rest
 }: ChatMessageProps) {
+  const t = useTranslator();
   const listContext = useChatListContext();
   const density = densityProp ?? listContext?.density ?? 'balanced';
 
@@ -216,9 +219,10 @@ export function ChatMessage({
   return (
     <ChatMessageContext value={contextValue}>
       <article
+        {...rest}
         ref={ref}
         data-testid={testId}
-        aria-label={!hasName ? `Message from ${sender}` : undefined}
+        aria-label={!hasName ? t('@astryx.chatMessage.messageFrom', {sender}) : undefined}
         aria-labelledby={hasName ? nameId : undefined}
         {...mergeProps(
           themeProps('chat-message', {sender, density}),

package/src/Chat/ChatMessageBubble.tsx

@@ -216,6 +216,7 @@ export function ChatMessageBubble({
   style: styleProp,
   'data-testid': testId,
   ref,
+  ...rest
 }: ChatMessageBubbleProps) {
   const msgContext = useChatMessageContext();
   const sender = msgContext?.sender ?? 'assistant';
@@ -274,6 +275,7 @@ export function ChatMessageBubble({
         </div>
       )}
       <div
+        {...rest}
         ref={ref}
         data-testid={testId}
         {...mergeProps(

package/src/Chat/ChatMessageList.doc.mjs

@@ -42,7 +42,7 @@ export const docs = {
     },
     {
       name: 'gap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Gap between top-level message rows. Defaults to the selected density; override for LLM event streams or independent rows that need different spacing from density.',
     },
     {

package/src/Chat/ChatMessageList.tsx

@@ -210,6 +210,7 @@ export function ChatMessageList({
   style,
   'data-testid': testId,
   ref,
+  ...rest
 }: ChatMessageListProps) {
   const layoutContext = useChatLayoutContext();
   const sentinelRef = useRef<HTMLDivElement>(null);
@@ -264,6 +265,7 @@ export function ChatMessageList({
   return (
     <ChatListContext value={contextValue}>
       <div
+        {...rest}
         ref={ref}
         role="log"
         aria-live="polite"

package/src/Chat/ChatMessageMetadata.tsx

@@ -26,19 +26,20 @@ import type {IconName} from '../Icon/globalIconRegistry';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export type ChatMessageStatus =
   'sending' | 'sent' | 'delivered' | 'read' | 'error';
 
 const STATUS_CONFIG: Record<
   ChatMessageStatus,
-  {icon: IconName; label: string}
+  {icon: IconName; i18nKey: string}
 > = {
-  sending: {icon: 'clock', label: 'Sending'},
-  sent: {icon: 'check', label: 'Sent'},
-  delivered: {icon: 'checkDouble', label: 'Delivered'},
-  read: {icon: 'checkDouble', label: 'Read'},
-  error: {icon: 'error', label: 'Failed'},
+  sending: {icon: 'clock', i18nKey: '@astryx.chat.status.sending'},
+  sent: {icon: 'check', i18nKey: '@astryx.chat.status.sent'},
+  delivered: {icon: 'checkDouble', i18nKey: '@astryx.chat.status.delivered'},
+  read: {icon: 'checkDouble', i18nKey: '@astryx.chat.status.read'},
+  error: {icon: 'error', i18nKey: '@astryx.chat.status.failed'},
 };
 
 const pulseKeyframes = stylex.keyframes({
@@ -116,10 +117,13 @@ export function ChatMessageMetadata({
   style,
   ...rest
 }: ChatMessageMetadataProps) {
+  const t = useTranslator();
   const msgContext = useChatMessageContext();
   const sender = msgContext?.sender ?? 'assistant';
 
   const statusConfig = status != null ? STATUS_CONFIG[status] : null;
+  const statusLabel =
+    statusConfig != null ? t(statusConfig.i18nKey) : '';
 
   const hasContent =
     timestamp != null || footer != null || statusConfig != null;
@@ -149,15 +153,17 @@ export function ChatMessageMetadata({
       {footer != null && statusConfig != null && <span>·</span>}
       {statusConfig != null && (
         <span
-          title={statusConfig.label}
-          aria-label={'Message ' + statusConfig.label.toLowerCase()}
+          title={statusLabel}
+          aria-label={t('@astryx.chat.messageAriaLabel', {
+            status: statusLabel.toLowerCase(),
+          })}
           {...stylex.props(
             styles.statusRow,
             status === 'error' && styles.statusError,
             status === 'sending' && styles.statusPulse,
           )}>
           <Icon icon={statusConfig.icon} size="xsm" color="inherit" />
-          <span>{statusConfig.label}</span>
+          <span>{statusLabel}</span>
         </span>
       )}
     </div>