@astryxdesign/core 0.1.2-canary.eb7243a → 0.1.2-canary.f03e2cc

package/dist/hooks/useTreeFocus.js

@@ -1,274 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file useTreeFocus.ts
- * @input Uses React useCallback, useRef
- * @output Exports useTreeFocus hook for WAI-ARIA tree keyboard navigation
- * @position Core hook; used by TreeList for roving tabindex + APG tree keyboard model
- *
- * SYNC: When modified, update:
- * - /packages/core/src/hooks/index.ts
- * - /packages/core/src/hooks/useTreeFocus.doc.mjs
- * - /packages/core/src/hooks/useTreeFocus.test.tsx
- */
-import { useCallback, useRef } from 'react';
-
-/** Keys handled by the tree keyboard model (used to gate typeahead). */
-const NAVIGATION_KEYS = new Set(['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End', 'Enter', ' ']);
-
-/** Default reset delay for the typeahead buffer. */
-const DEFAULT_TYPEAHEAD_RESET_MS = 500;
-
-/**
- * Configuration for tree focus behavior.
- *
- * The tree keyboard model differs from a linear list (useListFocus): while
- * ArrowUp/ArrowDown/Home/End roam linearly over the *visible* treeitems,
- * ArrowRight/ArrowLeft carry tree semantics (expand/collapse, move to
- * first-child / parent). The hook stays generic by taking callbacks for the
- * tree-specific bits (expansion toggling, activation) — mirroring how
- * useGridFocus takes `isCellFocusable` rather than hardcoding disabled logic.
- */
-
-/**
- * Return type for useTreeFocus hook.
- */
-
-/**
- * Hook for managing roving-tabindex focus + the WAI-ARIA tree keyboard model.
- *
- * A tree is not a linear list: ArrowUp/ArrowDown/Home/End roam linearly over
- * the *visible* treeitems (skipping disabled ones), but ArrowRight/ArrowLeft
- * carry tree semantics. This is why a tree needs its own hook rather than
- * reusing `useListFocus` — the same reason 2D grids get `useGridFocus`.
- *
- * - ArrowDown / ArrowUp: move to next/previous visible treeitem (skip disabled)
- * - ArrowRight: collapsed parent → expand; expanded parent → first child;
- *   leaf → no-op
- * - ArrowLeft: expanded parent → collapse; otherwise → move to parent treeitem
- * - Home / End: first / last visible treeitem
- * - Enter / Space: activate (`onActivate`), falling back to expansion toggle
- * - Printable characters: typeahead to the next matching treeitem
- *
- * The hook is DOM-query based (reads aria-expanded/aria-level and data-*
- * attributes) and stays generic via option callbacks for the tree-specific
- * bits (`onToggleExpand`, `onActivate`, `getLevel`, `isItemDisabled`, …).
- *
- * @example
- * ```
- * const {treeRef, handleKeyDown} = useTreeFocus<HTMLUListElement>({
- *   onToggleExpand: id => toggle(id),
- *   onActiveChange: id => setActiveId(id),
- * });
- *
- * <ul ref={treeRef} role="tree" onKeyDown={handleKeyDown}>
- *   {items.map(item => <li role="treeitem" tabIndex={-1}>{item.label}</li>)}
- * </ul>
- * ```
- */
-export function useTreeFocus(options = {}) {
-  const {
-    itemSelector = '[role="treeitem"]',
-    isItemDisabled,
-    getLevel,
-    isExpanded,
-    isCollapsed,
-    getItemId,
-    onToggleExpand,
-    onActivate,
-    typeahead = true,
-    typeaheadResetMs = DEFAULT_TYPEAHEAD_RESET_MS,
-    onActiveChange
-  } = options;
-  const treeRef = useRef(null);
-  const typeaheadRef = useRef({
-    buffer: '',
-    timer: null
-  });
-
-  /** Visible treeitems in DOM order (collapsed subtrees are not rendered). */
-  const getItems = useCallback(() => {
-    const root = treeRef.current;
-    if (root == null) {
-      return [];
-    }
-    return Array.from(root.querySelectorAll(itemSelector));
-  }, [itemSelector]);
-  const itemDisabled = useCallback(el => isItemDisabled ? isItemDisabled(el) : el.dataset.treeDisabled != null || el.getAttribute('aria-disabled') === 'true', [isItemDisabled]);
-  const levelOf = useCallback(el => getLevel ? getLevel(el) : Number(el.getAttribute('aria-level') ?? '1'), [getLevel]);
-  const expandedOf = useCallback(el => isExpanded ? isExpanded(el) : el.getAttribute('aria-expanded') === 'true', [isExpanded]);
-  const collapsedOf = useCallback(el => isCollapsed ? isCollapsed(el) : el.getAttribute('aria-expanded') === 'false', [isCollapsed]);
-  const idOf = useCallback(el => getItemId ? getItemId(el) : el.dataset.treeId, [getItemId]);
-
-  /** Move focus to a treeitem and notify the active-change listener. */
-  const focusItem = useCallback(el => {
-    if (el == null) {
-      return;
-    }
-    onActiveChange?.(idOf(el));
-    el.focus();
-  }, [idOf, onActiveChange]);
-
-  /**
-   * Focus the first enabled treeitem from `start`, moving by `dir`. No wrap —
-   * a tree's linear roam clamps at the ends.
-   */
-  const focusEnabledFrom = useCallback((items, start, dir) => {
-    for (let i = start; i >= 0 && i < items.length; i += dir) {
-      const candidate = items[i];
-      if (candidate != null && !itemDisabled(candidate)) {
-        focusItem(candidate);
-        return;
-      }
-    }
-  }, [itemDisabled, focusItem]);
-  const focusFirst = useCallback(() => {
-    focusEnabledFrom(getItems(), 0, 1);
-  }, [getItems, focusEnabledFrom]);
-  const focusLast = useCallback(() => {
-    const items = getItems();
-    focusEnabledFrom(items, items.length - 1, -1);
-  }, [getItems, focusEnabledFrom]);
-  const runTypeahead = useCallback((e, items, currentIndex) => {
-    const state = typeaheadRef.current;
-    if (state.timer != null) {
-      clearTimeout(state.timer);
-    }
-    state.buffer += e.key.toLowerCase();
-    state.timer = setTimeout(() => {
-      typeaheadRef.current.buffer = '';
-    }, typeaheadResetMs);
-    const query = state.buffer;
-    const start = currentIndex < 0 ? 0 : currentIndex;
-    const ordered = [...items.slice(start + 1), ...items.slice(0, start + 1)];
-    const match = ordered.find(item => !itemDisabled(item) && (item.textContent ?? '').trim().toLowerCase().startsWith(query));
-    if (match != null) {
-      e.preventDefault();
-      focusItem(match);
-    }
-  }, [typeaheadResetMs, itemDisabled, focusItem]);
-  const handleKeyDown = useCallback(e => {
-    const items = getItems();
-    if (items.length === 0) {
-      return;
-    }
-    const active = document.activeElement;
-    // Resolve the treeitem that owns focus: the nearest treeitem ancestor of
-    // the active element (never an outer treeitem that merely contains it).
-    const activeItem = active instanceof Element ? active.closest('[role="treeitem"]') : null;
-    const currentIndex = items.findIndex(item => item === activeItem);
-    const current = currentIndex >= 0 ? items[currentIndex] : undefined;
-
-    // Typeahead: printable single characters jump to the next matching item.
-    if (typeahead && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && NAVIGATION_KEYS.has(e.key) === false) {
-      runTypeahead(e, items, currentIndex);
-      return;
-    }
-    if (!NAVIGATION_KEYS.has(e.key)) {
-      return;
-    }
-    switch (e.key) {
-      case 'ArrowDown':
-        {
-          e.preventDefault();
-          focusEnabledFrom(items, currentIndex < 0 ? 0 : currentIndex + 1, 1);
-          break;
-        }
-      case 'ArrowUp':
-        {
-          e.preventDefault();
-          focusEnabledFrom(items, currentIndex < 0 ? items.length - 1 : currentIndex - 1, -1);
-          break;
-        }
-      case 'ArrowRight':
-        {
-          if (current == null) {
-            break;
-          }
-          e.preventDefault();
-          if (collapsedOf(current)) {
-            // Collapsed parent → expand.
-            const id = idOf(current);
-            if (id != null) {
-              onToggleExpand?.(id);
-            }
-          } else if (expandedOf(current)) {
-            // Expanded parent → move to first child.
-            const next = items[currentIndex + 1];
-            if (next != null && levelOf(next) > levelOf(current)) {
-              focusItem(next);
-            }
-          }
-          // Leaf → no-op.
-          break;
-        }
-      case 'ArrowLeft':
-        {
-          if (current == null) {
-            break;
-          }
-          e.preventDefault();
-          if (expandedOf(current)) {
-            // Expanded parent → collapse.
-            const id = idOf(current);
-            if (id != null) {
-              onToggleExpand?.(id);
-            }
-          } else {
-            // Otherwise → move to parent treeitem (nearest shallower item
-            // scanning upward in visible order).
-            const currentLevel = levelOf(current);
-            for (let i = currentIndex - 1; i >= 0; i--) {
-              const candidate = items[i];
-              if (candidate != null && levelOf(candidate) < currentLevel) {
-                focusItem(candidate);
-                break;
-              }
-            }
-          }
-          break;
-        }
-      case 'Home':
-        {
-          e.preventDefault();
-          focusEnabledFrom(items, 0, 1);
-          break;
-        }
-      case 'End':
-        {
-          e.preventDefault();
-          focusEnabledFrom(items, items.length - 1, -1);
-          break;
-        }
-      case 'Enter':
-      case ' ':
-        {
-          if (current == null || itemDisabled(current)) {
-            break;
-          }
-          e.preventDefault();
-          const id = idOf(current);
-          // Activate the item: prefer the consumer's onActivate (e.g. click an
-          // inner link/button). Fall back to toggling expansion for a parent
-          // without its own action.
-          const handled = onActivate ? onActivate(current, id) === true : false;
-          if (!handled && current.getAttribute('aria-expanded') != null) {
-            if (id != null) {
-              onToggleExpand?.(id);
-            }
-          }
-          break;
-        }
-      default:
-        break;
-    }
-  }, [getItems, typeahead, runTypeahead, focusEnabledFrom, focusItem, collapsedOf, expandedOf, idOf, levelOf, itemDisabled, onToggleExpand, onActivate]);
-  return {
-    treeRef,
-    handleKeyDown,
-    focusFirst,
-    focusLast
-  };
-}

package/dist/hooks/useTypeahead.d.ts

@@ -1,63 +0,0 @@
-export interface UseTypeaheadOptions {
-    /**
-     * Returns the current, in-DOM-order list of item labels to match against.
-     * An entry may be `null`/empty to mark a non-matchable slot (its index is
-     * preserved so it maps 1:1 to the caller's items).
-     */
-    getItemLabels: () => ReadonlyArray<string | null | undefined>;
-    /**
-     * Called with the index of the matched item so the caller can focus/select
-     * it (e.g. `useListFocus`'s `focusItem`).
-     */
-    onMatch: (index: number) => void;
-    /**
-     * The index to start searching from — typically the currently focused item,
-     * so repeated presses of the same letter cycle through matches. Defaults to
-     * -1 (search from the top).
-     */
-    getCurrentIndex?: () => number;
-    /**
-     * Milliseconds of inactivity after which the typed buffer resets.
-     * @default 750
-     */
-    resetMs?: number;
-    /**
-     * Whether an index should be skipped (e.g. disabled items).
-     */
-    isDisabled?: (index: number) => boolean;
-}
-export interface UseTypeaheadReturn {
-    /**
-     * Keydown handler. Call it (or let it fall through) from the collection's
-     * own key handler. Returns `true` when it handled a printable character (so
-     * the caller can `preventDefault`/stop further handling), `false` otherwise.
-     */
-    onKeyDown: (e: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /** Clear the pending buffer (e.g. on close). */
-    reset: () => void;
-}
-/**
- * First-character ("type-ahead") search for a collection.
- *
- * Buffers printable keystrokes (resetting after `resetMs` of inactivity),
- * matches items whose label starts with the buffer, and cycles from the
- * current index — so pressing "s" repeatedly walks through the "s" items
- * instead of sticking on the first. Space is reserved for activation and is
- * only treated as typeahead while a buffer is already active.
- *
- * Additive and collection-agnostic: it does not move focus itself; the caller
- * wires `onMatch` to its own focus/selection (e.g. `useListFocus.focusItem`).
- *
- * @example
- * ```
- * const {listRef, handleKeyDown, focusItem, getItems} = useListFocus(...);
- * const typeahead = useTypeahead({
- *   getItemLabels: () => getItems().map(el => el.textContent),
- *   onMatch: focusItem,
- *   getCurrentIndex: () => getItems().findIndex(el => el === document.activeElement),
- * });
- * const onKeyDown = (e) => { if (!typeahead.onKeyDown(e)) handleKeyDown(e); };
- * ```
- */
-export declare function useTypeahead(options: UseTypeaheadOptions): UseTypeaheadReturn;
-//# sourceMappingURL=useTypeahead.d.ts.map

package/dist/hooks/useTypeahead.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTypeahead.d.ts","sourceRoot":"","sources":["../../src/hooks/useTypeahead.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,aAAa,EAAE,MAAM,aAAa,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAE9D;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,aAAa,KAAK,OAAO,CAAC;IAC/D,gDAAgD;IAChD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAiBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,CAkF7E"}

package/dist/hooks/useTypeahead.js

@@ -1,117 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file useTypeahead.ts
- * @input Uses React useCallback/useRef
- * @output Exports useTypeahead hook for first-character (type-to-focus) search
- * @position Core hook; adds APG typeahead to menus, listboxes, and other
- *   collections. Composes with useListFocus/useGridFocus (or any collection)
- *   via a caller-supplied getItemLabels + onMatch.
- *
- * SYNC: When modified, update:
- * - /packages/core/src/hooks/index.ts
- */
-import { useCallback, useRef } from 'react';
-/**
- * Whether a key event represents a single printable character (a type-to-focus
- * candidate) rather than a control/navigation key or a shortcut chord.
- */
-function isPrintableCharacter(e) {
-  return e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey &&
-  // A lone space is used for activation in menus, not typeahead-from-empty.
-  e.key !== ' ';
-}
-
-/**
- * First-character ("type-ahead") search for a collection.
- *
- * Buffers printable keystrokes (resetting after `resetMs` of inactivity),
- * matches items whose label starts with the buffer, and cycles from the
- * current index — so pressing "s" repeatedly walks through the "s" items
- * instead of sticking on the first. Space is reserved for activation and is
- * only treated as typeahead while a buffer is already active.
- *
- * Additive and collection-agnostic: it does not move focus itself; the caller
- * wires `onMatch` to its own focus/selection (e.g. `useListFocus.focusItem`).
- *
- * @example
- * ```
- * const {listRef, handleKeyDown, focusItem, getItems} = useListFocus(...);
- * const typeahead = useTypeahead({
- *   getItemLabels: () => getItems().map(el => el.textContent),
- *   onMatch: focusItem,
- *   getCurrentIndex: () => getItems().findIndex(el => el === document.activeElement),
- * });
- * const onKeyDown = (e) => { if (!typeahead.onKeyDown(e)) handleKeyDown(e); };
- * ```
- */
-export function useTypeahead(options) {
-  const {
-    getItemLabels,
-    onMatch,
-    getCurrentIndex,
-    resetMs = 750,
-    isDisabled
-  } = options;
-  const bufferRef = useRef('');
-  const timeoutRef = useRef(undefined);
-  const reset = useCallback(() => {
-    bufferRef.current = '';
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = undefined;
-    }
-  }, []);
-  const scheduleReset = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      bufferRef.current = '';
-      timeoutRef.current = undefined;
-    }, resetMs);
-  }, [resetMs]);
-  const onKeyDown = useCallback(e => {
-    // A bare Space with no active buffer is not typeahead (menus activate on
-    // Space); once the user is mid-typing, Space extends the query.
-    const isSpaceMidType = e.key === ' ' && bufferRef.current.length > 0;
-    if (!isPrintableCharacter(e) && !isSpaceMidType) {
-      return false;
-    }
-    const labels = getItemLabels();
-    if (labels.length === 0) {
-      return false;
-    }
-
-    // Pressing the SAME single character repeatedly cycles to the next match
-    // rather than filtering deeper (APG behavior).
-    const char = e.key.toLowerCase();
-    const isRepeatSameChar = bufferRef.current.length > 0 && bufferRef.current.split('').every(c => c === char);
-    const nextBuffer = isRepeatSameChar ? char : bufferRef.current + char;
-    bufferRef.current = nextBuffer;
-    scheduleReset();
-    const start = getCurrentIndex?.() ?? -1;
-    const count = labels.length;
-    // When repeating a single char, start the search AFTER the current item
-    // so we advance; otherwise include the current item.
-    const offset = isRepeatSameChar ? 1 : 0;
-    for (let i = 0; i < count; i++) {
-      const index = (start + offset + i + count) % count;
-      if (isDisabled?.(index)) {
-        continue;
-      }
-      const label = labels[index];
-      if (label != null && label.trim().toLowerCase().startsWith(nextBuffer)) {
-        onMatch(index);
-        return true;
-      }
-    }
-    return true;
-  }, [getItemLabels, onMatch, getCurrentIndex, scheduleReset, isDisabled]);
-  return {
-    onKeyDown,
-    reset
-  };
-}

package/src/Avatar/Avatar.test.tsx

@@ -1,37 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import {Avatar} from './Avatar';
-
-describe('Avatar', () => {
-  it('exposes role="img" with the name as accessible name', () => {
-    render(<Avatar name="Ada Lovelace" data-testid="a" />);
-    expect(screen.getByRole('img', {name: 'Ada Lovelace'})).toBeInTheDocument();
-  });
-
-  it('uses alt over name for the accessible name', () => {
-    render(<Avatar name="Ada" alt="Ada Lovelace, profile photo" />);
-    expect(
-      screen.getByRole('img', {name: 'Ada Lovelace, profile photo'}),
-    ).toBeInTheDocument();
-  });
-
-  it('is decorative (presentation + aria-hidden) when it has no name or alt (obs-9)', () => {
-    render(<Avatar data-testid="a" />);
-    const el = screen.getByTestId('a');
-    // No meaningful name → not announced as a generic "Avatar".
-    expect(el).toHaveAttribute('aria-hidden', 'true');
-    expect(el).not.toHaveAttribute('aria-label');
-    expect(screen.queryByRole('img')).not.toBeInTheDocument();
-  });
-
-  it('does not double-announce: the inner img is decorative when the wrapper is named', () => {
-    render(<Avatar name="Ada" src="https://example.com/ada.jpg" />);
-    const wrapper = screen.getByRole('img', {name: 'Ada'});
-    const innerImg = wrapper.querySelector('img');
-    expect(innerImg).not.toBeNull();
-    // The inner <img> carries an empty alt so it isn't announced separately.
-    expect(innerImg).toHaveAttribute('alt', '');
-  });
-});

package/src/CodeBlock/CodeBlock.test.tsx

@@ -1,115 +0,0 @@
-// 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('region');
-    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('region');
-    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/Skeleton/Skeleton.test.tsx

@@ -1,25 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import {Skeleton} from './Skeleton';
-
-describe('Skeleton', () => {
-  it('renders a placeholder element', () => {
-    render(<Skeleton width={200} height={20} data-testid="sk" />);
-    expect(screen.getByTestId('sk')).toBeInTheDocument();
-  });
-
-  it('is hidden from assistive tech by default (complex-20)', () => {
-    render(<Skeleton width={200} height={20} data-testid="sk" />);
-    expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  it('allows the aria-hidden default to be overridden', () => {
-    render(
-      <Skeleton width={200} height={20} data-testid="sk" aria-hidden={false} />,
-    );
-    // Consumer opt-out: not hidden when explicitly set false.
-    expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'false');
-  });
-});