@astryxdesign/lab 0.7.5-canary.577e8ca → 0.7.5-canary.6322d94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.5-canary.577e8ca",
+  "version": "0.7.5-canary.6322d94",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.5-canary.577e8ca",
+    "@astryxdesign/core": "0.7.5-canary.6322d94",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,8 +59,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.5-canary.577e8ca",
-    "@astryxdesign/cli": "0.7.5-canary.577e8ca",
+    "@astryxdesign/a11y-spec": "0.7.5-canary.6322d94",
+    "@astryxdesign/cli": "0.7.5-canary.6322d94",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -74,14 +74,14 @@
   },
   "scripts": {
     "build": "node ../../scripts/clean-dist.mjs && pnpm build:esm && tsc --project tsconfig.build.json && node ../../scripts/add-declaration-extensions.mjs && pnpm build:css && node ../../scripts/check-no-dev-jsx.mjs && node ../../scripts/check-fully-specified.mjs",
-    "build:esm": "babel src --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.ts,**/*.test.tsx,**/__tests__/**,**/*.perf.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css,**/*.css.d.ts\" --config-file ./babel.config.json",
+    "build:esm": "babel src --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.ts,**/*.test.tsx,**/__tests__/**,**/*.perf.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css,**/*.css.d.ts\" --config-file ./babel.config.cjs",
     "build:css": "node ../../scripts/build-css.mjs --package lab",
-    "dev": "babel src --watch --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css*\" --config-file ./babel.config.json",
+    "dev": "babel src --watch --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css*\" --config-file ./babel.config.cjs",
     "test": "vitest run --root ../..",
     "test:watch": "vitest --root ../..",
     "lint": "eslint src",
     "typecheck:docs": "tsc --project tsconfig.docs.json",
-    "typecheck": "tsc --project tsconfig.json --noEmit",
+    "typecheck": "tsc --project tsconfig.json --noEmit && pnpm typecheck:docs",
     "generate:emoji-data": "node scripts/generate-emoji-data.mjs"
   }
 }

package/src/Chat/__tests__/ChatTypingIndicator.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
 
 /** Real-browser and accessibility-tree binding for ChatTypingIndicator. */
 

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

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y scope ^(internal/a11y-spec/src/patterns/progressbar\.|packages/core/src/ProgressBar/|packages/lab/src/CircularProgress/|apps/storybook/stories/ProgressbarA11y)
 
 /**
  * @file CircularProgress.a11y.chromium.spec.ts

package/src/Comments/Comments.test.tsx

@@ -82,6 +82,12 @@ import type {
   CommentUser,
 } from './types';
 
+// The page's shared live regions are not the component's error Banner.
+const errorBanner = () =>
+  screen
+    .queryAllByRole('alert')
+    .find(element => !element.hasAttribute('data-astryx-live-region'));
+
 const VIEWER: CommentUser = {id: 'avery', name: 'Avery Kim'};
 const OTHER: CommentUser = {id: 'maya', name: 'Maya Chen'};
 const AGENT: CommentUser = {
@@ -900,12 +906,12 @@ describe('Comments threads', () => {
       }),
     );
     await flush();
-    const banner = screen.getByRole('alert');
+    const banner = errorBanner()!;
     expect(banner.textContent).toContain("Your reaction couldn't be saved.");
     await click(within(banner).getByRole('button', {name: 'Retry'}));
     await flush();
     expect(onReact).toHaveBeenCalledTimes(2);
-    expect(screen.queryByRole('alert')).toBeNull();
+    expect(errorBanner()).toBeUndefined();
   });
 
   it('copies a link to the comment', async () => {
@@ -999,7 +1005,7 @@ describe('Comments threads', () => {
         />
       </Sized>,
     );
-    const banner = screen.getByRole('alert');
+    const banner = errorBanner()!;
     expect(banner.textContent).toContain("Couldn't post this comment.");
     await click(within(banner).getByRole('button', {name: 'Retry'}));
     await flush();
@@ -1022,7 +1028,7 @@ describe('Comments threads', () => {
     );
     await click(screen.getByRole('button', {name: 'Load earlier comments'}));
     await flush();
-    const banner = screen.getByRole('alert');
+    const banner = errorBanner()!;
     expect(banner.textContent).toContain("Earlier comments couldn't load");
     await click(within(banner).getByRole('button', {name: 'Retry'}));
     await flush();

package/src/ListInput/ListInput.test.tsx

@@ -660,10 +660,13 @@ describe('ListInput', () => {
     expect(animate).not.toHaveBeenCalled();
     expect(screen.queryByDisplayValue('Ada')).not.toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Add guest'})).toHaveFocus();
+    // The removal and the empty state that appears join in one frame (FR9).
     await waitFor(() => {
       expect(
         Array.from(document.querySelectorAll('[aria-live="polite"]')).some(
-          node => node.textContent === 'Removed guest 1.',
+          node =>
+            node.textContent ===
+            'Removed guest 1. No guests yet Add a guest to get started.',
         ),
       ).toBe(true);
     });

package/src/MobileTokenizer/MobileTokenizer.test.tsx

@@ -56,7 +56,14 @@ function Harness({
   );
 }
 
-function CreateHarness({spy}: {spy: ReturnType<typeof vi.fn>}) {
+function CreateHarness({
+  spy,
+}: {
+  spy: (
+    items: SearchableItem[],
+    change: MobileTokenizerChange<SearchableItem>,
+  ) => void;
+}) {
   const [value, setValue] = useState<SearchableItem[]>([]);
   return (
     <MobileTokenizer
@@ -105,8 +112,10 @@ beforeEach(() => {
   window.scrollTo = vi.fn();
   vi.stubGlobal(
     'requestAnimationFrame',
+    // Next microtask, not synchronously: a real frame never runs before
+    // requestAnimationFrame returns, and callers may rely on its id.
     vi.fn((cb: FrameRequestCallback) => {
-      cb(0);
+      queueMicrotask(() => cb(0));
       return 1;
     }),
   );
@@ -302,7 +311,7 @@ describe('MobileTokenizer (Lab, single-sheet flow)', () => {
     const title = await screen.findByRole('heading', {
       name: 'No results found',
     });
-    const emptyState = title.closest('[role="status"]');
+    const emptyState = title.closest('.astryx-empty-state');
     expect(emptyState).toHaveTextContent('Try a different search.');
     expect(emptyState?.querySelector('.astryx-icon')).toHaveAttribute(
       'data-size',

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

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y always
 
 /**
  * @file ReorderGripPinchZoom.a11y.chromium.spec.ts