@astryxdesign/core 0.7.2-canary.fdd384f → 0.7.2

package/src/AvatarGroup/AvatarGroupOverflow.test.tsx

@@ -21,6 +21,29 @@ describe('AvatarGroupOverflow', () => {
     expect(overflow).toHaveTextContent('+5');
   });
 
+  it('exposes the static overflow as a named image', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" />
+        <AvatarGroupOverflow count={5} />
+      </AvatarGroup>,
+    );
+
+    const overflow = screen.getByRole('img', {name: '5 more'});
+    expect(overflow).toHaveAttribute('role', 'img');
+  });
+
+  it('keeps a caller-supplied role on the static overflow', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" />
+        <AvatarGroupOverflow count={5} role="note" />
+      </AvatarGroup>,
+    );
+
+    expect(screen.getByLabelText('5 more')).toHaveAttribute('role', 'note');
+  });
+
   it('reflects the group size on the overflow chip', () => {
     render(
       <AvatarGroup size="lg">
@@ -66,7 +89,7 @@ describe('AvatarGroupOverflow', () => {
       </AvatarGroup>,
     );
 
-    const overflow = screen.getByLabelText('3 more');
+    const overflow = screen.getByRole('button', {name: '3 more'});
     expect(overflow.tagName).toBe('BUTTON');
   });
 

package/src/AvatarGroup/AvatarGroupOverflow.tsx

@@ -208,6 +208,8 @@ export function AvatarGroupOverflow({
   return (
     <span
       ref={ref}
+      // Before the caller's props so a caller-supplied role still wins.
+      role="img"
       {...rest}
       aria-label={label}
       {...mergeProps(

package/src/Chat/ChatLayoutScrollButton.test.tsx

@@ -70,6 +70,19 @@ describe('ChatLayoutScrollButton', () => {
     ).toHaveFocus();
   });
 
+  it('makes the pill inert whenever the visible state turns off', () => {
+    const {container, rerender} = render(
+      <ChatLayoutScrollButton isVisible onClick={() => {}} />,
+    );
+    const pill = container.querySelector('.astryx-chat-layout-scroll-button');
+
+    expect(pill).not.toHaveAttribute('inert');
+
+    rerender(<ChatLayoutScrollButton isVisible={false} onClick={() => {}} />);
+
+    expect(pill).toHaveAttribute('inert');
+  });
+
   it('is not keyboard reachable while hidden', async () => {
     const user = userEvent.setup();
     render(

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -86,8 +86,9 @@ const styles = stylex.create({
     opacity: 0,
     pointerEvents: 'none',
     // The hidden pill paints nothing, so focus landing on it would have no
-    // visible indicator (WCAG 2.2 SC 2.4.7). `opacity` and `pointer-events`
-    // leave the button in sequential focus navigation; `visibility` removes it.
+    // visible indicator (WCAG 2.2 SC 2.4.7). `visibility` removes it from
+    // sequential navigation after the fade; `inert` immediately prevents new
+    // focus and makes an already-focused descendant relinquish focus.
     visibility: 'hidden',
     maxWidth: sizeVars['--size-element-md'],
   },
@@ -151,6 +152,7 @@ export function ChatLayoutScrollButton({
       {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
       {...rest}>
       <div
+        inert={!isVisible}
         {...mergeProps(
           themeProps('chat-layout-scroll-button'),
           stylex.props(

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

@@ -44,6 +44,7 @@ const STORY_ID = 'core-chatlayout--scroll-affordance-states';
  * a stable handle for it.
  */
 const PILL = '.astryx-chat-layout-scroll-button';
+const AFFORDANCE = `${PILL} button`;
 
 /** One observed tab stop, identified structurally rather than by its text. */
 type FocusStop = {
@@ -126,7 +127,11 @@ test.afterAll(async () => {
 
 async function openStory(
   page: Page,
-  {theme = 'neutral', colorMode = 'light'} = {},
+  {
+    theme = 'neutral',
+    colorMode = 'light',
+    holdMotion = true,
+  }: {theme?: string; colorMode?: string; holdMotion?: boolean} = {},
 ): Promise<Locator> {
   page.on('pageerror', error => pageErrors.push(String(error)));
   browserVersion = page.context().browser()?.version() ?? 'unknown';
@@ -136,7 +141,9 @@ async function openStory(
   );
   const root = page.locator('.astryx-chat-layout');
   await root.waitFor({state: 'visible'});
-  await holdMotionStill(page);
+  if (holdMotion) {
+    await holdMotionStill(page);
+  }
   await page.evaluate(async () => document.fonts.ready);
   return root;
 }
@@ -169,21 +176,25 @@ async function pillVisibility(page: Page): Promise<string> {
 }
 
 /**
- * Can the affordance take focus at all? This is the mechanism under test:
- * `visibility: hidden` removes an element from sequential focus navigation AND
- * refuses programmatic focus, which `opacity: 0` does neither of. A CSS locator
- * is used rather than a role query because a hidden button is not in the
- * accessibility tree and a role query would not resolve it.
+ * Can the affordance take new focus at all? This is one half of the mechanism
+ * under test: `inert` refuses programmatic focus immediately, while delayed
+ * `visibility: hidden` removes the control from sequential navigation after the
+ * fade. A CSS locator is used rather than a role query because a hidden button
+ * is not in the accessibility tree and a role query would not resolve it.
  */
-async function affordanceAcceptsFocus(page: Page): Promise<boolean> {
-  return page
-    .locator('.astryx-chat-layout-scroll-button button')
-    .evaluate(element => {
-      // preventScroll: focusing must not move the scroll position, or the
-      // probe would change the very state the next assertion reads.
-      (element as HTMLElement).focus({preventScroll: true});
-      return document.activeElement === element;
-    });
+async function affordanceAcceptsFocus(
+  page: Page,
+  resetFocus: Locator,
+): Promise<boolean> {
+  // Start outside the affordance so this probe proves a NEW focus transfer;
+  // equality alone would also be true when a button stayed active as it hid.
+  await resetFocus.focus();
+  return page.locator(AFFORDANCE).evaluate(element => {
+    // preventScroll: focusing must not move the scroll position, or the
+    // probe would change the very state the next assertion reads.
+    (element as HTMLElement).focus({preventScroll: true});
+    return document.activeElement === element;
+  });
 }
 
 /**
@@ -340,6 +351,36 @@ async function capture(
   return receipt;
 }
 
+test('the hiding affordance releases focus before its fade finishes', async ({
+  page,
+}) => {
+  const root = await openStory(page, {holdMotion: false});
+  const pill = page.locator(PILL);
+  const affordance = page.locator(AFFORDANCE);
+
+  await scrollToTop(root);
+  await expect(pill).toHaveCSS('visibility', 'visible');
+  await affordance.focus();
+  await expect(affordance).toBeFocused();
+
+  await page.keyboard.press('Enter');
+  await expect
+    .poll(
+      async () =>
+        affordance.evaluate(element => document.activeElement === element),
+      {timeout: 5000},
+    )
+    .toBe(false);
+
+  // `visibility` flips only after the fade. Focus leaving while it is still
+  // visible proves the immediate `inert` state rather than the delayed CSS.
+  await expect(pill).toHaveCSS('visibility', 'visible');
+  await expect
+    .poll(async () => distanceFromBottom(root), {timeout: 5000})
+    .toBeLessThan(2);
+  await expect(pill).toHaveCSS('visibility', 'hidden');
+});
+
 test('the scroll affordance is keyboard reachable exactly while it is visible', async ({
   page,
 }) => {
@@ -367,7 +408,7 @@ test('the scroll affordance is keyboard reachable exactly while it is visible',
   expect(await distanceFromBottom(root)).toBeLessThan(2);
   await expect(pill).toHaveCSS('visibility', 'hidden');
   expect(
-    await affordanceAcceptsFocus(page),
+    await affordanceAcceptsFocus(page, before),
     'a control that paints nothing must refuse focus (WCAG 2.2 SC 2.4.7)',
   ).toBe(false);
   const restFrame = await capture(page, 'rest-hidden', {
@@ -384,7 +425,7 @@ test('the scroll affordance is keyboard reachable exactly while it is visible',
   await expect(pill).toHaveCSS('visibility', 'visible');
   expect(await distanceFromBottom(root)).toBeGreaterThan(100);
   expect(
-    await affordanceAcceptsFocus(page),
+    await affordanceAcceptsFocus(page, before),
     'the visible affordance must keep its keyboard access',
   ).toBe(true);
   await expect(
@@ -415,8 +456,12 @@ test('the scroll affordance is keyboard reachable exactly while it is visible',
     .poll(async () => distanceFromBottom(root), {timeout: 5000})
     .toBeLessThan(2);
   await expect(pill).toHaveCSS('visibility', 'hidden');
+  await expect(
+    page.locator(AFFORDANCE),
+    'the affordance must relinquish focus when it hides',
+  ).not.toBeFocused();
   expect(
-    await affordanceAcceptsFocus(page),
+    await affordanceAcceptsFocus(page, before),
     'after returning to the bottom the affordance must refuse focus again',
   ).toBe(false);
   const returnedFrame = await capture(page, 'returned-hidden', {

package/src/CheckboxList/CheckboxList.fr10.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it} from 'vitest';
-import {screen} from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
 import {expectFieldInputProps} from '../Field/fieldInputFamily.testing';
 import {describeFieldInputParts} from '../Field/fieldInputFamily.render-testing';
 import {CheckboxList, type CheckboxListProps} from './CheckboxList';
@@ -22,3 +22,30 @@ describeFieldInputParts('CheckboxList', {
   getControl: () => screen.getByRole('group'),
   inGroup: false,
 });
+
+describe('CheckboxList FR10 details', () => {
+  it("names the group by its label and then a caller's aria-labelledby", () => {
+    render(
+      <>
+        <span id="caller-name">Billing</span>
+        <CheckboxList
+          label="Preferences"
+          value={[]}
+          onChange={() => {}}
+          aria-labelledby="caller-name">
+          <CheckboxListItem label="A" value="a" />
+        </CheckboxList>
+      </>,
+    );
+    const group = screen.getByRole('group');
+    const ids = group.getAttribute('aria-labelledby')?.split(' ');
+    expect(ids).toHaveLength(2);
+    expect(document.getElementById(ids?.[0] ?? '')?.textContent).toContain(
+      'Preferences',
+    );
+    expect(ids?.[1]).toBe('caller-name');
+    expect(screen.getByRole('group', {name: 'Preferences Billing'})).toBe(
+      group,
+    );
+  });
+});

package/src/CheckboxList/CheckboxList.tsx

@@ -38,6 +38,7 @@ import {useTooltip} from '../Tooltip';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
+import {joinAriaIDs} from '../utils/inputAria';
 import {
   CheckboxListContext,
   type CheckboxListContextValue,
@@ -170,6 +171,7 @@ export function CheckboxList({
   controlXstyle,
   controlClassName,
   controlStyle,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-describedby': ariaDescribedByProp,
   ...restProps
 }: CheckboxListProps) {
@@ -290,7 +292,8 @@ export function CheckboxList({
             controlStyle,
           )}
           role="group"
-          aria-labelledby={labelID}
+          // A caller aria-labelledby names the group together with its label.
+          aria-labelledby={joinAriaIDs(labelID, ariaLabelledByProp)}
           aria-describedby={
             [
               ariaDescribedByProp,

package/src/Code/Code.doc.mjs

@@ -4,6 +4,7 @@
 export const docs = {
   name: 'Code',
   displayName: 'Code',
+  keywords: ['inlinecode', 'monospace'],
   group: 'Code',
   category: 'Content',
   description:

package/src/CommandPalette/CommandPalette.doc.mjs

@@ -87,6 +87,8 @@ export const docs = {
     'modal',
     'dialog',
     'navigation',
+    'commandmenu',
+    'cmdk',
   ],
   description:
     'Root component. Manages open state, search, keyboard navigation, and composition slots.',

package/src/ContextMenu/ContextMenu.test.tsx

@@ -10,7 +10,7 @@
 
 import {useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
-import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {describe, it, expect, vi, beforeAll, beforeEach} from 'vitest';
 import {render, screen, fireEvent, act, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {readFileSync} from 'node:fs';
@@ -26,6 +26,11 @@ import {
 import {DropdownMenuItem} from '../DropdownMenu/DropdownMenuItem';
 import {Divider} from '../Divider';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
+import {warmMenuBottomSheet} from '../DropdownMenu/__tests__/warmMenuBottomSheet';
+
+// The touch sheet is loaded lazily; resolve its modules once up front, so
+// ContextMenu's own lazy sheet renders within the cases' waitFor.
+beforeAll(warmMenuBottomSheet, 20000);
 
 function NestedDismissibleLayer({onDismiss}: {onDismiss: () => void}) {
   const [isOpen, setIsOpen] = useState(true);
@@ -268,7 +273,12 @@ describe('ContextMenu', () => {
     );
 
     fireEvent.contextMenu(screen.getByText('Right-click me'));
-    await user.click(screen.getByRole('button', {name: 'Move to project'}));
+    // The sheet is lazy: its first render suspends once even when the module
+    // is already loaded, so wait for the row rather than relying on an
+    // earlier case to have rendered a sheet.
+    await user.click(
+      await screen.findByRole('button', {name: 'Move to project'}),
+    );
 
     const submenuHeading = screen.getByRole('heading', {
       name: 'Move to project',

package/src/Drawer/Drawer.doc.mjs

@@ -55,6 +55,7 @@ export const docs = {
     'sidebar',
     'dialog',
     'side drawer',
+    'sidesheet',
   ],
   // No isInline docs-preview prop (the drawer has no inline containment), so
   // this is the overlay preview: closed on load with an open trigger, knobs

package/src/DropdownMenu/DropdownMenu.ssr.test.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DropdownMenu.ssr.test.tsx
+ * @input DropdownMenu server markup and React hydration
+ * @output Proves a bottom-sheet DropdownMenu hydrates without a recoverable
+ *   error while its on-demand sheet has not loaded (spec:AST-013 FR9)
+ * @position SSR acceptance test for DropdownMenu
+ */
+
+import {act} from 'react';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {hydrateRoot} from 'react-dom/client';
+import {renderToString} from 'react-dom/server';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.body.replaceChildren();
+});
+
+async function serverRenderThenHydrate(): Promise<unknown[]> {
+  // A fresh module graph is a fresh server process: the sheet has not loaded.
+  vi.resetModules();
+  const {DropdownMenu} = await import('./DropdownMenu');
+  const tree = (
+    <DropdownMenu
+      button={{label: 'Actions'}}
+      presentation="bottom-sheet"
+      items={[{label: 'Edit project'}, {label: 'Delete'}]}
+    />
+  );
+  const container = document.createElement('div');
+  container.innerHTML = renderToString(tree);
+  document.body.appendChild(container);
+
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+  const recoverableErrors: unknown[] = [];
+  let root!: ReturnType<typeof hydrateRoot>;
+  await act(async () => {
+    root = hydrateRoot(container, tree, {
+      onRecoverableError: error => recoverableErrors.push(error),
+    });
+  });
+  await act(async () => {
+    root.unmount();
+  });
+  container.remove();
+  return recoverableErrors;
+}
+
+describe('DropdownMenu — SSR', () => {
+  it('hydrates a bottom-sheet menu cleanly on the first renders of a server process', async () => {
+    expect(await serverRenderThenHydrate()).toEqual([]);
+    expect(await serverRenderThenHydrate()).toEqual([]);
+    expect(await serverRenderThenHydrate()).toEqual([]);
+  }, 30000);
+});

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -9,7 +9,15 @@
  * SYNC: When DropdownMenu.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  beforeEach,
+  afterEach,
+} from 'vitest';
 import {readFileSync} from 'node:fs';
 import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -19,6 +27,7 @@ import {DropdownMenu, type DropdownMenuTriggerProps} from './DropdownMenu';
 import {DropdownMenuItem} from './DropdownMenuItem';
 import {DropdownMenuDivider} from './DropdownMenuDivider';
 import {DropdownMenuGroup} from './DropdownMenuGroup';
+import {warmMenuBottomSheet} from './__tests__/warmMenuBottomSheet';
 import {DropdownMenuSubMenu} from './DropdownMenuSubMenu';
 import {Divider} from '../Divider';
 import {rtlStyles} from '../utils';
@@ -74,6 +83,10 @@ beforeEach(() => {
   };
 });
 
+// The touch sheet is loaded lazily; resolve it once so sheets below render
+// synchronously.
+beforeAll(warmMenuBottomSheet, 20000);
+
 describe('DropdownMenu', () => {
   it('renders trigger button with label', () => {
     render(
@@ -1554,10 +1567,9 @@ describe('DropdownMenuItem host attributes', () => {
 
 describe('DropdownMenuGroup (compound mode)', () => {
   it('a focusable node in the heading is not reachable by the arrow keys', async () => {
-    // A heading is not a menu row, so a control inside one lands in the
-    // group but outside the roving focus order. The type does not prevent
-    // this — a rich heading is a legitimate need — so the behavior is
-    // pinned rather than discovered.
+    // The public ReactNode type permits a focusable descendant, but the menu's
+    // roving focus model cannot reach it. Pin that shipped gap while the public
+    // title contract remains unsettled.
     const user = userEvent.setup();
     render(
       <DropdownMenu button={{label: 'Actions'}}>