@astryxdesign/core 0.2.0-canary.f306f13 → 0.2.0-canary.fc53ff7

package/src/RadioList/RadioList.test.tsx

@@ -14,6 +14,7 @@ import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {RadioList} from './RadioList';
 import {RadioListItem} from './RadioListItem';
+import {getForcedColorsRules} from '../__tests__/forcedColors';
 
 // Mock showPopover/hidePopover (not implemented in jsdom) so the tooltip layer
 // reflects its open state via a `popover-open` attribute the tests can assert.
@@ -580,7 +581,11 @@ describe('RadioList', () => {
     it('submits the selected value under htmlName', () => {
       const {container} = render(
         <form>
-          <RadioList label="Preference" htmlName="pref" value="b" onChange={() => {}}>
+          <RadioList
+            label="Preference"
+            htmlName="pref"
+            value="b"
+            onChange={() => {}}>
             <RadioListItem label="Option A" value="a" />
             <RadioListItem label="Option B" value="b" />
           </RadioList>
@@ -599,13 +604,14 @@ describe('RadioList', () => {
             value="a"
             onChange={() => {}}
             isDisabled
-            disabledMessage="Locked"
-          >
+            disabledMessage="Locked">
             <RadioListItem label="Option A" value="a" />
           </RadioList>
         </form>,
       );
-      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
     });
 
     it('keeps working as an isolated group when htmlName is omitted', () => {
@@ -642,3 +648,19 @@ describe('RadioList', () => {
     });
   });
 });
+
+// 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 selected dot survives Windows High Contrast', () => {
+    render(
+      <RadioList label="Preference" value="a" onChange={() => {}}>
+        <RadioListItem label="Option A" value="a" />
+      </RadioList>,
+    );
+    // The painted inner dot would be stripped to Canvas (invisible), making
+    // checked and unchecked radios identical; CanvasText keeps it perceivable.
+    expect(getForcedColorsRules()).toContain('background-color: canvastext;');
+  });
+});

package/src/RadioList/RadioListItem.tsx

@@ -119,7 +119,14 @@ const styles = stylex.create({
   },
   innerDot: {
     borderRadius: '50%',
-    backgroundColor: colorVars['--color-on-accent'],
+    backgroundColor: {
+      default: colorVars['--color-on-accent'],
+      // Forced colors (Windows High Contrast) strips painted backgrounds,
+      // which would make the selected dot invisible — checked and unchecked
+      // radios would look identical. CanvasText keeps the dot perceivable on
+      // the Canvas circle fill (WCAG 1.4.11).
+      '@media (forced-colors: active)': 'CanvasText',
+    },
   },
   labelDisabled: {
     color: colorVars['--color-text-disabled'],

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -14,6 +14,10 @@ import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {SegmentedControl} from './SegmentedControl';
 import {SegmentedControlItem} from './SegmentedControlItem';
+import {
+  getAllInjectedCss,
+  getForcedColorsRules,
+} from '../__tests__/forcedColors';
 
 // Mock showPopover/hidePopover (not implemented in jsdom) so the tooltip layer
 // reflects its open state via a `popover-open` attribute the tests can assert.
@@ -780,3 +784,27 @@ describe('SegmentedControl container handler forwarding', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so these assert that the
+// compiled output includes the forced-colors rules; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles forced-colors overrides so the selected segment survives Windows High Contrast', () => {
+    render(
+      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" />
+      </SegmentedControl>,
+    );
+    const css = getForcedColorsRules();
+    // The painted surface fill and shadow are stripped; Highlight/
+    // HighlightText marks the selected segment.
+    expect(css).toContain('background-color: highlight;');
+    expect(css).toContain('color: highlighttext;');
+    // The segment is a <button>; without opting out of UA remapping it keeps
+    // the native ButtonFace surface and ignores the Highlight fill, leaving
+    // HighlightText text on a white surface. forced-color-adjust: none makes
+    // both render as authored.
+    expect(getAllInjectedCss()).toContain('forced-color-adjust: none;');
+  });
+});

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -103,9 +103,27 @@ const styles = stylex.create({
     },
   },
   selected: {
-    color: colorVars['--color-text-primary'],
+    // Forced colors (Windows High Contrast) strips the painted surface fill
+    // and box shadow, which would leave the selected segment with no state
+    // indication beyond font weight. Highlight/HighlightText is the platform
+    // convention for a selected item (WCAG 1.4.11).
+    //
+    // forced-color-adjust must be `none` here: the segment is a <button>, and
+    // the UA keeps native form-control colors (ButtonFace surface) for it under
+    // forced colors, ignoring the authored Highlight fill — the label kept its
+    // HighlightText color, giving white text on a white surface. Opting the
+    // selected segment out of UA remapping makes both the Highlight surface and
+    // the HighlightText label render as authored, restoring figure-ground.
+    forcedColorAdjust: 'none',
+    color: {
+      default: colorVars['--color-text-primary'],
+      '@media (forced-colors: active)': 'HighlightText',
+    },
     fontWeight: fontWeightVars['--font-weight-semibold'],
-    backgroundColor: colorVars['--color-background-surface'],
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'Highlight',
+    },
     boxShadow: shadowVars['--shadow-low'],
   },
   disabled: {

package/src/Selector/Selector.test.tsx

@@ -613,6 +613,28 @@ describe('Selector', () => {
       expect(within(listbox).getByText('No results found')).toBeInTheDocument();
     });
 
+    it('empty-state message is not exposed as a listbox child', async () => {
+      const user = userEvent.setup();
+      render(
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          value="Apple"
+          onChange={() => {}}
+          hasSearch
+        />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Fruit'}));
+      await user.type(screen.getByRole('combobox', h), 'xyz');
+
+      // role="listbox" only permits option/group children — the visual
+      // empty-state message must be presentational (it is announced through
+      // the result-count live region instead).
+      const listbox = screen.getByRole('listbox', h);
+      const empty = within(listbox).getByText('No results found');
+      expect(empty).toHaveAttribute('role', 'presentation');
+    });
+
     it('calls onChange when selecting a filtered option', async () => {
       const user = userEvent.setup();
       const onChange = vi.fn();

package/src/Selector/Selector.tsx

@@ -963,8 +963,15 @@ export function Selector<T extends SelectorOptionType>(
 
     // Nothing matched across every group/option: show the empty state.
     if (isSearching && filteredItems.length === 0) {
+      // role="presentation" keeps the message out of the listbox's
+      // accessibility tree (role="listbox" only permits option/group
+      // children); the no-results outcome is announced via the
+      // result-count live region instead.
       return [
-        <div key="empty" {...stylex.props(styles.emptyState)}>
+        <div
+          key="empty"
+          role="presentation"
+          {...stylex.props(styles.emptyState)}>
           No results found
         </div>,
       ];

package/src/Skeleton/Skeleton.test.tsx

@@ -3,6 +3,7 @@
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Skeleton} from './Skeleton';
+import {getForcedColorsRules} from '../__tests__/forcedColors';
 
 describe('Skeleton', () => {
   it('renders a placeholder element', () => {
@@ -23,3 +24,18 @@ describe('Skeleton', () => {
     expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'false');
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so these assert that the
+// compiled output includes the forced-colors rules; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles forced-colors overrides so the placeholder stays visible under Windows High Contrast', () => {
+    render(<Skeleton width={200} height={20} data-testid="sk" />);
+    const css = getForcedColorsRules();
+    // The painted fill is stripped to Canvas (invisible); GrayText is a
+    // system color, so it survives forcing.
+    expect(css).toContain('background-color: graytext;');
+    // The resting 0.25 opacity is lifted so the static placeholder reads.
+    expect(css).toContain('opacity: 1;');
+  });
+});

package/src/Skeleton/Skeleton.tsx

@@ -55,8 +55,20 @@ const styles = stylex.create({
     backgroundColor: {
       default: colorVars['--color-skeleton'],
       '@media (prefers-contrast: more)': `color-mix(in srgb, ${colorVars['--color-skeleton']}, ${colorVars['--color-text-primary']} 30%)`,
+      // Forced colors (Windows High Contrast) strips painted backgrounds,
+      // which would make the placeholder invisible. GrayText is a system
+      // color, so it survives forcing and keeps the placeholder visible
+      // (WCAG 1.4.11). Listed after prefers-contrast so it wins when both
+      // media features are active.
+      '@media (forced-colors: active)': 'GrayText',
+    },
+    opacity: {
+      default: 0.25,
+      // The resting 0.25 opacity would render GrayText nearly invisible on
+      // Canvas; full opacity keeps the static placeholder perceivable (the
+      // fade animation still pulses when motion is allowed).
+      '@media (forced-colors: active)': 1,
     },
-    opacity: 0.25,
   },
   animate: {
     animationDirection: 'alternate',

package/src/Switch/Switch.test.tsx

@@ -13,6 +13,10 @@ 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 {Switch} from './Switch';
+import {
+  getAllInjectedCss,
+  getForcedColorsRules,
+} from '../__tests__/forcedColors';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 afterEach(() => {
@@ -729,3 +733,36 @@ describe('Switch', () => {
     });
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so these assert that the
+// compiled output includes the forced-colors rules; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles forced-colors overrides so on/off state survives Windows High Contrast', () => {
+    render(<Switch label="Notifications" value={true} onChange={() => {}} />);
+    const css = getForcedColorsRules();
+    // Track outline (backgrounds are stripped; the border keeps the bounds).
+    expect(css).toContain('border-color: canvastext;');
+    // Off track stays empty; on track uses the selection color.
+    expect(css).toContain('background-color: canvas;');
+    expect(css).toContain('background-color: highlight;');
+    // Thumb fill per state.
+    expect(css).toContain('background-color: canvastext;');
+    expect(css).toContain('background-color: highlighttext;');
+    // Disabled affordance (opacity dimming does not survive forcing).
+    expect(css).toContain('border-color: graytext;');
+  });
+
+  it('gates the hover tint out of forced colors so the thumb stays visible on hover', () => {
+    render(<Switch label="Notifications" value={true} onChange={() => {}} />);
+    // The ancestor-hover tint is a non-system color-mix whose rule outranks the
+    // plain forced-colors track rule. It is gated behind `forced-colors: none`
+    // so it cannot reassert on hover and flatten the Highlight track to white
+    // under the HighlightText thumb (white-on-white).
+    expect(getAllInjectedCss()).toContain(
+      '(hover: hover) and (forced-colors: none)',
+    );
+    // And the tint never leaks into the forced-colors output.
+    expect(getForcedColorsRules()).not.toContain('color-mix');
+  });
+});

package/src/Switch/Switch.tsx

@@ -173,6 +173,21 @@ const styles = stylex.create({
     },
     transitionTimingFunction: easeVars['--ease-standard'],
     boxSizing: 'border-box',
+    // Forced colors (Windows High Contrast) strips painted backgrounds, which
+    // would leave the track invisible. A system-color border keeps the
+    // control's bounds perceivable (WCAG 1.4.11).
+    borderWidth: {
+      default: 0,
+      '@media (forced-colors: active)': '1px',
+    },
+    borderStyle: {
+      default: 'none',
+      '@media (forced-colors: active)': 'solid',
+    },
+    borderColor: {
+      default: null,
+      '@media (forced-colors: active)': 'CanvasText',
+    },
   },
   trackFocus: {
     outline: {
@@ -189,21 +204,39 @@ const styles = stylex.create({
   trackOff: {
     backgroundColor: {
       default: colorVars['--color-background-gray'],
+      // Off = empty (Canvas) track; on = Highlight track, so the two states
+      // stay distinguishable under forced colors.
+      '@media (forced-colors: active)': 'Canvas',
+      // The ancestor-hover tint is a non-system color-mix, and its rule
+      // outranks the plain forced-colors rule above. Left ungated it would
+      // reassert on hover under forced colors, where the UA flattens the
+      // color-mix back to Canvas — so the HighlightText thumb would sit on a
+      // white track (white-on-white). Gating on `forced-colors: none` keeps
+      // the tint out of forced colors and lets the system-color track stand.
       [stylex.when.ancestor(':hover', switchScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-background-gray']}, ${colorVars['--color-tint-hover']} 5%)`,
+        '@media (hover: hover) and (forced-colors: none)': `color-mix(in srgb, ${colorVars['--color-background-gray']}, ${colorVars['--color-tint-hover']} 5%)`,
       },
     },
   },
   trackOn: {
     backgroundColor: {
       default: colorVars['--color-accent'],
+      '@media (forced-colors: active)': 'Highlight',
+      // See trackOff: gate the hover tint out of forced colors so it cannot
+      // flatten the Highlight track to white under the HighlightText thumb.
       [stylex.when.ancestor(':hover', switchScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
+        '@media (hover: hover) and (forced-colors: none)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
       },
     },
   },
   trackDisabled: {
     opacity: 0.5,
+    // Opacity dimming does not survive forced colors; GrayText is the
+    // platform's disabled affordance there.
+    borderColor: {
+      default: null,
+      '@media (forced-colors: active)': 'GrayText',
+    },
   },
   trackDisabledOff: {
     backgroundColor: colorVars['--color-background-gray'],
@@ -213,7 +246,6 @@ const styles = stylex.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: radiusVars['--radius-full'],
-    backgroundColor: colorVars['--color-background-surface'],
     transitionProperty: 'transform, width, height',
     transitionDuration: {
       default: durationVars['--duration-fast'],
@@ -221,6 +253,22 @@ const styles = stylex.create({
     },
     transitionTimingFunction: easeVars['--ease-standard'],
   },
+  // The thumb fill lives on the on/off styles (not the shared thumb style)
+  // because forced colors needs a per-state system color: CanvasText on the
+  // empty off track, HighlightText on the Highlight on track. Sizing stays in
+  // thumbOffSizeStyles/thumbOnSizeStyles; only the fill is state-dependent.
+  thumbOff: {
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'CanvasText',
+    },
+  },
+  thumbOn: {
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'HighlightText',
+    },
+  },
   labelWrapper: {
     display: 'flex',
     flexDirection: 'column',
@@ -537,6 +585,7 @@ export function Switch({
             stylex.props(
               styles.thumb,
               isOn ? thumbOnSizeStyles[size] : thumbOffSizeStyles[size],
+              isOn ? styles.thumbOn : styles.thumbOff,
             ),
           )}>
           {isBusy && <Spinner size="sm" />}

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

@@ -9,6 +9,7 @@ import {
   useTableRowExpansion,
   useTableRowExpansionState,
 } from './useTableRowExpansion';
+import {InternationalizationProvider} from '../../../i18n';
 
 // popover mock for context-menu tests
 beforeEach(() => {
@@ -118,6 +119,24 @@ describe('useTableRowExpansion', () => {
     expect(items.length).toBeGreaterThan(0);
   });
 
+  it('localizes the context-menu action label through the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {'@astryx.tableRowExpansion.expandRow': 'Développer la ligne'},
+        }}>
+        <Harness />
+      </InternationalizationProvider>,
+    );
+    fireEvent.contextMenu(screen.getByText('Folder A'));
+    const items = screen.getAllByRole('menuitem', {
+      name: /Développer la ligne/,
+      hidden: true,
+    });
+    expect(items.length).toBeGreaterThan(0);
+  });
+
   it('does not show chevron for leaf nodes', () => {
     render(<Harness />);
     // Leaf C has no children

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

@@ -576,7 +576,9 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
             {
               id: 'row-expansion-toggle',
               group: 'row-expansion',
-              label: isExpanded ? 'Collapse row' : 'Expand row',
+              label: isExpanded
+                ? t('@astryx.tableRowExpansion.collapseRow')
+                : t('@astryx.tableRowExpansion.expandRow'),
               icon: (
                 <span {...stylex.props(rtlStyles.mirror)}>
                   <Icon

package/src/Thumbnail/Thumbnail.tsx

@@ -39,11 +39,11 @@ import {Skeleton} from '../Skeleton';
 import {Spinner} from '../Spinner';
 import {Tooltip} from '../Tooltip/Tooltip';
 import {useDevWarning} from '../hooks/useDevWarning';
+import {useContainerReveal} from '../hooks/useContainerReveal';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
-import {thumbnailScope} from './thumbnail.markers.stylex';
 
 export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
@@ -236,28 +236,6 @@ const styles = stylex.create({
     zIndex: 1,
     lineHeight: 0,
   },
-  // showRemoveOn="hover": the remove button is hidden at rest and revealed
-  // when the thumbnail is hovered or when focus enters it (keyboard). Only
-  // opacity is animated — the button stays mounted and focusable so tabbing
-  // to it triggers the :focus-within reveal. Any touch-capable device (incl.
-  // hybrid laptops that also report hover) keeps the button visible so the
-  // remove path is never gated behind an unavailable hover.
-  removeOnHover: {
-    opacity: {
-      default: 0,
-      [stylex.when.ancestor(':hover', thumbnailScope)]: {
-        '@media (hover: hover)': 1,
-      },
-      [stylex.when.ancestor(':focus-within', thumbnailScope)]: 1,
-      '@media (any-pointer: coarse)': 1,
-    },
-    transitionProperty: 'opacity',
-    transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
-    },
-    transitionTimingFunction: easeVars['--ease-standard'],
-  },
 });
 
 // =============================================================================
@@ -326,6 +304,9 @@ export function Thumbnail({
   const isInteractive = onClick != null && !isDisabled && !isLoading;
   const hasRemove = onRemove != null && !isDisabled;
   const isHoverReveal = hasRemove && showRemoveOn === 'hover';
+  const {getContainerProps, getContentRevealProps} = useContainerReveal({
+    isEnabled: isHoverReveal,
+  });
   const accessibleName =
     label && alt
       ? `${label} — ${alt}`
@@ -377,9 +358,12 @@ export function Thumbnail({
 
   const removeButtonEl = hasRemove ? (
     <div
-      {...stylex.props(
-        styles.removeSlot,
-        isHoverReveal && styles.removeOnHover,
+      {...mergeProps(
+        stylex.props(styles.removeSlot),
+        // The remove button is absolutely positioned in the corner, so it is
+        // already out of flow — an opacity-only reveal (layout preserved)
+        // matches its overlay placement instead of the clip recipe.
+        isHoverReveal ? getContentRevealProps({isLayoutPreserved: true}) : {},
       )}>
       <Button
         icon={<Icon icon="close" size="xsm" />}
@@ -410,12 +394,14 @@ export function Thumbnail({
       )}
       {...props}>
       <div
-        {...stylex.props(
-          styles.imageContainer,
-          isHoverReveal && thumbnailScope,
-          isInteractive && styles.interactive,
-          isInteractive && styles.overlay,
-          isInteractive && styles.hoverOnPointer,
+        {...mergeProps(
+          stylex.props(
+            styles.imageContainer,
+            isInteractive && styles.interactive,
+            isInteractive && styles.overlay,
+            isInteractive && styles.hoverOnPointer,
+          ),
+          isHoverReveal ? getContainerProps() : {},
         )}>
         {isInteractive ? (
           <button