@astryxdesign/core 0.4.3 → 0.4.4-canary.0f4d45f

package/src/StatusDot/StatusDot.doc.mjs

@@ -33,6 +33,12 @@ export const docs = {
       description:
         'Tooltip text shown on hover to explain the status meaning.',
     },
+    {
+      name: 'icon',
+      type: 'ReactNode',
+      description:
+        'Optional icon rendered centered inside the dot, painted in currentColor (the variant\'s ink). Gives the status a non-color mark, so use a different icon per status. Booleans and empty strings are ignored, so `cond && <Icon />` is safe. Same contract as AvatarStatusDot.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -84,6 +90,12 @@ export const docsZh = {
         '启用脉冲动画；尊重 prefers-reduced-motion: reduce 设置。',
       default: 'false',
     },
+    {
+      name: 'icon',
+      type: 'ReactNode',
+      description:
+        '可选图标，居中渲染于圆点内，以 currentColor（变体的前景色）着色。为状态提供非颜色标记，请为每个状态使用不同图标。布尔值和空字符串会被忽略，因此 `cond && <Icon />` 是安全的。与 AvatarStatusDot 的契约一致。',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -132,6 +144,7 @@ export const docsDense = {
     label: 'Accessible label via aria-label.',
     isPulsing: 'Pulse animation; respects prefers-reduced-motion: reduce.',
     tooltip: 'Tooltip text on hover to explain status meaning.',
+    icon: 'Optional ReactNode rendered centered in the dot (currentColor ink); a non-color mark for the status, use a different icon per status. Booleans/empty strings ignored (safe for cond && <Icon/>). Same contract as AvatarStatusDot.',
     xstyle: 'StyleX layout styles; must be stylex.create() value.',
   },
 };

package/src/StatusDot/StatusDot.test.tsx

@@ -2,8 +2,16 @@
 
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
+import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '../theme/tokens.stylex';
 import {StatusDot} from './StatusDot';
 
+/** Renders a StatusDot and returns its root element. */
+function renderDot(props: React.ComponentProps<typeof StatusDot>) {
+  render(<StatusDot {...props} />);
+  return screen.getByRole('img', {name: props.label});
+}
+
 describe('StatusDot', () => {
   it('renders with role="img" and aria-label', () => {
     render(<StatusDot variant="success" label="Online" />);
@@ -27,9 +35,7 @@ describe('StatusDot', () => {
     ] as const;
 
     for (const variant of variants) {
-      const {unmount} = render(
-        <StatusDot variant={variant} label={variant} />,
-      );
+      const {unmount} = render(<StatusDot variant={variant} label={variant} />);
       expect(screen.getByRole('img', {name: variant})).toBeInTheDocument();
       unmount();
     }
@@ -49,11 +55,7 @@ describe('StatusDot', () => {
 
   it('supports data-testid', () => {
     render(
-      <StatusDot
-        variant="success"
-        label="Online"
-        data-testid="status-dot"
-      />,
+      <StatusDot variant="success" label="Online" data-testid="status-dot" />,
     );
     expect(screen.getByTestId('status-dot')).toBeInTheDocument();
   });
@@ -81,4 +83,109 @@ describe('StatusDot', () => {
     const dot = screen.getByRole('img', {name: 'Online'});
     expect(dot).toBeInTheDocument();
   });
+
+  it('renders every variant as a plain childless dot by default (design review #4373)', () => {
+    // The dot is deliberately a colour-only signal by default — no built-in
+    // per-variant glyph. Making the status accessible in context (label,
+    // icon, or an accessible alternative) is the builder's responsibility;
+    // see the usage guidance.
+    const variants = [
+      'success',
+      'warning',
+      'error',
+      'accent',
+      'neutral',
+    ] as const;
+    for (const variant of variants) {
+      const dot = renderDot({variant, label: `plain-${variant}`});
+      expect(dot.childElementCount, variant).toBe(0);
+    }
+  });
+
+  describe('custom icon (parity with AvatarStatusDot)', () => {
+    const ICON_TESTID = 'custom-icon';
+    function Icon() {
+      return <svg data-testid={ICON_TESTID} />;
+    }
+
+    it('renders a provided icon inside the dot', () => {
+      renderDot({variant: 'success', label: 'Verified', icon: <Icon />});
+      expect(screen.getByTestId(ICON_TESTID)).toBeInTheDocument();
+    });
+
+    it('hides the icon wrapper from assistive tech (the label carries the status)', () => {
+      renderDot({variant: 'success', label: 'Verified', icon: <Icon />});
+      const iconEl = screen.getByTestId(ICON_TESTID);
+      expect(iconEl.closest('[aria-hidden="true"]')).not.toBeNull();
+    });
+
+    it.each([false, true, null, undefined, ''])(
+      'ignores %s and keeps the plain dot (safe for `cond && <Icon />`)',
+      value => {
+        const dot = renderDot({
+          variant: 'error',
+          label: 'Offline',
+          icon: value,
+        });
+        expect(dot.childElementCount).toBe(0);
+      },
+    );
+
+    it('keeps the accessible name on the dot when an icon renders', () => {
+      const dot = renderDot({
+        variant: 'success',
+        label: 'Verified',
+        icon: <Icon />,
+      });
+      expect(dot).toHaveAttribute('role', 'img');
+      expect(dot).toHaveAttribute('aria-label', 'Verified');
+    });
+  });
+
+  describe('variant ink (a passed icon paints from currentColor)', () => {
+    it('pairs the warning plate with the dedicated dark on-warning ink', () => {
+      // The regression this guards: a light surface ink on the yellow warning
+      // plate lands near 2:1, while `--color-on-warning` is the fixed dark
+      // ink (~9.6:1). An icon inherits the ink via `currentColor`, so the
+      // pairing is what keeps custom icons legible.
+      const probe = stylex.create({
+        warning: {
+          backgroundColor: colorVars['--color-warning'],
+          color: colorVars['--color-on-warning'],
+        },
+      });
+      const dot = renderDot({variant: 'warning', label: 'Degraded'});
+      const atomicClasses = (stylex.props(probe.warning).className ?? '')
+        .split(' ')
+        // Dev mode prepends a per-file `File__style.key` debug class that
+        // legitimately differs between the probe and the component.
+        .filter(cls => !cls.includes('__'));
+      expect(atomicClasses.length).toBeGreaterThan(0);
+      for (const cls of atomicClasses) {
+        expect(dot.className).toContain(cls);
+      }
+    });
+  });
+
+  describe('accessible name (label reaches AT without hover)', () => {
+    it('exposes the status label as the accessible name for every variant, without a tooltip', () => {
+      const variants = [
+        'success',
+        'warning',
+        'error',
+        'accent',
+        'neutral',
+      ] as const;
+      for (const variant of variants) {
+        const {unmount} = render(
+          <StatusDot variant={variant} label={`Status: ${variant}`} />,
+        );
+        const dot = screen.getByRole('img', {name: `Status: ${variant}`});
+        expect(dot).toHaveAttribute('aria-label', `Status: ${variant}`);
+        // The name must not depend on hover or focus.
+        expect(dot.getAttribute('tabindex')).toBeNull();
+        unmount();
+      }
+    });
+  });
 });

package/src/StatusDot/StatusDot.tsx

@@ -16,11 +16,13 @@
  * - /packages/cli/assets/templates/blocks/components/StatusDot/ (showcase blocks)
  */
 
+import type {ReactNode} from 'react';
+
 import * as stylex from '@stylexjs/stylex';
 import {colorVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {Tooltip} from '../Tooltip/Tooltip';
-import {mergeProps} from '../utils';
+import {isRenderable, mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 import type {StatusDotVariantMap} from './index';
 
@@ -33,16 +35,21 @@ const pulseKeyframes = stylex.keyframes({
   '100%': {opacity: 1},
 });
 
+/** Fixed dot size in px. A user-supplied icon is drawn into this same field. */
+const DOT_SIZE = 8;
+
 /**
  * Base styles
  */
 const styles = stylex.create({
   base: {
-    display: 'inline-block',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: '50%',
     flexShrink: 0,
-    width: '8px',
-    height: '8px',
+    width: `${DOT_SIZE}px`,
+    height: `${DOT_SIZE}px`,
   },
   pulsing: {
     animationName: pulseKeyframes,
@@ -55,26 +62,49 @@ const styles = stylex.create({
       animationName: 'none',
     },
   },
+  // A user-supplied icon fills the whole 8px field and paints from
+  // `currentColor` (the variant's ink).
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: 0,
+    width: `${DOT_SIZE}px`,
+    height: `${DOT_SIZE}px`,
+  },
 });
 
 /**
- * Variant styles mapping to theme color tokens
+ * Variant styles mapping to theme color tokens.
+ *
+ * Each variant sets both the plate colour and an ink colour: a user-supplied
+ * `icon` paints from `currentColor`, so plate and ink can never drift out of
+ * contrast (same contract as AvatarStatusDot). The ink is each plate's
+ * dedicated `--color-on-*` pairing (the Badge precedent), not the surface
+ * colour: on-warning is a fixed dark ink, which keeps an icon legible on the
+ * yellow plate (~9.6:1) where a light surface ink lands near 2:1. Neutral has
+ * no `--color-on-*` token; its mid-grey plate takes the surface ink.
  */
 const variants = stylex.create({
   success: {
     backgroundColor: colorVars['--color-success'],
+    color: colorVars['--color-on-success'],
   },
   warning: {
     backgroundColor: colorVars['--color-warning'],
+    color: colorVars['--color-on-warning'],
   },
   error: {
     backgroundColor: colorVars['--color-error'],
+    color: colorVars['--color-on-error'],
   },
   accent: {
     backgroundColor: colorVars['--color-accent'],
+    color: colorVars['--color-on-accent'],
   },
   neutral: {
     backgroundColor: colorVars['--color-icon-secondary'],
+    color: colorVars['--color-background-surface'],
   },
 });
 
@@ -92,7 +122,8 @@ export interface StatusDotProps extends BaseProps<HTMLSpanElement> {
    */
   variant: StatusDotVariant;
   /**
-   * Accessible label describing the status. Required for a11y.
+   * Accessible label describing the status. Required for a11y — it is the
+   * dot's `aria-label`, so the status reaches screen readers without hover.
    */
   label: string;
   /**
@@ -106,12 +137,36 @@ export interface StatusDotProps extends BaseProps<HTMLSpanElement> {
    * When omitted, no tooltip is rendered.
    */
   tooltip?: string;
+  /**
+   * Optional icon to render centered inside the dot. Accepts any ReactNode
+   * (typically an SVG icon), painted in the dot's `currentColor` ink. Same
+   * contract as `AvatarStatusDot`'s `icon`.
+   *
+   * By default the dot is a colour-only signal; an icon gives the status a
+   * non-colour mark, so use a different icon per status — the same icon on
+   * every variant leaves the statuses distinguishable by colour alone
+   * (WCAG 2.1 SC 1.4.1). Booleans and empty strings are ignored (safe for
+   * `cond && <Icon />`).
+   *
+   * @example
+   * ```
+   * <StatusDot variant="success" label="Verified" icon={<CheckIcon />} />
+   * ```
+   */
+  icon?: ReactNode;
 }
 
 /**
  * A small colored dot indicator for status display (online/offline, severity, etc).
  *
- * Fixed 8px size. Renders as a non-focusable `<span>` with `role="img"` and
+ * Fixed 8px size. By default the dot conveys status by colour only, which is
+ * not accessible in isolation (WCAG 2.1 SC 1.4.1) — treat it as a signal the
+ * surrounding UI must make accessible: use it as a binary present/absent
+ * signal, pair it with a visible label, pass `icon` so the status carries a
+ * non-colour mark, or convey the status accessibly elsewhere. See the usage
+ * guidance in the component docs.
+ *
+ * Renders as a non-focusable `<span>` with `role="img"` and
  * `aria-label` for accessibility. Styles use Astryx theme tokens via StyleX.
  * Wrap your app in `<Theme>` to apply a theme.
  *
@@ -121,6 +176,7 @@ export interface StatusDotProps extends BaseProps<HTMLSpanElement> {
  * <StatusDot variant="error" label="Offline" />
  * <StatusDot variant="success" label="Live" isPulsing />
  * <StatusDot variant="success" label="Online" tooltip="Online" />
+ * <StatusDot variant="success" label="Verified" icon={<CheckIcon />} />
  * ```
  */
 export function StatusDot({
@@ -128,12 +184,16 @@ export function StatusDot({
   label,
   isPulsing = false,
   tooltip,
+  icon,
   xstyle,
   className,
   style,
   ref,
   ...props
 }: StatusDotProps) {
+  // Booleans and empty renders don't count (safe for `cond && <Icon />`) —
+  // same contract as AvatarStatusDot.
+  const showsIcon = isRenderable(icon);
   const dot = (
     <span
       ref={ref}
@@ -151,8 +211,13 @@ export function StatusDot({
         className,
         style,
       )}
-      {...props}
-    />
+      {...props}>
+      {showsIcon && (
+        <span aria-hidden="true" {...stylex.props(styles.icon)}>
+          {icon}
+        </span>
+      )}
+    </span>
   );
 
   if (tooltip) {

package/src/Switch/Switch.test.tsx

@@ -262,6 +262,22 @@ describe('Switch', () => {
     expect(screen.getByLabelText('Toggle row')).toBeInTheDocument();
   });
 
+  it('drops the label gap when isLabelHidden so the row is only as wide as the track', () => {
+    const {rerender} = render(
+      <Switch
+        label="Toggle row"
+        isLabelHidden
+        value={false}
+        onChange={() => {}}
+      />,
+    );
+    const row = screen.getByRole('switch').parentElement!.parentElement!;
+    expect(getComputedStyle(row).gap).toMatch(/^0(px)?$/);
+
+    rerender(<Switch label="Toggle row" value={false} onChange={() => {}} />);
+    expect(getComputedStyle(row).gap).not.toMatch(/^0(px)?$/);
+  });
+
   it('keeps description linked via aria-describedby when isLabelHidden', () => {
     render(
       <Switch

package/src/Switch/Switch.tsx

@@ -135,6 +135,12 @@ const styles = stylex.create({
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
   },
+  // A hidden label is sr-only, so its wrapper is a zero-width flex item — the
+  // row gap would still be painted beside the track, making the field box
+  // wider than the control it contains. Matches CheckboxInput.
+  containerLabelHidden: {
+    gap: 0,
+  },
   containerSpread: {
     justifyContent: 'space-between',
     width: '100%',
@@ -655,6 +661,7 @@ export function Switch({
         }}
         {...stylex.props(
           styles.container,
+          isLabelHidden && styles.containerLabelHidden,
           labelSpacing === 'spread' && styles.containerSpread,
           !isDisabled && switchScope,
         )}>

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -23,6 +23,7 @@ import {spacingVars, colorVars, radiusVars} from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
 import {resolveContextActions} from '../../tableContextMenu';
 import {useTranslator} from '../../../i18n';
+import {rtlStyles} from '../../../utils';
 import type {
   TablePlugin,
   TableColumn,
@@ -92,8 +93,20 @@ const expansionStyles = stylex.create({
       color: colorVars['--color-icon-primary'],
     },
   },
+  // The RTL mirror is folded into each state's transform rather than living
+  // on a parent span, matching TreeListItem's chevron (both are `transform`,
+  // so on one element the later value would win).
   chevronExpanded: {
-    transform: 'rotate(90deg)',
+    transform: {
+      default: 'rotate(90deg)',
+      ':is([dir="rtl"] *)': 'scaleX(-1) rotate(90deg)',
+    },
+  },
+  chevronCollapsed: {
+    transform: {
+      default: 'rotate(0deg)',
+      ':is([dir="rtl"] *)': 'scaleX(-1) rotate(0deg)',
+    },
   },
   expandedRow: {
     backgroundColor: colorVars['--color-background-muted'],
@@ -121,7 +134,9 @@ function ExpansionChevron({
       type="button"
       {...stylex.props(
         expansionStyles.chevronButton,
-        isExpanded && expansionStyles.chevronExpanded,
+        isExpanded
+          ? expansionStyles.chevronExpanded
+          : expansionStyles.chevronCollapsed,
       )}
       onClick={e => {
         e.stopPropagation();
@@ -249,6 +264,9 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                   icon={isExpanded ? 'chevronDown' : 'chevronRight'}
                   size="xsm"
                   aria-hidden
+                  // chevronDown needs no mirroring; chevronRight (collapsed,
+                  // pointing toward the reveal direction) does.
+                  xstyle={!isExpanded && rtlStyles.mirror}
                 />
               ),
               onSelect: () => onToggle(key),

package/src/TimeInput/TimeInput.test.tsx

@@ -42,6 +42,29 @@ describe('TimeInput', () => {
     expect(screen.getByPlaceholderText('Pick a time')).toBeInTheDocument();
   });
 
+  it('does not step the time on a composing ArrowUp/ArrowDown (IME)', () => {
+    const onChange = vi.fn();
+    render(
+      <TimeInput
+        label="Time"
+        value={'14:30' as ISOTimeString}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByLabelText('Time');
+
+    // An IME candidate window navigates with the arrows; a composing keydown
+    // (isComposing / legacy keyCode 229) must not step the time value.
+    fireEvent.keyDown(input, {key: 'ArrowUp', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(input, {key: 'ArrowDown', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing ArrowUp still steps the time by one minute.
+    fireEvent.keyDown(input, {key: 'ArrowUp'});
+    expect(onChange).toHaveBeenCalledWith('14:31');
+  });
+
   it('displays formatted time in 12h format', () => {
     render(
       <TimeInput

package/src/TimeInput/TimeInput.tsx

@@ -55,6 +55,7 @@ import {
   formatDisplayTime24h,
   formatISOTime,
   adjustTime,
+  isImeKeyEvent,
   isTimeInRange,
   mergeProps,
   mergeRefs,
@@ -530,6 +531,13 @@ export function TimeInput({
   // Handle keyboard navigation on input
   const handleInputKeyDown = 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;
+      }
       // Arrow-key adjustment mutates the value; block it while showing a
       // disabled reason (the input keeps focusability via aria-disabled).
       if (isDisabled) {

package/src/Tokenizer/Tokenizer.test.tsx

@@ -16,6 +16,16 @@ import {Tokenizer} from './Tokenizer';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import type {SearchSource, SearchableItem} from '../Typeahead/types';
 import {TestIcon} from '../__tests__/TestIcon';
+import {InternationalizationProvider} from '../i18n';
+
+// Test-supplied announcement strings: the assertions below depend on no
+// catalog, and no hardcoded English in the component can satisfy them.
+const TOKEN_MESSAGES = {
+  fr: {
+    '@astryx.tokenizer.tokenAdded': 'Ajouté : {label}',
+    '@astryx.tokenizer.tokenRemoved': 'Retiré : {label}',
+  },
+};
 
 function politeRegion(): HTMLElement | null {
   return document.querySelector('[data-astryx-live-region="polite"]');
@@ -980,12 +990,14 @@ describe('Tokenizer', () => {
     it('announces removal politely on Backspace with an empty input', async () => {
       const onChange = vi.fn();
       render(
-        <Tokenizer
-          label="Members"
-          searchSource={userSource}
-          value={[users[0], users[1]]}
-          onChange={onChange}
-        />,
+        <InternationalizationProvider locale="fr" overrides={TOKEN_MESSAGES}>
+          <Tokenizer
+            label="Members"
+            searchSource={userSource}
+            value={[users[0], users[1]]}
+            onChange={onChange}
+          />
+        </InternationalizationProvider>,
       );
       const input = screen.getByRole('combobox');
       fireEvent.keyDown(input, {key: 'Backspace'});
@@ -994,35 +1006,39 @@ describe('Tokenizer', () => {
         type: 'remove',
       });
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Removed Bob');
+        expect(politeRegion()?.textContent).toBe('Retiré : Bob');
       });
     });
 
     it("announces removal politely when clicking a token's remove button", async () => {
       render(
-        <Tokenizer
-          label="Members"
-          searchSource={userSource}
-          value={[users[0], users[1]]}
-          onChange={() => {}}
-        />,
+        <InternationalizationProvider locale="fr" overrides={TOKEN_MESSAGES}>
+          <Tokenizer
+            label="Members"
+            searchSource={userSource}
+            value={[users[0], users[1]]}
+            onChange={() => {}}
+          />
+        </InternationalizationProvider>,
       );
       fireEvent.click(screen.getByRole('button', {name: 'Remove Alice'}));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Removed Alice');
+        expect(politeRegion()?.textContent).toBe('Retiré : Alice');
       });
     });
 
     it('announces addition politely when selecting a search result', async () => {
       render(
-        <Tokenizer
-          label="Members"
-          searchSource={userSource}
-          value={[]}
-          onChange={() => {}}
-          hasEntriesOnFocus
-          debounceMs={0}
-        />,
+        <InternationalizationProvider locale="fr" overrides={TOKEN_MESSAGES}>
+          <Tokenizer
+            label="Members"
+            searchSource={userSource}
+            value={[]}
+            onChange={() => {}}
+            hasEntriesOnFocus
+            debounceMs={0}
+          />
+        </InternationalizationProvider>,
       );
       const input = screen.getByRole('combobox');
       fireEvent.focus(input);
@@ -1031,7 +1047,7 @@ describe('Tokenizer', () => {
       });
       fireEvent.click(screen.getByText('Alice'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Added Alice');
+        expect(politeRegion()?.textContent).toBe('Ajouté : Alice');
       });
     });
 
@@ -1041,14 +1057,16 @@ describe('Tokenizer', () => {
         bootstrap: () => [],
       };
       render(
-        <Tokenizer
-          label="Tags"
-          searchSource={emptySource}
-          value={[]}
-          onChange={() => {}}
-          hasCreate
-          debounceMs={0}
-        />,
+        <InternationalizationProvider locale="fr" overrides={TOKEN_MESSAGES}>
+          <Tokenizer
+            label="Tags"
+            searchSource={emptySource}
+            value={[]}
+            onChange={() => {}}
+            hasCreate
+            debounceMs={0}
+          />
+        </InternationalizationProvider>,
       );
       const input = screen.getByRole('combobox');
       await act(async () => {
@@ -1059,7 +1077,7 @@ describe('Tokenizer', () => {
       });
       fireEvent.click(screen.getByText('Create "new-tag"'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Added new-tag');
+        expect(politeRegion()?.textContent).toBe('Ajouté : new-tag');
       });
     });
 

package/src/Tokenizer/Tokenizer.tsx

@@ -600,7 +600,7 @@ export function Tokenizer<T extends SearchableItem>({
         const realItem = base as T;
         const newItems = [...value, realItem];
         onChange(newItems, {item: realItem, type: 'create'});
-        announce(`Added ${createdValue}`);
+        announce(t('@astryx.tokenizer.tokenAdded', {label: createdValue}));
         return;
       }
 
@@ -609,9 +609,9 @@ export function Tokenizer<T extends SearchableItem>({
       }
       const newItems = [...value, item];
       onChange(newItems, {item, type: 'add'});
-      announce(`Added ${item.label}`);
+      announce(t('@astryx.tokenizer.tokenAdded', {label: item.label}));
     },
-    [value, onChange, isAtMax, selectedIds, hasCreate, announce],
+    [value, onChange, isAtMax, selectedIds, hasCreate, announce, t],
   );
 
   // Handle removing an item. Single removal path: both Backspace on an empty
@@ -621,10 +621,10 @@ export function Tokenizer<T extends SearchableItem>({
     (item: T) => {
       const newItems = value.filter(v => v.id !== item.id);
       onChange(newItems, {item, type: 'remove'});
-      announce(`Removed ${item.label}`);
+      announce(t('@astryx.tokenizer.tokenRemoved', {label: item.label}));
       inputRef.current?.focus();
     },
-    [value, onChange, announce],
+    [value, onChange, announce, t],
   );
 
   // Handle clearing all items