@astryxdesign/core 0.7.3-canary.f94e962 → 0.7.3

package/src/Timestamp/Timestamp.tsx

@@ -17,7 +17,14 @@
  * - /packages/cli/assets/templates/blocks/components/Timestamp/ (showcase blocks)
  */
 
-import {lazy, Suspense, useEffect, useRef, useState} from 'react';
+import {
+  lazy,
+  Suspense,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Text} from '../Text';
 import type {TextType, TextSize, TextColor, TextWeight} from '../theme/types';
@@ -215,6 +222,13 @@ function getLiveInterval(diffSeconds: number): number {
   return 300_000; // every 5 minutes
 }
 
+// Whether this render may read the current time. Server renders (including
+// static prerenders) and the hydration pass read `false`, so the markup never
+// depends on when it was rendered; client renders read `true`.
+const subscribeToNothing = () => () => {};
+const canReadClockOnClient = () => true;
+const canReadClockOnServer = () => false;
+
 /** Whether a format is non-relative (i.e. shows a fixed date/time). */
 function isAbsoluteFormat(
   format: TimestampFormat,
@@ -279,7 +293,29 @@ export function Timestamp({
   const locale = useLocale();
   const timeRef = useRef<HTMLTimeElement>(null);
   const mergedTimeRef = useMergedRefs(ref, timeRef);
-  const [now, setNow] = useState(() => new Date());
+  // Only relative and auto formats depend on the current time. Absolute
+  // formats never read the clock, so they render identically on the server,
+  // in a static prerender, and on the client. A clock-dependent format reads
+  // it on the client only: server renders and the hydration pass show the
+  // full date and time in UTC, and the client switches to the relative phrase
+  // right after hydration.
+  const needsClock = !isAbsoluteFormat(format);
+  const canReadClock = useSyncExternalStore(
+    subscribeToNothing,
+    canReadClockOnClient,
+    canReadClockOnServer,
+  );
+  const [now, setNow] = useState<Date | null>(() =>
+    needsClock && canReadClock ? new Date() : null,
+  );
+  // Read the clock during render once it may be read: after hydration (the
+  // store re-renders with its client value) and when `format` switches from
+  // an absolute value to a clock-dependent one, so the placeholder never
+  // commits on the client.
+  if (needsClock && canReadClock && now === null) {
+    // eslint-disable-next-line @eslint-react/purity -- seeds clock state once, like the initializer; never runs on the server or while hydrating
+    setNow(new Date());
+  }
 
   const date = parseValue(value);
   // An unparseable value (a malformed date string, or a NaN timestamp from
@@ -289,25 +325,40 @@ export function Timestamp({
   const isValidDate = !Number.isNaN(date.getTime());
   const isoString = isValidDate ? date.toISOString() : '';
 
-  // Determine effective format
-  const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
-  const effectiveFormat: TimestampFormat =
-    format === 'auto'
+  // Determine effective format. Until the clock is read, a clock-dependent
+  // format renders as the full date and time.
+  const isClockPending = needsClock && now === null;
+  const diffSeconds =
+    now === null ? 0 : Math.round((now.getTime() - date.getTime()) / 1000);
+  const effectiveFormat: TimestampFormat = isClockPending
+    ? 'date_time'
+    : format === 'auto'
       ? Math.abs(diffSeconds) <= autoThreshold
         ? 'relative'
         : 'date_time'
       : format;
 
-  // Format the display text. No time zone is passed: the visible text always
-  // reads in the viewer's own zone, and only the tooltip names others.
+  // Format the display text in the viewer's own zone; only the tooltip names
+  // others. The one exception is the pre-hydration placeholder, written in
+  // UTC with its label so every zone produces the same markup.
   const displayText = !isValidDate
     ? ''
     : effectiveFormat === 'relative'
-      ? formatRelativeTime(date, now, locale, 'long')
+      ? formatRelativeTime(date, now ?? date, locale, 'long')
       : effectiveFormat === 'relative_short'
-        ? formatRelativeTime(date, now, locale, 'narrow')
+        ? formatRelativeTime(date, now ?? date, locale, 'narrow')
         : isAbsoluteFormat(effectiveFormat)
-          ? formatInstant(date, effectiveFormat, locale, {isTimezoneShown})
+          ? formatInstant(
+              date,
+              effectiveFormat,
+              locale,
+              // The pre-hydration placeholder is written in UTC, labelled, so
+              // the server and the hydrating client produce the same text in
+              // every time zone.
+              isClockPending
+                ? {timeZone: 'UTC', isTimezoneShown: true}
+                : {isTimezoneShown},
+            )
           : '';
 
   // Full absolute text for the tooltip (visible — keeps the compact timezone

package/src/TreeList/TreeList.test.tsx

@@ -942,6 +942,34 @@ describe('TreeList', () => {
         expect(screen.queryByText('File')).not.toBeInTheDocument();
       });
 
+      it("exposes a disabled row's toggle and action as aria-disabled and keeps them inert", () => {
+        const onClick = vi.fn();
+        const {container} = render(
+          <TreeList
+            items={underRoot([
+              {id: 'run', label: 'Run', onClick, isDisabled: true},
+              {...folder, isDisabled: true},
+            ])}
+          />,
+        );
+        // spec:AST-085 FR1/FR2: no native disabled anywhere, and a click
+        // dispatched straight on the inner controls does nothing.
+        expect(container.querySelector('[disabled]')).toBeNull();
+        const toggle = container.querySelector<HTMLElement>(
+          '[data-tree-toggle][aria-disabled="true"]',
+        )!;
+        expect(toggle).not.toBeNull();
+        toggle.click();
+        fireEvent.keyDown(toggle, {key: 'Enter'});
+        expect(screen.queryByText('File')).not.toBeInTheDocument();
+        const action = Array.from(container.querySelectorAll('button')).find(
+          button => button.textContent?.includes('Run'),
+        )!;
+        expect(action).toHaveAttribute('aria-disabled', 'true');
+        action.click();
+        expect(onClick).not.toHaveBeenCalled();
+      });
+
       it('leaves a role-based control in start or end content to itself', () => {
         // Native and role-based controls alike keep their own activation,
         // the same rule link rows get from the shared enlarged-surface hook.

package/src/TreeList/TreeListItem.tsx

@@ -38,6 +38,7 @@ import {TreeListBranches} from './TreeListBranches';
 import type {TreeListDensity, TreeListVariant} from './TreeListTypes';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import {disabledInteractionProps} from '../utils/disabledInteraction';
 
 // =============================================================================
 // Styles
@@ -552,11 +553,13 @@ export function TreeListItem({
         // Stable identity for TreeList's activateItem selector — do not
         // remove without also updating TreeList.tsx.
         data-tree-toggle=""
-        disabled={isDisabled}
+        // Disabled stays focusable (spec:AST-085 FR1) but inert (FR2).
+        aria-disabled={isDisabled || undefined}
         // Roving tabindex lives on the treeitem row; the chevron toggle is not
         // a separate tab stop. Row-level Enter/Space forwards to this button.
         tabIndex={-1}
         onClick={handleToggle}
+        {...(isDisabled ? disabledInteractionProps() : null)}
         {...mergeProps(
           // Stable theme target for the expand/collapse control. `data-tree-toggle`
           // stays as the functional activation hook; this adds a themeable
@@ -608,7 +611,8 @@ export function TreeListItem({
         <button
           type="button"
           onClick={onClick}
-          disabled={isDisabled}
+          aria-disabled={isDisabled || undefined}
+          {...(isDisabled ? disabledInteractionProps() : null)}
           aria-labelledby={labelId}
           aria-describedby={description != null ? descriptionId : undefined}
           // Roving tabindex lives on the treeitem row; inner action is not a

package/src/__tests__/DisabledTriggerFocus.a11y.chromium.spec.ts

@@ -0,0 +1,86 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DisabledTriggerFocus.a11y.chromium.spec.ts
+ * @input The `a11y/Disabled trigger focus` stories in a built Storybook.
+ * @output Real-engine proof of `spec:AST-085` FR4 for Selector and
+ *   ComplexSelector: a trigger disabled while it holds keyboard focus keeps
+ *   focus and reports itself disabled.
+ * @position Run in `pr-a11y`; a DOM emulator does not move focus off an
+ *   element that becomes disabled, so it cannot show the loss.
+ */
+
+import {expect, test} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+const CASES = [
+  {
+    storyId: 'a11y-disabled-trigger-focus--selector-trigger',
+    role: 'combobox',
+    name: 'Fruit',
+  },
+  {
+    storyId: 'a11y-disabled-trigger-focus--complex-selector-trigger',
+    role: 'button',
+    name: 'View options',
+  },
+] as const;
+
+for (const {storyId, role, name} of CASES) {
+  test(`${name}: a focused trigger keeps focus when it becomes disabled`, async ({
+    page,
+  }) => {
+    await page.goto(
+      `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`,
+    );
+    const trigger = page.getByRole(role, {name});
+    await trigger.focus();
+    await expect(trigger).toBeFocused();
+
+    await page.evaluate(id => {
+      const channel = (
+        window as unknown as {
+          __STORYBOOK_ADDONS_CHANNEL__?: {
+            emit: (event: string, payload: unknown) => void;
+          };
+        }
+      ).__STORYBOOK_ADDONS_CHANNEL__;
+      if (channel == null) {
+        throw new Error('Storybook channel is unavailable');
+      }
+      channel.emit('updateStoryArgs', {
+        storyId: id,
+        updatedArgs: {isDisabled: true},
+      });
+    }, storyId);
+
+    // Wait for the disabled re-render in either form, so focus is checked
+    // after it lands.
+    await expect
+      .poll(async () =>
+        trigger.evaluate(
+          el =>
+            el.hasAttribute('disabled') ||
+            el.getAttribute('aria-disabled') === 'true',
+        ),
+      )
+      .toBe(true);
+    await expect(trigger).toBeFocused();
+  });
+}

package/src/hooks/useGridFocus.ts

@@ -298,7 +298,22 @@ export function useGridFocus<T extends HTMLElement = HTMLElement>(
     for (const el of targets) {
       setTabIndex(el, el === tabbable ? 0 : -1);
     }
-  }, [getFocusTargets, setTabIndex]);
+    // A cell that stopped being focusable (an aria-disabled day, for example,
+    // which stays reachable by focus) can still hold the stop from earlier
+    // navigation; it never stays tabbable, so the grid keeps one Tab stop.
+    for (const cell of getCells()) {
+      const el = cellFocusable(cell) ? null : resolveFocusTarget(cell);
+      if (el != null) {
+        setTabIndex(el, -1);
+      }
+    }
+  }, [
+    getFocusTargets,
+    getCells,
+    cellFocusable,
+    resolveFocusTarget,
+    setTabIndex,
+  ]);
 
   // Keep the tab stop valid across renders (cells added/removed, focusability
   // toggled). Runs after every commit but only when roving tabindex is on.