@astryxdesign/core 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

package/src/Grid/Grid.test.tsx

@@ -65,7 +65,7 @@ describe('Grid', () => {
     expect(templateColumns(grid)).toBe('repeat(auto-fill, minmax(250px, 1fr))');
   });
 
-  it('renders with columns object max (count capped, tracks still fill)', () => {
+  it('renders with columns object max (capped via track-max)', () => {
     render(
       <Grid columns={{minWidth: 250, max: 3}} gap={4} data-testid="grid">
         <div>Item 1</div>
@@ -74,37 +74,13 @@ describe('Grid', () => {
       </Grid>,
     );
     const grid = screen.getByTestId('grid');
-    // Cap lives on the track MIN (min(100%, max(minWidth, perColumn))); the
-    // track MAX stays 1fr so present columns fill the row (a lone column on
-    // mobile stretches to 100% instead of leaving dead space).
+    // Track max caps at (100% - 2 * gap) / 3 — no maxWidth on container
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(250px, calc((100% - 2 * var(--spacing-4)) / 3))), 1fr))',
+      'repeat(auto-fill, minmax(250px, calc((100% - 2 * var(--spacing-4)) / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
 
-  it('keeps track max at 1fr with a max cap so a lone column can fill (#3391)', () => {
-    // Regression: previously the cap was applied to the track MAX
-    // (minmax(minWidth, 100%/max)), so when fewer than `max` columns fit —
-    // e.g. a single column on mobile — the lone column was pinned to ~100%/max
-    // and left dead space on the right. The cap now lives on the track MIN and
-    // the track MAX stays 1fr, so present columns always stretch to fill.
-    render(
-      <Grid columns={{minWidth: 360, max: 2}} gap={4} data-testid="grid">
-        <div>Left</div>
-        <div>Right</div>
-      </Grid>,
-    );
-    const grid = screen.getByTestId('grid');
-    const template = templateColumns(grid);
-    // Track max must be 1fr (fills), not a fraction-of-container cap.
-    expect(template).toMatch(/, 1fr\)\)$/);
-    expect(template).not.toMatch(/, calc\([^)]*\/ 2\)\)\)$/);
-    expect(template).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(360px, calc((100% - 1 * var(--spacing-4)) / 2))), 1fr))',
-    );
-  });
-
   it('renders with columns object max using columnGap', () => {
     render(
       <Grid columns={{minWidth: 200, max: 4}} columnGap={6} data-testid="grid">
@@ -113,9 +89,9 @@ describe('Grid', () => {
       </Grid>,
     );
     const grid = screen.getByTestId('grid');
-    // columnGap takes precedence in the perColumn floor calculation
+    // columnGap takes precedence for track-max calculation
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(200px, calc((100% - 3 * var(--spacing-6)) / 4))), 1fr))',
+      'repeat(auto-fill, minmax(200px, calc((100% - 3 * var(--spacing-6)) / 4)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
@@ -189,7 +165,7 @@ describe('Grid', () => {
     expect(templateColumns(grid)).toBe('1fr');
   });
 
-  it('uses auto-fill with a plain 1fr track when no max specified', () => {
+  it('uses auto-fill without track-max cap when no max specified', () => {
     render(
       <Grid columns={{minWidth: 200}} data-testid="grid">
         <div>Item</div>
@@ -244,7 +220,7 @@ describe('Grid', () => {
 
   // --- P2: columns object + columnGap interaction (hardening #719) ---
 
-  it('uses columnGap var in the count-cap floor when both columnGap and gap are set', () => {
+  it('uses columnGap var in track-max when both columnGap and gap are set', () => {
     render(
       <Grid
         columns={{minWidth: 200, max: 3}}
@@ -255,14 +231,14 @@ describe('Grid', () => {
       </Grid>,
     );
     const grid = screen.getByTestId('grid');
-    // columnGap takes precedence over gap in the perColumn floor
+    // columnGap takes precedence over gap in track-max
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(200px, calc((100% - 2 * var(--spacing-6)) / 3))), 1fr))',
+      'repeat(auto-fill, minmax(200px, calc((100% - 2 * var(--spacing-6)) / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
 
-  it('uses gap var in the count-cap floor when columnGap is not set', () => {
+  it('uses gap var in track-max when columnGap is not set', () => {
     render(
       <Grid columns={{minWidth: 150, max: 2}} gap={3} data-testid="grid">
         <div>Item</div>
@@ -270,12 +246,12 @@ describe('Grid', () => {
     );
     const grid = screen.getByTestId('grid');
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(150px, calc((100% - 1 * var(--spacing-3)) / 2))), 1fr))',
+      'repeat(auto-fill, minmax(150px, calc((100% - 1 * var(--spacing-3)) / 2)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
 
-  it('uses simple fraction in the count-cap floor when no gap is set', () => {
+  it('uses simple fraction in track-max when no gap is set', () => {
     render(
       <Grid columns={{minWidth: 100, max: 3}} data-testid="grid">
         <div>Item</div>
@@ -283,7 +259,7 @@ describe('Grid', () => {
     );
     const grid = screen.getByTestId('grid');
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(100px, calc(100% / 3))), 1fr))',
+      'repeat(auto-fill, minmax(100px, calc(100% / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
@@ -356,7 +332,7 @@ describe('Grid', () => {
     expect(templateColumns(grid)).toBe('repeat(auto-fill, minmax(280px, 1fr))');
   });
 
-  it('renders with columns={{minWidth, max}} capping the count while filling', () => {
+  it('renders with columns={{minWidth, max}} capping via track-max', () => {
     render(
       <Grid columns={{minWidth: 280, max: 3}} gap={4} data-testid="grid">
         <div>Item 1</div>
@@ -364,15 +340,14 @@ describe('Grid', () => {
       </Grid>,
     );
     const grid = screen.getByTestId('grid');
-    // Count is capped via the track MIN; track MAX stays 1fr so present
-    // columns fill the row (grid stays full width).
+    // Track-max limits columns — grid stays full width
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(280px, calc((100% - 2 * var(--spacing-4)) / 3))), 1fr))',
+      'repeat(auto-fill, minmax(280px, calc((100% - 2 * var(--spacing-4)) / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
 
-  it('renders with columns={{minWidth, max, repeat: "fit"}} using auto-fit + count cap', () => {
+  it('renders with columns={{minWidth, max, repeat: "fit"}} using auto-fit + track-max', () => {
     render(
       <Grid
         columns={{minWidth: 280, max: 3, repeat: 'fit'}}
@@ -384,7 +359,7 @@ describe('Grid', () => {
     );
     const grid = screen.getByTestId('grid');
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - 2 * var(--spacing-4)) / 3))), 1fr))',
+      'repeat(auto-fit, minmax(280px, calc((100% - 2 * var(--spacing-4)) / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });

package/src/Grid/Grid.tsx

@@ -38,10 +38,9 @@ export type GridAlignment = 'start' | 'center' | 'end' | 'stretch';
  *   - `minWidth` — minimum width (px) for each column track
  *   - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
  *     `'fit'` collapses empty tracks so items stretch to fill
- *   - `max` — caps the maximum number of columns. The grid stretches to 100%
- *     of its parent and the columns that are present always fill the row, so a
- *     layout collapsing to a single column on mobile stretches to full width
- *     (no dead space on the right).
+ *   - `max` — caps the maximum number of columns by limiting track max size.
+ *     The grid stretches to 100% of its parent; `max` only limits how many
+ *     columns appear.
  */
 export type GridColumns =
   | number
@@ -322,20 +321,9 @@ const spacingVarNames: Record<SpacingStep, string> = {
 };
 
 /**
- * Build a grid-template-columns value that caps the column *count* at `max`
- * while still letting the columns that are actually present stretch to fill
- * the row.
- *
- * The cap lives on the track's **min** size, not its max: each track is at
- * least `perColumn = (100% - (max-1) * gap) / max`, so more than `max` columns
- * can never fit. The track **max** stays `1fr`, so whenever fewer than `max`
- * columns fit (most importantly a lone column on mobile) they still grow to
- * fill the whole row — no dead space on the right.
- *
- * The track min is `max(minWidth, perColumn)` so an explicit `minWidth` is
- * still honored, wrapped in `min(100%, …)` so a single column on a viewport
- * narrower than `minWidth`/`perColumn` shrinks to the container instead of
- * overflowing it.
+ * Build a grid-template-columns value that caps columns at `max` by
+ * limiting each track's max size to `(100% - (max-1) * gap) / max`.
+ * The grid stays 100% width; the track-max prevents more than `max` columns.
  */
 function buildCappedTemplate(
   minWidth: number,
@@ -351,17 +339,12 @@ function buildCappedTemplate(
         ? spacingVarNames[gap]
         : null;
 
-  // perColumn = (100% - (maxCols - 1) * gap) / maxCols — the width a track
-  // would have if exactly `maxCols` columns were present. Used as a floor so
-  // the grid never fits more than `maxCols` columns.
-  const perColumn = gapVar
+  // trackMax = (100% - (maxCols - 1) * gap) / maxCols
+  const trackMax = gapVar
     ? `calc((100% - ${maxCols - 1} * var(${gapVar})) / ${maxCols})`
     : `calc(100% / ${maxCols})`;
 
-  // Track min caps the count; track max stays 1fr so present columns fill.
-  const trackMin = `min(100%, max(${minWidth}px, ${perColumn}))`;
-
-  return `repeat(${repeatMode}, minmax(${trackMin}, 1fr))`;
+  return `repeat(${repeatMode}, minmax(${minWidth}px, ${trackMax}))`;
 }
 
 /**

package/src/Icon/Icon.test.tsx

@@ -11,48 +11,48 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
-import {TestIcon} from '../__tests__/TestIcon';
+import {HomeIcon} from '@heroicons/react/24/outline';
 import {Icon} from './Icon';
 
 describe('Icon', () => {
   it('renders the icon component', () => {
-    render(<Icon icon={TestIcon} data-testid="icon" />);
+    render(<Icon icon={HomeIcon} data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
   it('renders as an SVG element', () => {
-    render(<Icon icon={TestIcon} data-testid="icon" />);
+    render(<Icon icon={HomeIcon} data-testid="icon" />);
     const icon = screen.getByTestId('icon');
     expect(icon.tagName.toLowerCase()).toBe('svg');
   });
 
   it('applies aria-hidden by default', () => {
-    render(<Icon icon={TestIcon} data-testid="icon" />);
+    render(<Icon icon={HomeIcon} data-testid="icon" />);
     expect(screen.getByTestId('icon')).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('renders with different color variants', () => {
     const {rerender} = render(
-      <Icon icon={TestIcon} color="primary" data-testid="icon" />,
+      <Icon icon={HomeIcon} color="primary" data-testid="icon" />,
     );
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="secondary" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="secondary" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="accent" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="accent" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="success" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="success" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="error" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="error" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="warning" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="warning" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="inherit" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="inherit" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
@@ -70,41 +70,50 @@ describe('Icon', () => {
       'purple',
     ] as const;
     const {rerender} = render(
-      <Icon icon={TestIcon} color={nonSemanticColors[0]} data-testid="icon" />,
+      <Icon
+        icon={HomeIcon}
+        color={nonSemanticColors[0]}
+        data-testid="icon"
+      />,
     );
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
     for (const c of nonSemanticColors.slice(1)) {
-      rerender(<Icon icon={TestIcon} color={c} data-testid="icon" />);
+      rerender(<Icon icon={HomeIcon} color={c} data-testid="icon" />);
       expect(screen.getByTestId('icon')).toBeInTheDocument();
     }
   });
 
   it('renders with different size variants', () => {
     const {rerender} = render(
-      <Icon icon={TestIcon} size="xsm" data-testid="icon" />,
+      <Icon icon={HomeIcon} size="xsm" data-testid="icon" />,
     );
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} size="sm" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} size="sm" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} size="md" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} size="md" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} size="lg" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} size="lg" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
   it('forwards ref correctly', () => {
     const ref = vi.fn();
-    render(<Icon icon={TestIcon} ref={ref} />);
+    render(<Icon icon={HomeIcon} ref={ref} />);
     expect(ref).toHaveBeenCalledWith(expect.any(SVGSVGElement));
   });
 
   it('passes additional SVG props', () => {
     render(
-      <Icon icon={TestIcon} data-testid="icon" role="img" aria-label="Home" />,
+      <Icon
+        icon={HomeIcon}
+        data-testid="icon"
+        role="img"
+        aria-label="Home"
+      />,
     );
     const icon = screen.getByTestId('icon');
     expect(icon).toHaveAttribute('role', 'img');
@@ -112,29 +121,8 @@ describe('Icon', () => {
   });
 
   it('uses default color and size when not specified', () => {
-    render(<Icon icon={TestIcon} data-testid="icon" />);
+    render(<Icon icon={HomeIcon} data-testid="icon" />);
     // The component should render without errors with defaults
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
-
-  it('applies aria-hidden by default in string (registry) mode', () => {
-    render(<Icon icon="check" data-testid="icon" />);
-    expect(screen.getByTestId('icon')).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  it('lets a string-mode icon be made meaningful by overriding aria-hidden', () => {
-    render(
-      <Icon
-        icon="check"
-        data-testid="icon"
-        role="img"
-        aria-label="Done"
-        aria-hidden={false}
-      />,
-    );
-    const icon = screen.getByTestId('icon');
-    expect(icon).toHaveAttribute('role', 'img');
-    expect(icon).toHaveAttribute('aria-label', 'Done');
-    expect(icon).toHaveAttribute('aria-hidden', 'false');
-  });
 });

package/src/Icon/Icon.tsx

@@ -281,16 +281,12 @@ function IconFromRegistry({
 
   return (
     <span
-      // Decorative by default, but placed BEFORE the prop spread so consumers
-      // can override it (e.g. `aria-hidden={false}` + `role="img"` +
-      // `aria-label`) to expose a meaningful standalone icon. This matches
-      // component-mode Icon, which already sets aria-hidden before its spread.
-      aria-hidden="true"
       {...(spanProps as React.HTMLAttributes<HTMLSpanElement>)}
       {...mergeProps(
         themeProps('icon', {size, color}),
         stylex.props(styles.span, colorStyles[color], spanSizeStyles[size]),
-      )}>
+      )}
+      aria-hidden="true">
       {resolvedIcon}
     </span>
   );

package/src/Layout/LayoutContent.doc.mjs

@@ -14,12 +14,6 @@ export const docs = {
       type: 'ReactNode',
       description: 'Content.',
     },
-    {
-      name: 'padding',
-      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-      description:
-        'Internal padding using the spacing scale. Overrides the default padding from the layout container.',
-    },
     {
       name: 'isScrollable',
       type: 'boolean',
@@ -50,11 +44,6 @@ export const docsZh = {
       type: 'ReactNode',
       description: '内容。',
     },
-    {
-      name: 'padding',
-      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-      description: '使用间距比例的内边距。覆盖布局容器的默认内边距。',
-    },
     {
       name: 'isScrollable',
       type: 'boolean',
@@ -81,7 +70,6 @@ export const docsDense = {
   description: 'Scrollable main content area.',
   propDescriptions: {
     children: 'Content.',
-    padding: 'Internal padding on spacing scale. Overrides layout container default.',
     isScrollable: 'Enable scrollable overflow.',
     label: 'Accessible label for landmark element.',
     role: 'ARIA landmark role.',

package/src/Layout/LayoutPanel.doc.mjs

@@ -20,12 +20,6 @@ export const docs = {
       description: 'Border on the appropriate edge.',
       default: 'false',
     },
-    {
-      name: 'padding',
-      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-      description:
-        'Internal padding using the spacing scale. Overrides the default padding from the layout container.',
-    },
     {
       name: 'isScrollable',
       type: 'boolean',
@@ -42,18 +36,6 @@ export const docs = {
       type: 'AriaRole',
       description: 'ARIA landmark role.',
     },
-    {
-      name: 'width',
-      type: 'number | string',
-      description:
-        'Width of the panel. Numbers are treated as pixels, strings are used as-is. Ignored when resizable is provided; the hook controls width.',
-    },
-    {
-      name: 'resizable',
-      type: 'ResizableProps',
-      description:
-        'Resize props from useResizable(). When provided, the hook drives the panel width and a ResizeHandle should be placed adjacent to the panel.',
-    },
   ],
 };
 
@@ -74,11 +56,6 @@ export const docsZh = {
       description: '相应边缘的边框。',
       default: 'false',
     },
-    {
-      name: 'padding',
-      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-      description: '使用间距比例的内边距。覆盖布局容器的默认内边距。',
-    },
     {
       name: 'isScrollable',
       type: 'boolean',
@@ -95,18 +72,6 @@ export const docsZh = {
       type: 'AriaRole',
       description: 'ARIA 地标角色。',
     },
-    {
-      name: 'width',
-      type: 'number | string',
-      description:
-        '面板宽度。数字按像素处理，字符串按原样使用。提供 resizable 时忽略，宽度由 hook 控制。',
-    },
-    {
-      name: 'resizable',
-      type: 'ResizableProps',
-      description:
-        '来自 useResizable() 的调整大小属性。提供时面板宽度由 hook 驱动，应在面板旁放置 ResizeHandle。',
-    },
   ],
 };
 
@@ -118,13 +83,8 @@ export const docsDense = {
   propDescriptions: {
     children: 'Panel content.',
     hasDivider: 'Border on appropriate edge.',
-    padding: 'Internal padding on spacing scale. Overrides layout container default.',
     isScrollable: 'Enable scrollable overflow.',
     label: 'Accessible label for landmark element.',
     role: 'ARIA landmark role.',
-    width:
-      'Panel width. Numbers = pixels, strings as-is. Ignored when resizable provided; hook controls width.',
-    resizable:
-      'Resize props from useResizable(). Hook drives panel width; place ResizeHandle adjacent.',
   },
 };

package/src/Lightbox/Lightbox.doc.mjs

@@ -64,13 +64,8 @@ export const docs = {
       { guidance: false, description: 'Nest interactive content inside captions; keep them plain text.' },
     ],
   },
-  // The lightbox opens via showModal() and renders nothing while closed —
-  // overlay mode gives the Properties preview an open trigger instead of an
-  // empty stage, mirroring MobileNav (#3616).
   playground: {
-    overlay: true,
     defaults: {
-      isOpen: false,
       media: {
         src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
         alt: 'Coastal shoreline with ocean waves',

package/src/Lightbox/Lightbox.test.tsx

@@ -1,9 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
-import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
 import {Lightbox} from './Lightbox';
-import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 // Mock showModal/close for jsdom
 beforeEach(() => {
@@ -17,16 +16,6 @@ beforeEach(() => {
   });
 });
 
-// useAnnounce mounts singleton live regions on <body>; reset between tests so
-// stale announcements from one test don't leak into the next.
-afterEach(() => {
-  __resetLiveRegionsForTest();
-});
-
-function politeRegion(): HTMLElement | null {
-  return document.querySelector('[data-astryx-live-region="polite"]');
-}
-
 describe('Lightbox', () => {
   it('renders as a dialog element', () => {
     render(
@@ -311,116 +300,6 @@ describe('Lightbox', () => {
     });
   });
 
-  describe('screen-reader announcements', () => {
-    const media = [
-      {src: '/a.jpg', alt: 'Image A', caption: 'First'},
-      {src: '/b.jpg', alt: 'Image B', caption: 'Second'},
-      {src: '/c.jpg', alt: 'Image C'},
-    ];
-
-    it('announces the new image and position when navigating next via button', async () => {
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={0}
-        />,
-      );
-      fireEvent.click(screen.getByLabelText('Next'));
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image B, 2 of 3');
-      });
-    });
-
-    it('announces the new image and position when navigating via arrow keys', async () => {
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={1}
-        />,
-      );
-      const dialog = document.querySelector('dialog')!;
-      fireEvent.keyDown(dialog, {key: 'ArrowRight'});
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image C, 3 of 3');
-      });
-    });
-
-    it('announces the new image and position when navigating prev', async () => {
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={2}
-        />,
-      );
-      fireEvent.click(screen.getByLabelText('Previous'));
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image B, 2 of 3');
-      });
-    });
-
-    it('falls back to a positional label when the image has no alt', async () => {
-      const unlabeled = [
-        {src: '/a.jpg', alt: 'Image A'},
-        {src: '/b.jpg', alt: ''},
-      ];
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={unlabeled}
-          defaultIndex={0}
-        />,
-      );
-      fireEvent.click(screen.getByLabelText('Next'));
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image 2 of 2');
-      });
-    });
-
-    it('does not announce on initial open', async () => {
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={1}
-        />,
-      );
-      // Allow any scheduled rAF to flush; nothing should have been announced.
-      await new Promise(resolve => requestAnimationFrame(() => resolve(null)));
-      // The dialog's aria-label already names the current image on open, so no
-      // live region is created (announce is never called).
-      expect(politeRegion()).toBeNull();
-    });
-
-    it('does not announce when the lightbox opens at a new index', async () => {
-      const {rerender} = render(
-        <Lightbox
-          isOpen={false}
-          onOpenChange={() => {}}
-          media={media}
-          index={0}
-        />,
-      );
-      rerender(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          index={2}
-        />,
-      );
-      await new Promise(resolve => requestAnimationFrame(() => resolve(null)));
-      expect(politeRegion()).toBeNull();
-    });
-  });
-
   describe('video support', () => {
     it('renders a video element when type is video', () => {
       const {container} = render(