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

package/src/Lightbox/Lightbox.test.tsx

@@ -4,6 +4,7 @@ import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import {Lightbox} from './Lightbox';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {InternationalizationProvider} from '../i18n';
 
 // Mock showModal/close for jsdom
 beforeEach(() => {
@@ -27,6 +28,17 @@ function politeRegion(): HTMLElement | null {
   return document.querySelector('[data-astryx-live-region="polite"]');
 }
 
+// Both position messages, supplied by the test. Overriding the pair means an
+// assertion also proves which of the two keys the component reached for.
+const POSITION_MESSAGES = {
+  fr: {
+    '@astryx.lightbox.mediaPosition':
+      '{alt}, vue {index, number} sur {total, number}',
+    '@astryx.lightbox.imagePosition':
+      'Photo {index, number} sur {total, number}',
+  },
+};
+
 describe('Lightbox', () => {
   it('renders as a dialog element', () => {
     render(
@@ -320,47 +332,53 @@ describe('Lightbox', () => {
 
     it('announces the new image and position when navigating next via button', async () => {
       render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={0}
-        />,
+        <InternationalizationProvider locale="fr" overrides={POSITION_MESSAGES}>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={() => {}}
+            media={media}
+            defaultIndex={0}
+          />
+        </InternationalizationProvider>,
       );
       fireEvent.click(screen.getByLabelText('Next'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image B, 2 of 3');
+        expect(politeRegion()?.textContent).toBe('Image B, vue 2 sur 3');
       });
     });
 
     it('announces the new image and position when navigating via arrow keys', async () => {
       render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={1}
-        />,
+        <InternationalizationProvider locale="fr" overrides={POSITION_MESSAGES}>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={() => {}}
+            media={media}
+            defaultIndex={1}
+          />
+        </InternationalizationProvider>,
       );
       const dialog = document.querySelector('dialog')!;
       fireEvent.keyDown(dialog, {key: 'ArrowRight'});
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image C, 3 of 3');
+        expect(politeRegion()?.textContent).toBe('Image C, vue 3 sur 3');
       });
     });
 
     it('announces the new image and position when navigating prev', async () => {
       render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={2}
-        />,
+        <InternationalizationProvider locale="fr" overrides={POSITION_MESSAGES}>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={() => {}}
+            media={media}
+            defaultIndex={2}
+          />
+        </InternationalizationProvider>,
       );
       fireEvent.click(screen.getByLabelText('Previous'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image B, 2 of 3');
+        expect(politeRegion()?.textContent).toBe('Image B, vue 2 sur 3');
       });
     });
 
@@ -370,16 +388,19 @@ describe('Lightbox', () => {
         {src: '/b.jpg', alt: ''},
       ];
       render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={unlabeled}
-          defaultIndex={0}
-        />,
+        <InternationalizationProvider locale="fr" overrides={POSITION_MESSAGES}>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={() => {}}
+            media={unlabeled}
+            defaultIndex={0}
+          />
+        </InternationalizationProvider>,
       );
       fireEvent.click(screen.getByLabelText('Next'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image 2 of 2');
+        // imagePosition, not a mediaPosition with an empty {alt}.
+        expect(politeRegion()?.textContent).toBe('Photo 2 sur 2');
       });
     });
 

package/src/Lightbox/Lightbox.tsx

@@ -378,9 +378,13 @@ export function Lightbox({
       return;
     }
     const item = mediaArray[Math.min(index, mediaArray.length - 1)];
-    const position = `${index + 1} of ${mediaArray.length}`;
-    announce(item?.alt ? `${item.alt}, ${position}` : `Image ${position}`);
-  }, [index, isOpen, announce, mediaArray]);
+    const position = {index: index + 1, total: mediaArray.length};
+    announce(
+      item?.alt
+        ? t('@astryx.lightbox.mediaPosition', {alt: item.alt, ...position})
+        : t('@astryx.lightbox.imagePosition', position),
+    );
+  }, [index, isOpen, announce, mediaArray, t]);
 
   // Open/close dialog
   useIsomorphicLayoutEffect(() => {

package/src/MobileNav/MobileNav.tsx

@@ -77,7 +77,19 @@ const styles = stylex.create({
     outline: 'none',
     // Native <dialog> uses display:none when closed.
     // Open state applied via isOpen prop to avoid :where([open]) specificity issues.
+    // `display` participates in the transition with allow-discrete so it flips
+    // to none only after the slide-out finishes. That also keeps the dialog
+    // rendered until close() has actually run: an open modal dialog that isn't
+    // rendered still blocks the whole document, and a browser that fails to
+    // un-block it on close leaves the page inert with no error (#4290).
+    // Deliberately not shortened under reduced motion: `display` is discrete,
+    // so a long hold animates nothing — it is only the window the close has to
+    // land inside. The visible transitions (the drawer's transform and the
+    // backdrop's opacity) are the ones that respect the preference.
     display: 'none',
+    transitionProperty: 'display',
+    transitionDuration: durationVars['--duration-medium'],
+    transitionBehavior: 'allow-discrete',
   },
   open: {
     display: 'flex',
@@ -183,6 +195,75 @@ const dynamicStyles = stylex.create({
   }),
 });
 
+// =============================================================================
+// Close timing
+// =============================================================================
+
+/** Longest the drawer will wait before closing, however long the hold is. */
+const MAX_CLOSE_DELAY_MS = 250;
+/** Fraction of the hold to close at, so the close never lands on its boundary. */
+const CLOSE_WITHIN_HOLD = 0.6;
+
+/**
+ * Shortest duration in a `transition-duration` list, in ms; null if unreadable.
+ *
+ * Browsers serialise computed `<time>` values in seconds — an authored `410ms`
+ * reads back as `"0.41s"` and a list as `"0.41s, 0.12s"` — so the seconds branch
+ * is the one that runs outside tests. jsdom echoes an inline `250ms` back as-is
+ * and never resolves `var()`, so both units and the unreadable case are covered
+ * directly in MobileNavCloseTiming.test.ts rather than through the component.
+ *
+ * @internal Exported for unit tests.
+ */
+export function parseShortestDurationMs(value: string): number | null {
+  const durations = value
+    .split(',')
+    .map(part => {
+      const trimmed = part.trim();
+      const ms = Number.parseFloat(trimmed);
+      if (!Number.isFinite(ms)) {
+        return null;
+      }
+      return trimmed.endsWith('ms')
+        ? ms
+        : trimmed.endsWith('s')
+          ? ms * 1000
+          : null;
+    })
+    .filter((ms): ms is number => ms !== null);
+
+  return durations.length ? Math.min(...durations) : null;
+}
+
+/**
+ * How long to wait before closing the native dialog.
+ *
+ * The drawer is only rendered for as long as its `display` transition runs, and
+ * closing an unrendered modal dialog is what leaves the page inert (#4290). So
+ * the close has to land inside that hold. The hold is `--duration-medium`,
+ * which themes rewrite — the shipped y2k theme sets it to exactly 250ms — so
+ * read the hold in effect rather than assuming it.
+ */
+function resolveCloseDelay(dialog: HTMLDialogElement): number {
+  // Reduced motion makes the close sooner; it must not make the hold shorter.
+  // Shrinking both leaves no slack — one slow frame between the commit and this
+  // macrotask and the drawer has already stopped being rendered.
+  const cap = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ? 0
+    : MAX_CLOSE_DELAY_MS;
+
+  const hold = parseShortestDurationMs(
+    window.getComputedStyle(dialog).transitionDuration,
+  );
+
+  // The hold is unreadable — an unresolved var() outside a real browser.
+  if (hold === null) {
+    return cap;
+  }
+
+  return hold <= 0 ? 0 : Math.min(cap, hold * CLOSE_WITHIN_HOLD);
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -320,6 +401,34 @@ export function MobileNav({
     side === 'auto' ? 'end' : side,
   );
 
+  // Resolve which edge the drawer slides from. Deliberately its own effect,
+  // declared before the open/close effect below so the trigger is still the
+  // active element when `side='auto'` reads it. Keeping it out of that effect
+  // is what stops a `side` change during a close from re-arming the delay: the
+  // CSS hold runs from the commit that started the slide-out and does not
+  // restart, so a fresh full delay could land after the drawer had already
+  // stopped being rendered — #4290 again.
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    if (side === 'auto') {
+      const trigger = document.activeElement as HTMLElement | null;
+      if (trigger && trigger !== document.body) {
+        const rect = trigger.getBoundingClientRect();
+        const triggerCenter = rect.left + rect.width / 2;
+        // eslint-disable-next-line @eslint-react/set-state-in-effect -- side is resolved from trigger layout immediately before showModal()
+        setResolvedSide(
+          triggerCenter < window.innerWidth / 2 ? 'start' : 'end',
+        );
+      }
+    } else {
+      // eslint-disable-next-line @eslint-react/set-state-in-effect -- side prop changes must update the open dialog placement
+      setResolvedSide(side);
+    }
+  }, [isOpen, side]);
+
   // Open/close the dialog via showModal()/close()
   // close() is delayed so the slide-out transition can play.
   useEffect(() => {
@@ -328,28 +437,7 @@ export function MobileNav({
       return;
     }
 
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-
     if (isOpen) {
-      // Determine drawer side from trigger position when auto
-      if (side === 'auto') {
-        const trigger = document.activeElement as HTMLElement | null;
-        if (trigger && trigger !== document.body) {
-          const rect = trigger.getBoundingClientRect();
-          const triggerCenter = rect.left + rect.width / 2;
-          // eslint-disable-next-line @eslint-react/set-state-in-effect -- side is resolved from trigger layout immediately before showModal()
-          setResolvedSide(
-            triggerCenter < window.innerWidth / 2 ? 'start' : 'end',
-          );
-        }
-      } else {
-        // eslint-disable-next-line @eslint-react/set-state-in-effect -- side prop changes must update the open dialog placement
-        setResolvedSide(side);
-      }
-
       if (!dialog.open) {
         dialog.showModal();
       }
@@ -360,13 +448,9 @@ export function MobileNav({
     } else if (dialog.open) {
       document.documentElement.style.overflow = '';
 
-      const duration = window.matchMedia('(prefers-reduced-motion: reduce)')
-        .matches
-        ? 10
-        : 250;
       closeTimeoutRef.current = setTimeout(() => {
         dialog.close();
-      }, duration);
+      }, resolveCloseDelay(dialog));
     }
 
     return () => {
@@ -375,20 +459,27 @@ export function MobileNav({
         closeTimeoutRef.current = null;
       }
       document.documentElement.style.overflow = '';
-      // Close the native dialog on teardown if it's still open. Inside AppShell
-      // the drawer is mounted in an <Activity> that switches to mode="hidden"
-      // when the drawer closes; React then runs this cleanup (with a stale
-      // isOpen) instead of re-running the effect with isOpen=false, so the
-      // close branch above never fires. If we leave the <dialog> `open` here,
-      // showModal() is skipped on the next open (the dialog is already open in
-      // the hidden tree) and the drawer can never be re-opened. Closing it
-      // unconditionally on teardown keeps the native dialog state in sync so a
-      // subsequent open cleanly calls showModal() again.
-      if (dialog.open) {
+    };
+  }, [isOpen]);
+
+  // Close the native dialog on unmount if it's still open. Inside AppShell the
+  // drawer is mounted in an <Activity> that switches to mode="hidden" when the
+  // drawer closes; React then runs effect cleanups (with a stale isOpen)
+  // instead of re-running the effect with isOpen=false, so the close branch
+  // above never fires. If we leave the <dialog> `open` here, showModal() is
+  // skipped on the next open (the dialog is already open in the hidden tree)
+  // and the drawer can never be re-opened — see MobileNavReopen.test.tsx.
+  // This must be a separate unmount-only effect: putting it in the open/close
+  // effect above would close the dialog on every isOpen flip and cut off the
+  // delayed slide-out close.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    return () => {
+      if (dialog?.open) {
         dialog.close();
       }
     };
-  }, [isOpen, side]);
+  }, []);
 
   // Handle native cancel event (Escape key) — prevent default and route through onOpenChange
   const handleCancel = useCallback(