@astryxdesign/core 0.1.2 → 0.1.3-canary.6d57c8d

package/src/CodeBlock/CodeBlock.test.tsx

@@ -0,0 +1,115 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeBlock.test.tsx
+ * @input Uses vitest, @testing-library/react, CodeBlock component
+ * @output Unit tests for CodeBlock (copy button, collapse, scroll region a11y)
+ * @position Testing; validates CodeBlock implementation
+ *
+ * SYNC: When CodeBlock.tsx changes, update tests to match new behavior
+ */
+
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
+import {CodeBlock} from './CodeBlock';
+
+// A code sample long enough to exceed the default collapsible threshold (10).
+const LONG_CODE = Array.from(
+  {length: 15},
+  (_, i) => `const line${i} = ${i};`,
+).join('\n');
+
+describe('CodeBlock', () => {
+  beforeEach(() => {
+    // jsdom does not implement the async Clipboard API.
+    Object.assign(navigator, {
+      clipboard: {writeText: vi.fn().mockResolvedValue(undefined)},
+    });
+  });
+
+  it('renders the code', () => {
+    render(<CodeBlock code="const x = 1;" language="javascript" />);
+    expect(screen.getByText(/const/)).toBeInTheDocument();
+  });
+
+  it('makes the scroll container keyboard-focusable', () => {
+    render(<CodeBlock code="const x = 1;" language="javascript" />);
+    const region = screen.getByRole('group');
+    expect(region).toHaveAttribute('tabindex', '0');
+    expect(region).toHaveAttribute('aria-label', 'javascript');
+  });
+
+  it('labels the scroll region "Code" when no language label is shown', () => {
+    render(<CodeBlock code="hello" hasLanguageLabel={false} />);
+    const region = screen.getByRole('group');
+    expect(region).toHaveAttribute('tabindex', '0');
+    expect(region).toHaveAttribute('aria-label', 'Code');
+  });
+
+  it('copies code when the copy button is clicked', () => {
+    render(<CodeBlock code="const x = 1;" language="javascript" />);
+    const copyButton = screen.getByRole('button', {name: 'Copy code'});
+    fireEvent.click(copyButton);
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('const x = 1;');
+  });
+
+  it('does NOT collapse the block when the copy button is clicked', () => {
+    render(
+      <CodeBlock
+        code={LONG_CODE}
+        language="javascript"
+        title="example"
+        isCollapsible
+      />,
+    );
+    // The collapsible header exposes aria-expanded.
+    const header = screen
+      .getAllByRole('button')
+      .find(el => el.hasAttribute('aria-expanded'));
+    expect(header).toBeTruthy();
+    expect(header).toHaveAttribute('aria-expanded', 'true');
+
+    const copyButton = screen.getByRole('button', {name: 'Copy code'});
+    fireEvent.click(copyButton);
+
+    // Clicking Copy must not toggle the collapsible header.
+    expect(header).toHaveAttribute('aria-expanded', 'true');
+    expect(navigator.clipboard.writeText).toHaveBeenCalled();
+  });
+
+  it('does not nest the copy button inside the collapsible header role="button"', () => {
+    render(
+      <CodeBlock
+        code={LONG_CODE}
+        language="javascript"
+        title="example"
+        isCollapsible
+      />,
+    );
+    const header = screen
+      .getAllByRole('button')
+      .find(el => el.hasAttribute('aria-expanded'));
+    const copyButton = screen.getByRole('button', {name: 'Copy code'});
+    expect(header).toBeTruthy();
+    // The copy button must be a sibling, not a descendant of the interactive
+    // header — nested interactive controls are invalid ARIA.
+    expect(header!.contains(copyButton)).toBe(false);
+  });
+
+  it('still toggles collapse when the header itself is clicked', () => {
+    render(
+      <CodeBlock
+        code={LONG_CODE}
+        language="javascript"
+        title="example"
+        isCollapsible
+      />,
+    );
+    const header = screen
+      .getAllByRole('button')
+      .find(el => el.hasAttribute('aria-expanded'))!;
+    expect(header).toHaveAttribute('aria-expanded', 'true');
+    fireEvent.click(header);
+    expect(header).toHaveAttribute('aria-expanded', 'false');
+  });
+});

package/src/CodeBlock/CodeBlock.tsx

@@ -87,7 +87,7 @@ const styles = stylex.create({
     backgroundColor: 'var(--color-syntax-background)',
     overflow: 'hidden',
   },
-  header: {
+  headerRow: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -97,6 +97,19 @@ const styles = stylex.create({
     top: 0,
     zIndex: 1,
   },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+    minWidth: 0,
+    // Reset default <button> appearance for the collapsible title control.
+    padding: 0,
+    border: 'none',
+    backgroundColor: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    textAlign: 'start',
+  },
   headerWithDivider: {
     paddingBlock: spacingVars['--spacing-2'],
     borderBottomWidth: borderVars['--border-width'],
@@ -469,7 +482,10 @@ function useTokenLines(
 // Span-mode code element
 // ---------------------------------------------------------------------------
 
-function buildSpanLine(lineText: string, tokens: SyntaxToken[]): React.ReactNode {
+function buildSpanLine(
+  lineText: string,
+  tokens: SyntaxToken[],
+): React.ReactNode {
   if (tokens.length === 0) {
     return lineText || '\u200b';
   }
@@ -677,7 +693,9 @@ export function CodeBlock({
   const copyButtonEl = hasCopyButton ? (
     <button
       type="button"
-      onClick={() => {
+      onClick={e => {
+        // Stop propagation so copying does not toggle the collapsible header.
+        e.stopPropagation();
         void handleCopy();
       }}
       aria-label={copied ? 'Copied' : 'Copy code'}
@@ -691,39 +709,44 @@ export function CodeBlock({
 
   const headerEl = showHeader ? (
     <div
-      role={canCollapse ? 'button' : undefined}
-      tabIndex={canCollapse ? 0 : undefined}
-      aria-expanded={canCollapse ? !isCollapsed : undefined}
-      onClick={canCollapse ? () => setIsCollapsed(prev => !prev) : undefined}
-      onKeyDown={
-        canCollapse
-          ? (e: React.KeyboardEvent) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                setIsCollapsed(prev => !prev);
-              }
-            }
-          : undefined
-      }
       {...stylex.props(
-        styles.header,
+        styles.headerRow,
         hasLineNumbers ? styles.headerWithDivider : styles.headerCompact,
-        canCollapse && styles.headerCollapsible,
       )}>
-      <span {...stylex.props(styles.headerTitle)}>
-        {title}
-        {title && languageLabel ? ' — ' : ''}
-        {languageLabel}
-        {canCollapse && (
-          <span
-            {...stylex.props(
-              styles.collapseChevron,
-              isCollapsed && styles.collapseChevronCollapsed,
-            )}>
-            <Icon icon="chevronDown" size="xsm" color="inherit" />
-          </span>
-        )}
-      </span>
+      <div
+        role={canCollapse ? 'button' : undefined}
+        tabIndex={canCollapse ? 0 : undefined}
+        aria-expanded={canCollapse ? !isCollapsed : undefined}
+        onClick={canCollapse ? () => setIsCollapsed(prev => !prev) : undefined}
+        onKeyDown={
+          canCollapse
+            ? (e: React.KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  setIsCollapsed(prev => !prev);
+                }
+              }
+            : undefined
+        }
+        {...stylex.props(
+          styles.header,
+          canCollapse && styles.headerCollapsible,
+        )}>
+        <span {...stylex.props(styles.headerTitle)}>
+          {title}
+          {title && languageLabel ? ' — ' : ''}
+          {languageLabel}
+          {canCollapse && (
+            <span
+              {...stylex.props(
+                styles.collapseChevron,
+                isCollapsed && styles.collapseChevronCollapsed,
+              )}>
+              <Icon icon="chevronDown" size="xsm" color="inherit" />
+            </span>
+          )}
+        </span>
+      </div>
       {copyButtonEl}
     </div>
   ) : null;
@@ -731,6 +754,13 @@ export function CodeBlock({
   const codeBody = (
     <div
       ref={scrollContainerRef}
+      // The scroll container is keyboard-focusable so keyboard users can
+      // scroll long or wide code that overflows the viewport. Uses
+      // role="group" (not "region") so multiple code blocks on a page don't
+      // create duplicate same-named landmarks (axe: landmark-unique).
+      tabIndex={0}
+      role="group"
+      aria-label={languageLabel ?? 'Code'}
       {...mergeProps(stylex.props(styles.scrollContainer), {
         style: scrollStyle,
       })}>

package/src/CommandPalette/CommandPalette.test.tsx

@@ -8,9 +8,10 @@
  */
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
-import {render, screen, waitFor} from '@testing-library/react';
+import {render, screen, waitFor, fireEvent} from '@testing-library/react';
 import {CommandPalette} from './CommandPalette';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
+import type {SearchSource, SearchableItem} from '@astryxdesign/core/Typeahead';
 
 const simpleSource = createStaticSource([
   {id: 'home', label: 'Home'},
@@ -223,4 +224,49 @@ describe('CommandPalette', () => {
     dialog.dispatchEvent(escapeEvent);
     expect(handleOpenChange).toHaveBeenCalledWith(false);
   });
+
+  it('keeps the empty state mounted while a no-result search is pending', async () => {
+    // A source whose searches resolve only when we release them, so we can
+    // observe the render output while a search transition is in flight.
+    const resolvers: ((items: SearchableItem[]) => void)[] = [];
+    const source: SearchSource = {
+      bootstrap: () => [],
+      async search(): Promise<SearchableItem[]> {
+        return new Promise<SearchableItem[]>(resolve => {
+          resolvers.push(resolve);
+        });
+      },
+    };
+
+    render(
+      <CommandPalette
+        isOpen={true}
+        onOpenChange={() => {}}
+        searchSource={source}
+        emptyBootstrapText="Type to search"
+        emptySearchText="No results"
+      />,
+    );
+
+    const input = screen.getByRole('combobox');
+
+    // First search: commits an empty result for query "z".
+    fireEvent.change(input, {target: {value: 'z'}});
+    await waitFor(() => expect(resolvers).toHaveLength(1));
+    resolvers[0]([]);
+    await waitFor(() =>
+      expect(screen.getByText('No results')).toBeInTheDocument(),
+    );
+
+    // Second keystroke while already empty: the empty state must remain in the
+    // DOM for the whole pending window — no unmount/remount flash.
+    fireEvent.change(input, {target: {value: 'zz'}});
+    expect(screen.getByText('No results')).toBeInTheDocument();
+    await waitFor(() => expect(resolvers).toHaveLength(2));
+    expect(screen.getByText('No results')).toBeInTheDocument();
+    resolvers[1]([]);
+    await waitFor(() =>
+      expect(screen.getByText('No results')).toBeInTheDocument(),
+    );
+  });
 });

package/src/CommandPalette/CommandPalette.tsx

@@ -24,12 +24,7 @@ import {
   type ReactNode,
 } from 'react';
 import {Dialog} from '../Dialog';
-import {
-  Layout,
-  LayoutHeader,
-  LayoutContent,
-  LayoutFooter,
-} from '../Layout';
+import {Layout, LayoutHeader, LayoutContent, LayoutFooter} from '../Layout';
 import type {SearchSource, SearchableItem} from '../Typeahead';
 import {useCombobox} from '../Selector';
 import type {SelectorOptionData} from '../Selector';
@@ -133,9 +128,7 @@ function getGroup(item: SearchableItem): string | undefined {
  * When groups are present, items are ordered by group (preserving insertion order),
  * with ungrouped items at the end — matching the DefaultRenderer layout.
  */
-function buildSelectableItems(
-  items: SearchableItem[],
-): SelectorOptionData[] {
+function buildSelectableItems(items: SearchableItem[]): SelectorOptionData[] {
   const hasGroups = items.some(item => getGroup(item) != null);
 
   if (!hasGroups) {
@@ -258,9 +251,7 @@ function ItemRenderer<T extends SearchableItem>({
  * />
  * ```
  */
-export function CommandPalette<
-  T extends SearchableItem = SearchableItem,
->({
+export function CommandPalette<T extends SearchableItem = SearchableItem>({
   ref,
   isOpen,
   isInline,
@@ -488,13 +479,12 @@ export function CommandPalette<
     ],
   );
 
-  // Empty state uses committed search (= what current results correspond to),
-  // not optimisticSearch (= what the user typed).
-  // While the transition is pending, search stays at '' so showEmptyBootstrap
-  // remains true even after the user has started typing.
+  // `search` is the committed query the on-screen results correspond to (it
+  // still holds the previous query while a transition is pending). Keeping both
+  // flags ungated by `isPending` makes them exhaustive over the empty case, so
+  // the empty state is never unmounted and re-added mid-search (which flashed).
   const showEmptyBootstrap = search === '' && optimisticResults.length === 0;
-  const showEmptySearch =
-    !isPending && search !== '' && optimisticResults.length === 0;
+  const showEmptySearch = search !== '' && optimisticResults.length === 0;
 
   let listContent: ReactNode;
   if (showEmptyBootstrap) {
@@ -502,9 +492,7 @@ export function CommandPalette<
       <CommandPaletteEmpty>{emptyBootstrapText}</CommandPaletteEmpty>
     );
   } else if (showEmptySearch) {
-    listContent = (
-      <CommandPaletteEmpty>{emptySearchText}</CommandPaletteEmpty>
-    );
+    listContent = <CommandPaletteEmpty>{emptySearchText}</CommandPaletteEmpty>;
   } else {
     listContent = (
       <ItemRenderer

package/src/ContextMenu/ContextMenu.doc.mjs

@@ -53,10 +53,10 @@ export const docs = {
       default: "'md'",
     },
     {
-      name: 'hasAutoFocus',
-      type: 'boolean',
-      description: 'Whether to auto-focus the first menu item when the menu opens. Set to false for inline showcases.',
-      default: 'true',
+      name: 'label',
+      type: 'string',
+      description: 'Accessible name for the menu surface, announced when it opens.',
+      default: "'Context menu'",
     },
     {
       name: 'isDisabled',

package/src/ContextMenu/ContextMenu.test.tsx

@@ -9,7 +9,7 @@
  */
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {render, screen, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {ContextMenu} from './ContextMenu';
 import {ContextMenuItem} from './index';
@@ -60,6 +60,52 @@ describe('ContextMenu', () => {
     expect(screen.getByRole('menu', {hidden: true})).toBeInTheDocument();
   });
 
+  it('typeahead focuses the matching menu item (menus-11)', () => {
+    render(
+      <ContextMenu items={[{label: 'Cut'}, {label: 'Copy'}, {label: 'Paste'}]}>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+    fireEvent.contextMenu(screen.getByText('Right-click me'));
+    const menu = screen.getByRole('menu', {hidden: true});
+    fireEvent.keyDown(menu, {key: 'p'});
+    expect(
+      screen.getByRole('menuitem', {name: 'Paste', hidden: true}),
+    ).toHaveFocus();
+  });
+
+  it('gives the menu an accessible name (menus-13)', () => {
+    render(
+      <ContextMenu items={[{label: 'Item 1'}]}>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+    // Defaults to "Context menu"; overridable via label.
+    expect(
+      screen.getByRole('menu', {name: 'Context menu', hidden: true}),
+    ).toBeInTheDocument();
+  });
+
+  it('uses a custom label', () => {
+    render(
+      <ContextMenu items={[{label: 'Item 1'}]} label="Row actions">
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+    expect(
+      screen.getByRole('menu', {name: 'Row actions', hidden: true}),
+    ).toBeInTheDocument();
+  });
+
+  it('does not put aria-haspopup on the role-less trigger wrapper (menus-15)', () => {
+    render(
+      <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+    expect(screen.getByTestId('ctx')).not.toHaveAttribute('aria-haspopup');
+  });
+
   it('opens menu on right-click', () => {
     render(
       <ContextMenu items={[{label: 'Item 1'}]}>
@@ -71,6 +117,48 @@ describe('ContextMenu', () => {
     expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
   });
 
+  it('closes on Escape even when opened without auto-focus', () => {
+    render(
+      <ContextMenu items={[{label: 'Item 1'}]}>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+
+    fireEvent.contextMenu(screen.getByText('Right-click me'));
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
+    // Focus is not inside the menu, so the Escape path must be document-level.
+    fireEvent.keyDown(document, {key: 'Escape'});
+    expect(HTMLElement.prototype.hidePopover).toHaveBeenCalled();
+  });
+
+  it('ignores Escape during IME composition', () => {
+    render(
+      <ContextMenu items={[{label: 'Item 1'}]}>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+
+    fireEvent.contextMenu(screen.getByText('Right-click me'));
+    fireEvent.keyDown(document, {key: 'Escape', isComposing: true});
+    expect(HTMLElement.prototype.hidePopover).not.toHaveBeenCalled();
+  });
+
+  it('restores focus to the trigger on close', () => {
+    render(
+      <ContextMenu items={[{label: 'Item 1'}]}>
+        <button type="button">Right-click me</button>
+      </ContextMenu>,
+    );
+
+    const trigger = screen.getByRole('button', {name: 'Right-click me'});
+    trigger.focus();
+    expect(trigger).toHaveFocus();
+
+    fireEvent.contextMenu(trigger);
+    fireEvent.keyDown(document, {key: 'Escape'});
+    expect(trigger).toHaveFocus();
+  });
+
   it('prevents default context menu on right-click', () => {
     render(
       <ContextMenu items={[{label: 'Item 1'}]}>
@@ -103,6 +191,72 @@ describe('ContextMenu', () => {
     );
     expect(screen.getByTestId('my-context-menu')).toBeInTheDocument();
   });
+
+  it('opens from a keyboard-invoked contextmenu (Shift+F10 / Menu key)', () => {
+    render(
+      <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+    const trigger = screen.getByTestId('ctx');
+    // Anchor the trigger box so the rect fallback has a position to read.
+    trigger.getBoundingClientRect = () =>
+      ({
+        left: 40,
+        top: 10,
+        bottom: 30,
+        right: 100,
+        width: 60,
+        height: 20,
+      }) as DOMRect;
+    // Keyboard-initiated contextmenu: coords are (0,0) and detail is 0.
+    fireEvent.contextMenu(trigger, {clientX: 0, clientY: 0, detail: 0});
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
+  });
+
+  it('opens on touch long-press', () => {
+    vi.useFakeTimers();
+    try {
+      render(
+        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
+          <div>Long-press me</div>
+        </ContextMenu>,
+      );
+      const trigger = screen.getByTestId('ctx');
+      fireEvent.touchStart(trigger, {
+        touches: [{clientX: 20, clientY: 20}],
+      });
+      // Not open until the long-press threshold elapses.
+      expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+      act(() => {
+        vi.advanceTimersByTime(500);
+      });
+      expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('cancels the long-press when the finger moves past the threshold', () => {
+    vi.useFakeTimers();
+    try {
+      render(
+        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
+          <div>Long-press me</div>
+        </ContextMenu>,
+      );
+      const trigger = screen.getByTestId('ctx');
+      fireEvent.touchStart(trigger, {touches: [{clientX: 20, clientY: 20}]});
+      // Move past MOVE_CANCEL_PX (10px) — treated as a scroll, not a press.
+      fireEvent.touchMove(trigger, {touches: [{clientX: 20, clientY: 40}]});
+      act(() => {
+        vi.advanceTimersByTime(500);
+      });
+      expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });
 
 describe('ContextMenu items', () => {