@astryxdesign/core 0.1.9 → 0.2.0-canary.136a00f

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(() => {
@@ -68,6 +72,28 @@ describe('Switch', () => {
     expect(screen.getByRole('switch')).toBeChecked();
   });
 
+  it('renders with custom size prop (sm / md)', () => {
+    const {rerender} = render(
+      <Switch
+        label="Small switch"
+        value={false}
+        size="sm"
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+
+    rerender(
+      <Switch
+        label="Medium switch"
+        value={false}
+        size="md"
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
   it('calls onChange with new checked state when clicked', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
@@ -636,6 +662,58 @@ describe('Switch', () => {
     });
   });
 
+  describe('RTL thumb travel direction', () => {
+    // StyleX injects atomic rules into the document; scan them so we can assert
+    // the direction-aware transform without relying on jsdom to resolve the
+    // `:is([dir="rtl"] *)` descendant selector against computed style.
+    function injectedCss(): string {
+      let out = '';
+      for (const sheet of Array.from(document.styleSheets)) {
+        try {
+          for (const rule of Array.from(sheet.cssRules)) {
+            out += rule.cssText + '\n';
+          }
+        } catch {
+          // ignore cross-origin sheets
+        }
+      }
+      out += Array.from(document.querySelectorAll('style'))
+        .map(s => s.textContent || '')
+        .join('\n');
+      return out;
+    }
+
+    it('applies a distinct thumb style when on vs off (on-travel is wired)', () => {
+      const on = render(<Switch label="On" value={true} onChange={() => {}} />);
+      const off = render(
+        <Switch label="Off" value={false} onChange={() => {}} />,
+      );
+      const onThumb = on.container.querySelector(
+        '[class*="thumbOnSizeStyles"]',
+      );
+      const offThumb = off.container.querySelector(
+        '[class*="thumbOffSizeStyles"]',
+      );
+      expect(onThumb).not.toBeNull();
+      expect(offThumb).not.toBeNull();
+      expect(onThumb!.getAttribute('class')).not.toBe(
+        offThumb!.getAttribute('class'),
+      );
+    });
+
+    it('mirrors the on-state thumb travel under RTL (negative translateX)', () => {
+      render(<Switch label="Toggle" value={true} onChange={() => {}} />);
+      const css = injectedCss();
+      // LTR on-travel moves the thumb toward the physical right (positive px).
+      expect(css).toMatch(/transform:\s*translateX\(1[24]px\)/);
+      // RTL mirrors it: the on-thumb lands on the inline-end (physical left)
+      // side, so the travel flips sign, scoped to `[dir="rtl"]`.
+      expect(css).toMatch(
+        /:is\(\[dir="rtl"\][^)]*\)[^{]*\{\s*transform:\s*translateX\(-1[24]px\)/,
+      );
+    });
+  });
+
   describe('rest forwarding', () => {
     it('forwards data-testid, id, and aria-* to the root element', () => {
       const {container} = render(
@@ -655,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

@@ -47,17 +47,86 @@ import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
 
-// Fixed dimensions: 40px width, 24px height, 16px thumb (off), 20px thumb (on)
-const SWITCH_WIDTH = 40;
-const SWITCH_HEIGHT = 24;
-const THUMB_SIZE_OFF = 16;
-const THUMB_SIZE_ON = 20;
-const TRACK_PADDING = 4;
-// Padding between thumb right edge and track inner edge when on
-const ON_RIGHT_PADDING = 2;
-// Travel distance for on state: positions thumb with ON_RIGHT_PADDING from right edge
-const THUMB_TRAVEL_ON =
-  SWITCH_WIDTH - TRACK_PADDING - THUMB_SIZE_ON - ON_RIGHT_PADDING;
+const wrapperSizeStyles = stylex.create({
+  sm: {
+    width: 32,
+    height: 20,
+  },
+  md: {
+    width: 40,
+    height: 24,
+  },
+});
+
+const inputSizeStyles = stylex.create({
+  sm: {
+    width: 32,
+    height: 20,
+  },
+  md: {
+    width: 40,
+    height: 24,
+  },
+});
+
+const trackSizeStyles = stylex.create({
+  sm: {
+    width: 32,
+    height: 20,
+    padding: 2,
+  },
+  md: {
+    width: 40,
+    height: 24,
+    padding: 4,
+  },
+});
+
+const thumbOffSizeStyles = stylex.create({
+  sm: {
+    width: 14,
+    height: 14,
+    transform: 'translateX(0)',
+  },
+  md: {
+    width: 16,
+    height: 16,
+    transform: 'translateX(0)',
+  },
+});
+
+const thumbOnSizeStyles = stylex.create({
+  sm: {
+    width: 16,
+    height: 16,
+    // The thumb rests at the inline-start edge (flex-start, which flexbox
+    // already mirrors under RTL). The on-state travel toward the inline-end
+    // edge is a physical translateX, so it must flip sign under RTL — right
+    // in LTR, left in RTL — so the switch mirrors per convention (Material,
+    // iOS): off-thumb on the reading-start side, on-thumb on the reading-end.
+    transform: {
+      default: 'translateX(12px)',
+      ':is([dir="rtl"] *)': 'translateX(-12px)',
+    },
+  },
+  md: {
+    width: 20,
+    height: 20,
+    transform: {
+      default: 'translateX(14px)',
+      ':is([dir="rtl"] *)': 'translateX(-14px)',
+    },
+  },
+});
+
+const labelWrapperSizeStyles = stylex.create({
+  sm: {
+    minHeight: 20,
+  },
+  md: {
+    minHeight: 24,
+  },
+});
 
 const styles = stylex.create({
   container: {
@@ -77,8 +146,6 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     flexShrink: 0,
-    width: SWITCH_WIDTH,
-    height: SWITCH_HEIGHT,
     isolation: 'isolate',
   },
   input: {
@@ -88,8 +155,6 @@ const styles = stylex.create({
     opacity: 0,
     cursor: 'pointer',
     zIndex: 1,
-    width: SWITCH_WIDTH,
-    height: SWITCH_HEIGHT,
   },
   inputDisabled: {
     cursor: 'not-allowed',
@@ -100,9 +165,6 @@ const styles = stylex.create({
   track: {
     display: 'flex',
     alignItems: 'center',
-    width: SWITCH_WIDTH,
-    height: SWITCH_HEIGHT,
-    padding: TRACK_PADDING,
     borderRadius: radiusVars['--radius-full'],
     transitionProperty: 'background-color',
     transitionDuration: {
@@ -111,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: {
@@ -127,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'],
@@ -151,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'],
@@ -159,22 +253,27 @@ 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: {
-    width: THUMB_SIZE_OFF,
-    height: THUMB_SIZE_OFF,
-    transform: 'translateX(0)',
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'CanvasText',
+    },
   },
   thumbOn: {
-    width: THUMB_SIZE_ON,
-    height: THUMB_SIZE_ON,
-    transform: `translateX(${THUMB_TRAVEL_ON}px)`,
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'HighlightText',
+    },
   },
   labelWrapper: {
     display: 'flex',
     flexDirection: 'column',
     gap: spacingVars['--spacing-0-5'],
     justifyContent: 'center',
-    minHeight: SWITCH_HEIGHT,
   },
   description: {
     fontFamily: typographyVars['--font-family-body'],
@@ -313,6 +412,13 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
    * When set with a message, displays a colored message box below the switch.
    */
   status?: InputStatus;
+  /**
+   * Size variant controlling track and thumb dimensions.
+   * - 'sm': 34x20px (matches sm checkbox/radio vertical rhythm)
+   * - 'md': 40x24px (default, matches md checkbox/radio vertical rhythm)
+   * @default 'md'
+   */
+  size?: 'sm' | 'md';
 }
 
 // Dynamic field width (number -> px, string used as-is).
@@ -358,6 +464,7 @@ export function Switch({
   labelPosition = 'end',
   labelSpacing = 'hug',
   status,
+  size = 'md',
   width,
   xstyle,
   className,
@@ -410,7 +517,7 @@ export function Switch({
     describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
 
   const switchElement = (
-    <div {...stylex.props(styles.switchWrapper)}>
+    <div {...stylex.props(styles.switchWrapper, wrapperSizeStyles[size])}>
       <input
         ref={mergeRefs(ref, disabledMessageTooltip.positionRef)}
         id={id}
@@ -447,6 +554,7 @@ export function Switch({
         aria-busy={isBusy || undefined}
         {...stylex.props(
           styles.input,
+          inputSizeStyles[size],
           isDisabled && styles.inputDisabled,
           isBusy && styles.inputBusy,
         )}
@@ -457,9 +565,11 @@ export function Switch({
           themeProps('switch', {
             checked: isOn ? 'checked' : null,
             disabled: isDisabled ? 'disabled' : null,
+            size,
           }),
           stylex.props(
             styles.track,
+            trackSizeStyles[size],
             isOn ? styles.trackOn : styles.trackOff,
             !isDisabled && styles.trackFocus,
             isDisabled && styles.trackDisabled,
@@ -468,8 +578,15 @@ export function Switch({
         )}>
         <div
           {...mergeProps(
-            themeProps('switch-thumb', {checked: isOn ? 'checked' : null}),
-            stylex.props(styles.thumb, isOn ? styles.thumbOn : styles.thumbOff),
+            themeProps('switch-thumb', {
+              checked: isOn ? 'checked' : null,
+              size,
+            }),
+            stylex.props(
+              styles.thumb,
+              isOn ? thumbOnSizeStyles[size] : thumbOffSizeStyles[size],
+              isOn ? styles.thumbOn : styles.thumbOff,
+            ),
           )}>
           {isBusy && <Spinner size="sm" />}
         </div>
@@ -479,7 +596,7 @@ export function Switch({
   );
 
   const labelElement = (
-    <div {...stylex.props(styles.labelWrapper)}>
+    <div {...stylex.props(styles.labelWrapper, labelWrapperSizeStyles[size])}>
       <FieldLabel
         label={label}
         inputID={id}

package/src/TabList/Tab.tsx

@@ -143,8 +143,8 @@ const styles = stylex.create({
     // with a bottom divider — that ancestor sets `--_tab-indicator-bottom`
     // to drop the indicator onto the rail beneath the reserved gap.
     bottom: 'var(--_tab-indicator-bottom, -1px)',
-    left: spacingVars['--spacing-3'],
-    right: spacingVars['--spacing-3'],
+    insetInlineStart: spacingVars['--spacing-3'],
+    insetInlineEnd: spacingVars['--spacing-3'],
     height: '2px',
     borderRadius: radiusVars['--radius-full'],
     pointerEvents: 'none',

package/src/TabList/TabList.doc.mjs

@@ -55,12 +55,6 @@ export const docs = {
       description: 'Whether to show a bottom border divider under the tab list.',
       default: 'false',
     },
-    {
-      name: 'orientation',
-      type: "'horizontal' | 'vertical'",
-      description: "Orientation of the tab strip, controlling which arrow keys move focus between tabs and the reported aria-orientation. 'horizontal': ArrowLeft/ArrowRight. 'vertical': ArrowUp/ArrowDown. Both axes' arrows are accepted regardless.",
-      default: "'horizontal'",
-    },
     {
       name: 'children',
       type: 'ReactNode',

package/src/TabList/TabList.test.tsx

@@ -77,10 +77,9 @@ describe('TabList', () => {
 
   it('does not set aria-orientation on the nav (invalid for role navigation)', () => {
     // Regression: aria-orientation is not an allowed attribute on the
-    // navigation role and produces an axe aria-allowed-attr violation. The
-    // `orientation` prop must drive keyboard/hint behavior without emitting
-    // this attribute, regardless of the value passed.
-    const {rerender} = render(
+    // navigation role and produces an axe aria-allowed-attr violation.
+    // TabList deliberately never sets this attribute.
+    render(
       <TabList value="home" onChange={() => {}}>
         <Tab value="home" label="Home" />
         <Tab value="settings" label="Settings" />
@@ -90,17 +89,6 @@ describe('TabList', () => {
     expect(screen.getByRole('navigation')).not.toHaveAttribute(
       'aria-orientation',
     );
-
-    rerender(
-      <TabList value="home" onChange={() => {}} orientation="vertical">
-        <Tab value="home" label="Home" />
-        <Tab value="settings" label="Settings" />
-      </TabList>,
-    );
-
-    expect(screen.getByRole('navigation')).not.toHaveAttribute(
-      'aria-orientation',
-    );
   });
 
   it('ignores a consumer-supplied aria-orientation on the nav', () => {

package/src/TabList/TabList.tsx

@@ -22,7 +22,7 @@ import * as stylex from '@stylexjs/stylex';
 import {borderVars, colorVars, spacingVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {TabListContext} from './TabListContext';
-import type {TabListOrientation, TabListSize} from './TabListContext';
+import type {TabListSize} from './TabListContext';
 import {useSize} from '../SizeContext/SizeContext';
 import {mergeProps, mergeRefs} from '../utils';
 import {useListFocus} from '../hooks/useListFocus';
@@ -66,15 +66,6 @@ export interface TabListProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
    * @default false
    */
   hasDivider?: boolean;
-  /**
-   * Orientation of the tab strip, controlling which arrow keys move
-   * focus between tabs.
-   * - `'horizontal'` (default): ArrowLeft / ArrowRight (ArrowUp / ArrowDown
-   *   also work per the WAI-ARIA APG).
-   * - `'vertical'`: ArrowUp / ArrowDown (ArrowLeft / ArrowRight also work).
-   * @default 'horizontal'
-   */
-  orientation?: TabListOrientation;
   /**
    * Tab and TabMenu children.
    */
@@ -130,7 +121,6 @@ export function TabList({
   size: sizeProp,
   layout = 'hug',
   hasDivider = false,
-  orientation = 'horizontal',
   xstyle,
   className,
   style,
@@ -150,14 +140,13 @@ export function TabList({
   // Roving-tabindex keyboard navigation across the tab strip via the shared
   // hook. `orientation: 'both'` accepts both arrow axes per the WAI-ARIA APG
   // allowance for tab strips (ArrowRight/ArrowDown advance, ArrowLeft/ArrowUp
-  // retreat) regardless of the component's `orientation` prop, which only
-  // drives the keyboard hint badge (see useKeyboardHint below). We do not set
-  // `aria-orientation` on the `<nav>`: that attribute is invalid on the
-  // navigation role and triggers an axe `aria-allowed-attr` violation.
+  // retreat). We do not set `aria-orientation` on the `<nav>`: that attribute
+  // is invalid on the navigation role and triggers an axe `aria-allowed-attr`
+  // violation.
   //
   // `hasRovingTabIndex` makes the hook own the single tab stop: it stamps
   // tabindex 0/-1, repairs the stop on mount and as stops mount/unmount or
-  // toggle disabled, and — via `handleFocus` on the nav — keeps the stop in
+  // toggle disabled, and -- via `handleFocus` on the nav -- keeps the stop in
   // sync after clicks or programmatic focus. Individual Tabs still render
   // `tabIndex={isSelected ? 0 : -1}` (see Tab.tsx) as the initial source of
   // truth; the hook's repair preserves an existing tab stop and only promotes
@@ -173,7 +162,7 @@ export function TabList({
     onKeyDown: onHintKeyDown,
     onFocus: onHintFocus,
     onBlur: onHintBlur,
-  } = useKeyboardHint({orientation});
+  } = useKeyboardHint();
 
   const contextValue = useMemo(
     () => ({value, onChange, size, layout}),

package/src/TabList/TabListContext.ts

@@ -26,12 +26,6 @@ export type TabListSize = 'sm' | 'md' | 'lg';
  */
 export type TabListLayout = 'hug' | 'fill';
 
-/**
- * Orientation of the tab strip. Controls which arrow keys move focus
- * between tabs and the reported `aria-orientation`.
- */
-export type TabListOrientation = 'horizontal' | 'vertical';
-
 /**
  * Context for communicating value/onChange/size/layout from TabList to children.
  */

package/src/TabList/TabMenu.tsx

@@ -126,8 +126,8 @@ const styles = stylex.create({
     // drops onto the divider rail when an ancestor (TabList `hasDivider` or a
     // Toolbar with a bottom divider) sets `--_tab-indicator-bottom`.
     bottom: 'var(--_tab-indicator-bottom, -1px)',
-    left: spacingVars['--spacing-3'],
-    right: spacingVars['--spacing-3'],
+    insetInlineStart: spacingVars['--spacing-3'],
+    insetInlineEnd: spacingVars['--spacing-3'],
     height: '2px',
     borderRadius: radiusVars['--radius-full'],
     pointerEvents: 'none',

package/src/Table/BaseTable.tsx

@@ -134,6 +134,12 @@ interface TableRowProps<T extends Record<string, unknown>> {
   textOverflow: 'wrap' | 'truncate';
   RowComponent: React.ComponentType<TableRowComponentProps>;
   CellComponent: React.ComponentType<TableCellComponentProps>;
+  /**
+   * 1-based ARIA row index for this row's position in the full dataset.
+   * `undefined` when the table hasn't opted into ARIA row indexing, in which
+   * case no `aria-rowindex` is emitted (native table semantics).
+   */
+  ariaRowIndex?: number;
 }
 
 /**
@@ -150,6 +156,7 @@ function TableRowInner<T extends Record<string, unknown>>({
   textOverflow,
   RowComponent,
   CellComponent,
+  ariaRowIndex,
 }: TableRowProps<T>): ReactElement {
   // Build cells first
   const cells = columns.map((col, columnIndex) => {
@@ -211,12 +218,14 @@ function TableRowInner<T extends Record<string, unknown>>({
     );
   });
 
-  // Apply plugin transforms for row (with pre-rendered children)
+  // Apply plugin transforms for row (with pre-rendered children).
+  // Seed `aria-rowindex` (when the table opts into ARIA row indexing) as a
+  // base htmlProp so plugins compose over it and can still override.
   const rowRenderProps = applyPlugins(
     plugins,
     p => p.transformBodyRow,
     {
-      htmlProps: {},
+      htmlProps: ariaRowIndex == null ? {} : {'aria-rowindex': ariaRowIndex},
       xstyle: [],
       children: <>{cells}</>,
     } satisfies BodyRowRenderProps,
@@ -256,6 +265,9 @@ function areRowPropsEqual<T extends Record<string, unknown>>(
   if (prevProps.rowIndex !== nextProps.rowIndex) {
     return false;
   }
+  if (prevProps.ariaRowIndex !== nextProps.ariaRowIndex) {
+    return false;
+  }
 
   if (prevProps.columns !== nextProps.columns) {
     return false;
@@ -323,6 +335,8 @@ function BaseTableInner<T extends Record<string, unknown>>({
   textOverflow = 'wrap',
   scrollWrapper: ScrollWrapper,
   emptyState,
+  rowIndexStart,
+  rowCount,
   xstyle,
   className,
   style,
@@ -333,6 +347,18 @@ function BaseTableInner<T extends Record<string, unknown>>({
   // Use stable empty array when no plugins provided
   const plugins = pluginsProp ?? (EMPTY_PLUGINS as TablePlugin<T>[]);
 
+  // ARIA row indexing. The row ordinal is an accessibility concern that is
+  // independent of any visible index column: when the consumer opts in (by
+  // passing rowIndexStart or rowCount), body rows carry `aria-rowindex`
+  // reflecting their position in the full dataset, and the <table> carries
+  // `aria-rowcount`. `aria-rowindex` is 1-based and counts data rows from
+  // `rowIndexStart` (default 1); a windowed/paginated view passes the offset
+  // of its first visible row. `aria-rowcount` is `rowCount` when known, or
+  // `-1` (ARIA's "unknown count") for a windowed view with an unknown total.
+  const ariaRowIndexingEnabled = rowIndexStart != null || rowCount != null;
+  const firstRowAriaIndex = rowIndexStart ?? 1;
+  const ariaRowCount = ariaRowIndexingEnabled ? (rowCount ?? -1) : undefined;
+
   const RowComponent = TableRow as React.ComponentType<TableRowComponentProps>;
   const CellComponent =
     TableCell as React.ComponentType<TableCellComponentProps>;
@@ -486,6 +512,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
   let tableElement: ReactNode = (
     <table
       ref={ref}
+      {...(ariaRowCount != null ? {'aria-rowcount': ariaRowCount} : null)}
       {...tableRenderProps.htmlProps}
       {...mergeProps(
         themeProps('base-table'),
@@ -530,6 +557,11 @@ function BaseTableInner<T extends Record<string, unknown>>({
                       textOverflow={textOverflow}
                       RowComponent={RowComponent}
                       CellComponent={CellComponent}
+                      ariaRowIndex={
+                        ariaRowIndexingEnabled
+                          ? firstRowAriaIndex + rowIndex
+                          : undefined
+                      }
                     />
                   );
                 })