@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0

package/dist/hooks/useKeyboardHint.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file useKeyboardHint.tsx
- * @input Uses React, StyleX, Kbd, useLayer, i18n (useTranslator)
+ * @input Uses React, StyleX, Kbd, useLayer
  * @output Exports useKeyboardHint hook — ephemeral arrow-key navigation hint
  * @position Core hook; shows sighted keyboard users how to navigate composite
  *   widgets that use roving tabindex (single Tab stop, arrows inside)

package/dist/hooks/useKeyboardHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardHint.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyboardHint.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiB5E,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAEtC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,WAAW,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEtC;;;OAGG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC7C;AAkED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,GAAE,sBAA2B,GACnC,qBAAqB,CAgKvB"}
+{"version":3,"file":"useKeyboardHint.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyboardHint.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAgB5E,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAEtC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,WAAW,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEtC;;;OAGG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC7C;AAkED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,GAAE,sBAA2B,GACnC,qBAAqB,CA6JvB"}

package/dist/hooks/useKeyboardHint.js

@@ -4,7 +4,7 @@
 
 /**
  * @file useKeyboardHint.tsx
- * @input Uses React, StyleX, Kbd, useLayer, i18n (useTranslator)
+ * @input Uses React, StyleX, Kbd, useLayer
  * @output Exports useKeyboardHint hook — ephemeral arrow-key navigation hint
  * @position Core hook; shows sighted keyboard users how to navigate composite
  *   widgets that use roving tabindex (single Tab stop, arrows inside)
@@ -21,7 +21,6 @@ import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, shadowVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Kbd } from "../Kbd/index.js";
 import { useLayer } from "../Layer/useLayer.js";
-import { useTranslator } from "../i18n/index.js";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -91,7 +90,6 @@ export function useKeyboardHint(options = {}) {
     dismissAfterMs = 3000,
     isEnabled = true
   } = options;
-  const t = useTranslator();
   const timeoutRef = useRef(null);
   const dismissedRef = useRef(false);
   const isVisibleRef = useRef(false);
@@ -203,7 +201,7 @@ export function useKeyboardHint(options = {}) {
       ...{
         className: "x11g1kdw"
       },
-      children: t('@astryx.keyboardHint.toNavigate')
+      children: "to navigate"
     })]
   }), {
     placement: 'below',

package/locales/en.json

@@ -247,10 +247,6 @@
     "defaultMessage": "Use arrow keys to move between avatars",
     "description": "Screen-reader-only instruction attached (via aria-describedby) to a group of interactive avatars that share a single Tab stop. Tells keyboard users the Left/Right arrow keys move focus between the avatars. Only announced when the group has interactive (link/button) avatars."
   },
-  "@astryx.avatarGroup.overflow": {
-    "defaultMessage": "{count, number} more",
-    "description": "Accessible name for the \"+N\" overflow indicator at the end of an AvatarGroup — announces how many additional avatars are not shown. Example: `5 more`. The visible \"+N\" text is unaffected; this is the aria-label only."
-  },
   "@astryx.banner.dismiss": {
     "defaultMessage": "Dismiss",
     "description": "\"Dismiss\" = close/hide this notification (not \"reject a person\"). Aria label AND tooltip on the small X button on a Banner."
@@ -411,10 +407,6 @@
     "defaultMessage": "Search options",
     "description": "Screen-reader-only accessible name for that same search input inside a MultiSelector."
   },
-  "@astryx.multiSelector.selectAllPartiallySelected": {
-    "defaultMessage": "{label}, partially selected",
-    "description": "Accessible name for the MultiSelector select-all option while only some options are selected. `{label}` is the visible select-all label (e.g. \"Select all\"). ARIA forbids aria-selected=\"mixed\" on options, so the indeterminate state is conveyed through the name instead. \"Partially\" = some but not all."
-  },
   "@astryx.popover.close": {
     "defaultMessage": "Close popover",
     "description": "\"Close\" = shut/dismiss, not \"nearby\". Screen-reader-only label on the close button inside a Popover."
@@ -691,10 +683,6 @@
     "defaultMessage": "Expand",
     "description": "\"Expand\" = reveal more, not grow physically. Aria label AND tooltip on the same toggle when currently collapsed. Pairs with `banner.collapse`."
   },
-  "@astryx.button.loading": {
-    "defaultMessage": "Loading",
-    "description": "Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense (\"work in progress\"), not a noun. Kept separate from `typeahead.loading` — translations may diverge."
-  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "Expand {label}",
     "description": "Screen-reader-only label on the ChatComposerDrawer toggle when the drawer is collapsed. `{label}` is the drawer's visible name — example: `Expand Attachments`. Pairs with `collapse`."
@@ -759,14 +747,6 @@
     "defaultMessage": "Code",
     "description": "Screen-reader-only fallback name for a code-snippet scroll container when the code's language is unknown. \"Code\" = source code, not secret code or code of conduct."
   },
-  "@astryx.field.optional": {
-    "defaultMessage": "Optional",
-    "description": "Visible indicator shown next to a form field's label when the field is optional (isOptional). Mutually exclusive with the required indicator. Very short — appears inline after the label text."
-  },
-  "@astryx.field.required": {
-    "defaultMessage": "Required",
-    "description": "Visible indicator shown next to a form field's label when the field must be filled in (isRequired). Mutually exclusive with the optional indicator. Very short — appears inline after the label text."
-  },
   "@astryx.fileInput.clearLabel": {
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that removes the selected file from a FileInput. Example: `Clear Attachment`, `Clear Résumé`."
@@ -779,22 +759,10 @@
     "defaultMessage": "{label}, {fileNames}",
     "description": "Accessible name for a FileInput trigger that has files attached, composing the field label with the selected filenames. Example: `Attachments, report.pdf, notes.txt`."
   },
-  "@astryx.keyboardHint.toNavigate": {
-    "defaultMessage": "to navigate",
-    "description": "Trailing text in the keyboard-hint badge, shown after arrow-key icons — reads as `← → to navigate`. Lowercase sentence fragment completing the visual phrase; the badge is aria-hidden, so this is for sighted users only."
-  },
   "@astryx.lightbox.mediaViewer": {
     "defaultMessage": "Media viewer",
     "description": "Screen-reader-only fallback name for the Lightbox dialog when the current media item has no alt text. Should rarely render — consumers should provide alt."
   },
-  "@astryx.metadataList.showMore": {
-    "defaultMessage": "Show more",
-    "description": "Button label under a MetadataList that reveals items hidden beyond the configured maximum. Toggles with `metadataList.showLess` — keep the pair parallel in your language."
-  },
-  "@astryx.metadataList.showLess": {
-    "defaultMessage": "Show less",
-    "description": "Button label under a MetadataList that re-hides the extra items revealed by `metadataList.showMore`. Keep the pair parallel."
-  },
   "@astryx.mobileNav.navigation": {
     "defaultMessage": "Navigation",
     "description": "Screen-reader-only fallback name for the MobileNav overlay dialog when no explicit label was passed."

package/locales/pseudo.json

@@ -185,9 +185,6 @@
   "@astryx.avatarGroup.keyboardHint": {
     "defaultMessage": "⟦Úšé àřřóŵ ķéýš ţó ɱóṽé ƀéţŵééñ àṽàţàřš⟧"
   },
-  "@astryx.avatarGroup.overflow": {
-    "defaultMessage": "⟦{count, number} ɱóřé⟧"
-  },
   "@astryx.banner.dismiss": {
     "defaultMessage": "⟦Ðíšɱíšš⟧"
   },
@@ -308,9 +305,6 @@
   "@astryx.multiSelector.searchOptions": {
     "defaultMessage": "⟦Šéàřçĥ óþţíóñš⟧"
   },
-  "@astryx.multiSelector.selectAllPartiallySelected": {
-    "defaultMessage": "⟦{label}, þàřţíàłłý šéłéçţéð⟧"
-  },
   "@astryx.popover.close": {
     "defaultMessage": "⟦Çłóšé þóþóṽéř⟧"
   },
@@ -518,9 +512,6 @@
   "@astryx.banner.expand": {
     "defaultMessage": "⟦Éẋþàñð⟧"
   },
-  "@astryx.button.loading": {
-    "defaultMessage": "⟦Łóàðíñĝ⟧"
-  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "⟦Éẋþàñð {label}⟧"
   },
@@ -569,12 +560,6 @@
   "@astryx.codeBlock.code": {
     "defaultMessage": "⟦Çóðé⟧"
   },
-  "@astryx.field.optional": {
-    "defaultMessage": "⟦Óþţíóñàł⟧"
-  },
-  "@astryx.field.required": {
-    "defaultMessage": "⟦Řéɋúířéð⟧"
-  },
   "@astryx.fileInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
@@ -584,18 +569,9 @@
   "@astryx.fileInput.triggerWithFiles": {
     "defaultMessage": "⟦{label}, {fileNames}⟧"
   },
-  "@astryx.keyboardHint.toNavigate": {
-    "defaultMessage": "⟦ţó ñàṽíĝàţé⟧"
-  },
   "@astryx.lightbox.mediaViewer": {
     "defaultMessage": "⟦Ṁéðíà ṽíéŵéř⟧"
   },
-  "@astryx.metadataList.showMore": {
-    "defaultMessage": "⟦Šĥóŵ ɱóřé⟧"
-  },
-  "@astryx.metadataList.showLess": {
-    "defaultMessage": "⟦Šĥóŵ łéšš⟧"
-  },
   "@astryx.mobileNav.navigation": {
     "defaultMessage": "⟦Ñàṽíĝàţíóñ⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.2.0-canary.ea693ac",
+  "version": "0.2.0",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",

package/src/AvatarGroup/AvatarGroup.test.tsx

@@ -5,7 +5,6 @@ import userEvent from '@testing-library/user-event';
 import {AvatarGroup} from './AvatarGroup';
 import {AvatarGroupOverflow} from './AvatarGroupOverflow';
 import {Avatar, AvatarStatusDot} from '../Avatar';
-import {InternationalizationProvider} from '../i18n';
 
 describe('AvatarGroup', () => {
   it('renders all avatar children', () => {
@@ -239,26 +238,7 @@ describe('AvatarGroupOverflow — hardening', () => {
     );
 
     expect(screen.getByText('+4912')).toBeInTheDocument();
-    // The aria-label routes through the catalog's `{count, number}` ICU
-    // argument, so the en locale adds a grouping separator.
-    expect(screen.getByLabelText('4,912 more')).toBeInTheDocument();
-  });
-
-  it('localizes the overflow label through the i18n catalog', () => {
-    render(
-      <InternationalizationProvider
-        locale="fr"
-        overrides={{
-          fr: {'@astryx.avatarGroup.overflow': '{count, number} de plus'},
-        }}>
-        <AvatarGroup>
-          <Avatar name="Alice" />
-          <AvatarGroupOverflow count={3} />
-        </AvatarGroup>
-      </InternationalizationProvider>,
-    );
-
-    expect(screen.getByLabelText('3 de plus')).toBeInTheDocument();
+    expect(screen.getByLabelText('4912 more')).toBeInTheDocument();
   });
 });
 

package/src/AvatarGroup/AvatarGroupOverflow.tsx

@@ -3,7 +3,7 @@
 
 /**
  * @file AvatarGroupOverflow.tsx
- * @input Uses React, StyleX, AvatarGroupContext, i18n (useTranslator)
+ * @input Uses React, StyleX, AvatarGroupContext
  * @output Exports AvatarGroupOverflow for overflow indicator
  * @position Slot component used inside AvatarGroup
  *
@@ -26,7 +26,6 @@ import {mergeProps} from '../utils';
 import {useAvatarGroup} from './AvatarGroupContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 const BORDER_WIDTH = 2;
 const OVERFLOW_FONT_RATIO = 0.35;
@@ -151,12 +150,11 @@ export function AvatarGroupOverflow({
   style,
   ...rest
 }: AvatarGroupOverflowProps): ReactNode {
-  const t = useTranslator();
   const group = useAvatarGroup();
   const numericSize = group?.numericSize ?? 36;
   const overlap = group?.overlap ?? 0;
 
-  const label = t('@astryx.avatarGroup.overflow', {count});
+  const label = `${count} more`;
   const content = children ?? `+${count}`;
 
   if (onClick) {

package/src/Breadcrumbs/Breadcrumbs.test.tsx

@@ -519,7 +519,7 @@ describe('BreadcrumbItem menu', () => {
         <BreadcrumbItem
           menu={
             <BreadcrumbMenuRadioGroup
-              label="Sort by"
+              aria-label="Sort by"
               value="name"
               onChange={onChange}>
               <BreadcrumbMenuRadioItem value="name" label="Name" />

package/src/Button/Button.test.tsx

@@ -14,7 +14,6 @@ import {render, screen, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Button} from './Button';
 import {Badge} from '../Badge/Badge';
-import {InternationalizationProvider} from '../i18n';
 
 describe('Button', () => {
   it('renders label as visible text', () => {
@@ -447,21 +446,6 @@ describe('Button', () => {
     expect(liveRegion).toHaveTextContent('Loading');
   });
 
-  it('localizes the loading announcement through the i18n catalog', () => {
-    render(
-      <InternationalizationProvider
-        locale="fr"
-        overrides={{fr: {'@astryx.button.loading': 'Chargement'}}}>
-        <Button label="Submit" isLoading />
-      </InternationalizationProvider>,
-    );
-    const button = screen.getByRole('button');
-    // The Spinner also has role="status", so grab the live region explicitly.
-    const regions = button.querySelectorAll('[role="status"]');
-    const liveRegion = regions[regions.length - 1];
-    expect(liveRegion).toHaveTextContent('Chargement');
-  });
-
   describe('elevation', () => {
     it('renders a distinct class for each elevation level', () => {
       const classFor = (elevation: 'none' | 'low' | 'med' | 'high') => {

package/src/Button/Button.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file Button.tsx
- * @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useTranslator)
+ * @input Uses React, ButtonHTMLAttributes, ReactNode
  * @output Exports Button component, ButtonProps, ButtonVariant types
  * @position Core implementation; consumed by index.ts, tested by Button.test.tsx
  *
@@ -45,7 +45,6 @@ import {mergeProps, mergeRefs} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 /**
  * Base button styles
@@ -612,7 +611,6 @@ export function Button({
   ref,
   ...props
 }: ButtonProps): ReactNode {
-  const t = useTranslator();
   const size = useSize(sizeProp, 'md');
   const buttonGroup = useButtonGroup();
 
@@ -762,7 +760,7 @@ export function Button({
       </span>
       {/* Live region for loading state announcements */}
       <VisuallyHidden role="status" aria-live="polite">
-        {isLoadingState ? t('@astryx.button.loading') : ''}
+        {isLoadingState ? 'Loading' : ''}
       </VisuallyHidden>
     </>
   );

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -13,7 +13,6 @@ 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 {CheckboxInput} from './CheckboxInput';
-import {getForcedColorsRules} from '../__tests__/forcedColors';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 afterEach(() => {
@@ -544,25 +543,3 @@ describe('CheckboxInput', () => {
     });
   });
 });
-
-// jsdom cannot emulate forced-colors rendering, so this asserts that the
-// compiled output includes the forced-colors rule; visual behavior needs
-// manual verification under Windows High Contrast.
-describe('forced colors (WCAG 1.4.11)', () => {
-  it('compiles a forced-colors fill so the indeterminate mark survives Windows High Contrast', () => {
-    render(
-      <CheckboxInput label="All" value="indeterminate" onChange={() => {}} />,
-    );
-    // The painted indeterminate bar would be stripped to Canvas (invisible);
-    // CanvasText keeps it perceivable.
-    expect(getForcedColorsRules()).toContain('background-color: canvastext;');
-  });
-
-  it('compiles a forced-colors color so the checkmark survives Windows High Contrast', () => {
-    render(<CheckboxInput label="Accept" value={true} onChange={() => {}} />);
-    // The check strokes with currentColor; forced colors leaves it the same
-    // white as the flattened box, so it needs its own CanvasText color to stay
-    // perceivable on the Canvas box.
-    expect(getForcedColorsRules()).toContain('color: canvastext;');
-  });
-});

package/src/CheckboxInput/CheckboxInput.tsx

@@ -158,29 +158,14 @@ const styles = stylex.create({
   },
   checkmark: {
     display: 'none',
-    color: {
-      default: colorVars['--color-on-accent'],
-      // Forced colors (Windows High Contrast) does not reliably force an SVG
-      // stroke painted with currentColor, so the check stays the same white as
-      // the flattened (Canvas) box fill — a white check on a white box.
-      // CanvasText keeps it perceivable on the Canvas box, matching the
-      // indeterminate mark (WCAG 1.4.11).
-      '@media (forced-colors: active)': 'CanvasText',
-    },
+    color: colorVars['--color-on-accent'],
   },
   checkmarkVisible: {
     display: 'block',
   },
   indeterminateMark: {
     display: 'none',
-    backgroundColor: {
-      default: colorVars['--color-on-accent'],
-      // Forced colors (Windows High Contrast) strips painted backgrounds,
-      // which would make the indeterminate bar invisible; CanvasText keeps it
-      // perceivable on the Canvas box fill (WCAG 1.4.11). The checkmark carries
-      // the matching CanvasText treatment on its own style.
-      '@media (forced-colors: active)': 'CanvasText',
-    },
+    backgroundColor: colorVars['--color-on-accent'],
     borderRadius: radiusVars['--radius-full'],
   },
   indeterminateMarkVisible: {

package/src/CheckboxList/CheckboxList.test.tsx

@@ -154,105 +154,14 @@ describe('CheckboxList', () => {
       </CheckboxList>,
     );
 
-    // The row is a pointer-only click surface (no invisible row button — the
-    // checkbox is the option's only tab stop). Click the row's label area,
-    // where the composed onClick fires — not the inner checkbox.
-    expect(
-      screen.queryByRole('button', {name: 'Option B'}),
-    ).not.toBeInTheDocument();
-    // The text also exists in the checkbox's visually hidden <label>; target
-    // the row's label <span> to click the row surface.
-    await user.click(screen.getByText('Option B', {selector: 'span'}));
+    // Click the interactive row (invisible-button pattern), which is where the
+    // composed onClick lives — not the inner checkbox.
+    await user.click(screen.getByRole('button', {name: 'Option B'}));
 
     expect(handleClick).toHaveBeenCalledTimes(1);
     expect(handleChange).toHaveBeenCalledWith(['a', 'b']);
   });
 
-  describe('single tab stop per option (WCAG 4.1.2 / APG checkbox pattern)', () => {
-    it('renders exactly one focusable control per option — the checkbox, no row button', () => {
-      render(
-        <CheckboxList label="Preferences" value={['a']} onChange={() => {}}>
-          <CheckboxListItem label="Option A" value="a" />
-          <CheckboxListItem label="Option B" value="b" />
-        </CheckboxList>,
-      );
-      // No invisible whole-row button duplicating the checkbox's action.
-      expect(screen.queryByRole('button')).not.toBeInTheDocument();
-      for (const item of screen.getAllByRole('listitem')) {
-        const focusables = item.querySelectorAll(
-          'button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-        );
-        expect(focusables).toHaveLength(1);
-        expect(focusables[0]).toBe(within(item).getByRole('checkbox'));
-      }
-    });
-
-    it('Tab moves directly from one option checkbox to the next', async () => {
-      const user = userEvent.setup();
-      render(
-        <CheckboxList label="Preferences" value={[]} onChange={() => {}}>
-          <CheckboxListItem label="Option A" value="a" />
-          <CheckboxListItem label="Option B" value="b" />
-        </CheckboxList>,
-      );
-      await user.tab();
-      expect(screen.getByRole('checkbox', {name: 'Option A'})).toHaveFocus();
-      await user.tab();
-      expect(screen.getByRole('checkbox', {name: 'Option B'})).toHaveFocus();
-      // No further tab stop inside the list (the row itself is not focusable).
-      await user.tab();
-      expect(document.body).toHaveFocus();
-    });
-
-    it('clicking the row surface (outside the checkbox) still toggles', async () => {
-      const user = userEvent.setup();
-      const handleChange = vi.fn();
-      render(
-        <CheckboxList label="Preferences" value={['a']} onChange={handleChange}>
-          <CheckboxListItem label="Option A" value="a" />
-          <CheckboxListItem label="Option B" value="b" />
-        </CheckboxList>,
-      );
-      // The text also exists in the checkbox's visually hidden <label>;
-      // target the row's label <span> to click the row surface.
-      await user.click(screen.getByText('Option B', {selector: 'span'}));
-      expect(handleChange).toHaveBeenCalledTimes(1);
-      expect(handleChange).toHaveBeenCalledWith(['a', 'b']);
-    });
-
-    it('toggles with Space on the focused checkbox, which reports checked state', async () => {
-      const user = userEvent.setup();
-      const handleChange = vi.fn();
-      render(
-        <CheckboxList label="Preferences" value={['a']} onChange={handleChange}>
-          <CheckboxListItem label="Option A" value="a" />
-          <CheckboxListItem label="Option B" value="b" />
-        </CheckboxList>,
-      );
-      await user.tab();
-      // The focused control is the checkbox itself, so its accessible name
-      // and checked state are what assistive tech announces on focus.
-      const checkboxA = screen.getByRole('checkbox', {name: 'Option A'});
-      expect(checkboxA).toHaveFocus();
-      expect(checkboxA).toBeChecked();
-      await user.keyboard(' ');
-      expect(handleChange).toHaveBeenCalledTimes(1);
-      expect(handleChange).toHaveBeenCalledWith([]);
-    });
-
-    it('the row itself is not focusable', () => {
-      render(
-        <CheckboxList label="Preferences" value={[]} onChange={() => {}}>
-          <CheckboxListItem label="Option A" value="a" />
-        </CheckboxList>,
-      );
-      const item = screen.getByRole('listitem');
-      expect(item).not.toHaveAttribute('tabindex');
-      item.focus();
-      expect(item).not.toHaveFocus();
-    });
-  });
-
   it('disables all checkboxes when group isDisabled is true', () => {
     render(
       <CheckboxList

package/src/CheckboxList/CheckboxListItem.tsx

@@ -16,11 +16,12 @@
  * - /packages/cli/templates/blocks/components/CheckboxList/ (showcase blocks)
  */
 
-import {use, useRef, type ReactNode} from 'react';
+import {use, type MouseEvent, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {colorVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
+import {composeEventHandlers} from '../utils';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {CheckboxInput} from '../CheckboxInput/CheckboxInput';
 import {ListItem} from '../List/ListItem';
@@ -211,14 +212,6 @@ export function CheckboxListItem({
   // Whether this item is interactive (has a toggle handler)
   const isInteractive = !effectiveReadOnly && (ctx != null || onCheck != null);
 
-  // The checkbox is the row's single keyboard control and action. The row is
-  // an enlarged click/tap target that delegates surface clicks to it via
-  // ListItem's `interactiveRef` (useClickableContainer), so each option is
-  // exactly one tab stop. Delegate whenever the row should respond to clicks:
-  // a toggleable item, or one carrying a consumer `onClick`.
-  const checkboxRef = useRef<HTMLInputElement | null>(null);
-  const hasRowInteraction = isInteractive || onClickProp != null;
-
   const handleToggle = () => {
     if (effectiveDisabled || effectiveReadOnly || isBusy) {
       return;
@@ -251,12 +244,14 @@ export function CheckboxListItem({
       description={description}
       endContent={endContent}
       isDisabled={effectiveDisabled}
-      // Delegate row clicks to the checkbox instead of wiring onClick (which
-      // would add an invisible row button = a second tab stop). The checkbox
-      // stays the option's sole focusable control (WCAG 4.1.2 / APG checkbox
-      // pattern). A consumer onClick rides on the checkbox itself (below), so
-      // it still fires for both direct and delegated (row-surface) clicks.
-      interactiveRef={hasRowInteraction ? checkboxRef : undefined}
+      onClick={
+        isInteractive || onClickProp
+          ? composeEventHandlers<MouseEvent>(
+              onClickProp as ((event: MouseEvent) => void) | undefined,
+              isInteractive ? handleToggle : undefined,
+            )
+          : undefined
+      }
       aria-busy={isBusy || undefined}
       xstyle={
         [
@@ -271,12 +266,10 @@ export function CheckboxListItem({
       style={style}
       startContent={
         <CheckboxInput
-          ref={checkboxRef}
           label={checkboxLabel}
           isLabelHidden
           value={resolvedChecked}
           onChange={() => handleToggle()}
-          onClick={onClickProp}
           isDisabled={effectiveDisabled}
           isReadOnly={effectiveReadOnly}
           isLoading={isBusy}

package/src/CodeBlock/CodeBlock.test.tsx

@@ -14,7 +14,6 @@ import {act, render, screen, fireEvent, waitFor} from '@testing-library/react';
 import {CodeBlock} from './CodeBlock';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import {dracula} from '../theme/syntax';
-import {InternationalizationProvider} from '../i18n';
 
 function politeRegion(): HTMLElement | null {
   return document.querySelector('[data-astryx-live-region="polite"]');
@@ -73,22 +72,6 @@ describe('CodeBlock', () => {
     });
   });
 
-  it('localizes the copy announcement through the i18n catalog', async () => {
-    render(
-      <InternationalizationProvider
-        locale="fr"
-        overrides={{fr: {'@astryx.codeBlock.copied': 'Copié'}}}>
-        <CodeBlock code="const x = 1;" language="javascript" />
-      </InternationalizationProvider>,
-    );
-    // The button label and the live-region announcement share the same key.
-    fireEvent.click(screen.getByRole('button', {name: 'Copy code'}));
-    await waitFor(() => {
-      expect(politeRegion()).toHaveTextContent('Copié');
-    });
-    expect(screen.getByRole('button', {name: 'Copié'})).toBeInTheDocument();
-  });
-
   it('keeps the copied indicator a full 2s after a rapid re-copy', async () => {
     vi.useFakeTimers();
     try {

package/src/CodeBlock/CodeBlock.tsx

@@ -786,7 +786,7 @@ export function CodeBlock({
       setCopied(true);
       // Swapping the button's aria-label alone isn't reliably announced by
       // screen readers, so confirm the copy via a polite live region.
-      announce(t('@astryx.codeBlock.copied'));
+      announce('Copied');
       onCopy?.();
       // Restart the reset timer on every copy — otherwise a rapid re-copy
       // is reverted early by the previous click's timer.
@@ -800,7 +800,7 @@ export function CodeBlock({
     } catch {
       // Clipboard failures leave the copied state unchanged.
     }
-  }, [code, onCopy, announce, t]);
+  }, [code, onCopy, announce]);
 
   const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
   // Digits in the largest line number — sizes the gutter column width.