@astryxdesign/core 0.1.7 → 0.1.8-canary.0c4d8d7

package/src/CodeBlock/CodeBlock.test.tsx

@@ -210,6 +210,62 @@ describe('CodeBlock', () => {
     expect(document.getElementById(controlsId as string)).not.toBeNull();
   });
 
+  it('makes the collapsed region inert so the scroll container is unreachable', () => {
+    render(
+      <CodeBlock
+        code={LONG_CODE}
+        language="javascript"
+        title="example"
+        isCollapsible
+      />,
+    );
+    const header = screen
+      .getAllByRole('button')
+      .find(el => el.hasAttribute('aria-expanded'))!;
+    const region = document.getElementById(
+      header.getAttribute('aria-controls') as string,
+    )!;
+    // Expanded: the region is not inert and the scroll container is reachable.
+    expect(region).not.toHaveAttribute('inert');
+
+    fireEvent.click(header);
+    expect(header).toHaveAttribute('aria-expanded', 'false');
+    // Collapsed: the wrapper is inert, so the keyboard-focusable scroll
+    // container (tabIndex=0) inside it drops out of the tab order and the
+    // accessibility tree instead of remaining an invisible tab stop.
+    expect(region).toHaveAttribute('inert');
+    const scrollContainer = screen.getByRole('group');
+    expect(scrollContainer.closest('[inert]')).toBe(region);
+  });
+
+  it('restores focusability of the scroll container after expanding again', () => {
+    render(
+      <CodeBlock
+        code={LONG_CODE}
+        language="javascript"
+        title="example"
+        isCollapsible
+      />,
+    );
+    const header = screen
+      .getAllByRole('button')
+      .find(el => el.hasAttribute('aria-expanded'))!;
+    const region = document.getElementById(
+      header.getAttribute('aria-controls') as string,
+    )!;
+    // Collapse, then expand again.
+    fireEvent.click(header);
+    expect(region).toHaveAttribute('inert');
+    fireEvent.click(header);
+    expect(header).toHaveAttribute('aria-expanded', 'true');
+    // Expanded again: inert is removed and the scroll container is a
+    // keyboard-focusable group once more.
+    expect(region).not.toHaveAttribute('inert');
+    const scrollContainer = screen.getByRole('group');
+    expect(scrollContainer.closest('[inert]')).toBeNull();
+    expect(scrollContainer).toHaveAttribute('tabindex', '0');
+  });
+
   it('applies a per-instance syntax theme via the syntaxTheme prop', () => {
     const {container} = render(
       <CodeBlock

package/src/CodeBlock/CodeBlock.tsx

@@ -807,7 +807,9 @@ export function CodeBlock({
         e.stopPropagation();
         void handleCopy();
       }}
-      aria-label={copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode')}
+      aria-label={
+        copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode')
+      }
       {...stylex.props(
         styles.copyButton,
         !showHeader && styles.copyButtonAbsolute,
@@ -923,6 +925,12 @@ export function CodeBlock({
       {canCollapse ? (
         <div
           id={regionId}
+          // While collapsed, the region is only hidden visually (0fr grid
+          // row); inert also removes it from the tab order and accessibility
+          // tree so keyboard users cannot Tab into the invisible scroll
+          // container (tabIndex=0). aria-controls pointing at an inert
+          // element remains a valid, resolvable reference.
+          inert={isCollapsed ? true : undefined}
           {...stylex.props(
             styles.collapseGrid,
             isCollapsed && styles.collapseGridCollapsed,

package/src/Collapsible/Collapsible.doc.mjs

@@ -17,6 +17,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-collapsible', visualProps: ['density']},
+      {className: 'astryx-collapsible-content', visualProps: ['density']},
       {className: 'astryx-collapsible-group', visualProps: ['density']},
     ],
   },
@@ -53,6 +54,12 @@ export const docs = {
       type: 'boolean',
       description: 'Controlled open state.',
     },
+    {
+      name: 'isDisabled',
+      type: 'boolean',
+      description: "Disable the item so its trigger can't be toggled (dimmed, aria-disabled, and out of the tab order). Doesn't collapse an already-open item.",
+      default: 'false',
+    },
     {
       name: 'onOpenChange',
       type: '(isOpen: boolean) => void',

package/src/Collapsible/Collapsible.test.tsx

@@ -72,6 +72,12 @@ describe('Collapsible', () => {
       expect(screen.getByTestId('root')).toHaveClass('astryx-collapsible');
     });
 
+    it('renders the stable astryx-collapsible-content class on the content area', () => {
+      render(<Collapsible trigger="T">c</Collapsible>);
+      const content = contentFor(screen.getByRole('button'));
+      expect(content).toHaveClass('astryx-collapsible-content');
+    });
+
     it('renders a ReactNode trigger, not just a string', () => {
       render(
         <Collapsible trigger={<span data-testid="rich">Rich</span>}>
@@ -240,6 +246,80 @@ describe('Collapsible', () => {
     });
   });
 
+  describe('disabled state', () => {
+    it('marks the trigger aria-disabled and drops it from the tab order', () => {
+      render(
+        <Collapsible trigger="T" isDisabled>
+          Body
+        </Collapsible>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).toHaveAttribute('tabindex', '-1');
+      // Never the native disabled attribute — it stays focusable/perceivable.
+      expect(button).not.toBeDisabled();
+    });
+
+    it('is enabled by default (no aria-disabled, stays in tab order)', () => {
+      render(<Collapsible trigger="T">Body</Collapsible>);
+      const button = screen.getByRole('button');
+      expect(button).not.toHaveAttribute('aria-disabled');
+      expect(button).not.toHaveAttribute('tabindex', '-1');
+    });
+
+    it('does not toggle when the trigger is clicked while disabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <Collapsible trigger="T" isDisabled defaultIsOpen>
+          Body
+        </Collapsible>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+      await user.click(button);
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('does not fire onOpenChange while disabled', async () => {
+      const user = userEvent.setup();
+      const onOpenChange = vi.fn();
+      render(
+        <Collapsible trigger="T" isDisabled onOpenChange={onOpenChange}>
+          Body
+        </Collapsible>,
+      );
+      await user.click(screen.getByRole('button'));
+      expect(onOpenChange).not.toHaveBeenCalled();
+    });
+
+    it('does not collapse an already-open item — content stays visible', () => {
+      render(
+        <Collapsible trigger="T" isDisabled defaultIsOpen>
+          Body
+        </Collapsible>,
+      );
+      const content = contentFor(screen.getByRole('button'));
+      expect(content).not.toHaveStyle({display: 'none'});
+    });
+
+    it('does not toggle its group item when disabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <CollapsibleGroup type="single">
+          <Collapsible trigger="A" value="a" isDisabled>
+            Body A
+          </Collapsible>
+          <Collapsible trigger="B" value="b">
+            Body B
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+      const triggerA = screen.getByRole('button', {name: /A/});
+      await user.click(triggerA);
+      expect(triggerA).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+
   describe('prop forwarding', () => {
     it('forwards a ref to the root element', () => {
       const ref = vi.fn();

package/src/Collapsible/Collapsible.tsx

@@ -39,6 +39,7 @@ import {
   durationVars,
   easeVars,
 } from '../theme/tokens.stylex';
+
 import {useCollapsible} from './useCollapsible';
 import {CollapsibleGroupPresentationContext} from './CollapsibleGroupContext';
 import {getIcon} from '../Icon/globalIconRegistry';
@@ -81,6 +82,13 @@ const styles = stylex.create({
     textBoxEdge: 'cap alphabetic',
     textBoxTrim: 'trim-both',
   },
+  // Disabled trigger — non-interactive, dimmed. Native `disabled` on the
+  // button blocks click + keyboard activation; these styles restore the
+  // visual affordance that `all: unset` wipes.
+  triggerDisabled: {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
   // Chevron indicator
   chevron: {
     display: 'inline-flex',
@@ -102,8 +110,17 @@ const styles = stylex.create({
   contentHidden: {
     display: 'none',
   },
+  // Anchors body typography so revealed text renders at the system's body
+  // scale (family/size/weight/leading) instead of inheriting from wherever
+  // the Collapsible is placed. External themes override via the
+  // `astryx-collapsible-content` target.
   content: {
     paddingBlockStart: spacingVars['--spacing-1'],
+    fontFamily: typographyVars['--font-family-body'],
+    fontSize: typeScaleVars['--text-body-size'],
+    fontWeight: typeScaleVars['--text-body-weight'],
+    lineHeight: typeScaleVars['--text-body-leading'],
+    color: colorVars['--color-text-primary'],
   },
   // Group divider chrome — a hairline above every item except the first.
   // The group's wrapper (or 'all' mode) owns the outer edges.
@@ -166,6 +183,17 @@ export interface CollapsibleProps extends BaseProps {
    */
   isOpen?: boolean;
 
+  /**
+   * Whether the collapsible is disabled. A disabled item can't be toggled —
+   * its trigger is non-interactive and dimmed. Following the system-wide
+   * disabled convention, the trigger uses `aria-disabled` (not the native
+   * `disabled` attribute) and drops out of the tab order, staying perceivable
+   * to assistive tech. The content stays in whatever open state it was;
+   * disabling doesn't collapse an already-open item.
+   * @default false
+   */
+  isDisabled?: boolean;
+
   /**
    * Callback when the open state changes.
    */
@@ -225,6 +253,7 @@ export function Collapsible({
   children,
   defaultIsOpen,
   isOpen: controlledIsOpen,
+  isDisabled = false,
   onOpenChange,
   value,
   ref,
@@ -244,6 +273,17 @@ export function Collapsible({
     value,
   });
 
+  // Activation is blocked by this guard rather than the native `disabled`
+  // attribute, so the trigger keeps `aria-disabled` semantics and stays
+  // discoverable. A native `disabled` button would silently swallow events
+  // (e.g. a wrapping tooltip's hover) — the system-wide disabled convention.
+  const handleToggle = () => {
+    if (isDisabled) {
+      return;
+    }
+    toggle();
+  };
+
   const presentation = use(CollapsibleGroupPresentationContext);
   const isDivided = presentation?.hasDividers ?? false;
   const density = presentation?.density ?? null;
@@ -268,12 +308,20 @@ export function Collapsible({
       {...props}>
       <button
         type="button"
-        onClick={toggle}
+        onClick={handleToggle}
+        aria-disabled={isDisabled || undefined}
         aria-expanded={isOpen}
         aria-controls={contentId}
+        // A disabled trigger drops out of the tab order so it isn't a silently
+        // dead tab stop; activation stays blocked by the handleToggle guard,
+        // and aria-disabled keeps the state perceivable to assistive tech —
+        // the system-wide disabled convention (never native `disabled`, which
+        // would swallow events like a wrapping tooltip's hover).
+        tabIndex={isDisabled ? -1 : undefined}
         {...stylex.props(
           styles.trigger,
           density != null && triggerDensity[density],
+          isDisabled && styles.triggerDisabled,
         )}>
         <span {...stylex.props(styles.triggerLabel)}>{trigger}</span>
         <span
@@ -286,10 +334,15 @@ export function Collapsible({
       </button>
       <div
         id={contentId}
-        {...stylex.props(
-          styles.content,
-          density != null && contentDensity[density],
-          !isOpen && styles.contentHidden,
+        {...mergeProps(
+          themeProps('collapsible-content', {
+            density: density ?? undefined,
+          }),
+          stylex.props(
+            styles.content,
+            density != null && contentDensity[density],
+            !isOpen && styles.contentHidden,
+          ),
         )}>
         {presentation != null ? (
           <CollapsibleGroupPresentationContext value={null}>

package/src/CommandPalette/CommandPaletteInput.doc.mjs

@@ -7,7 +7,8 @@ export const docs = {
   subComponentOf: 'CommandPalette',
   displayName: 'Command Palette Input',
   isHiddenFromOverview: true,
-  description: 'Search input slot. Auto-focuses on mount. Wires to command palette context when used inside CommandPalette.',
+  description:
+    'Search input slot. Auto-focuses on mount. Wires to command palette context when used inside CommandPalette.',
   props: [
     {
       name: 'placeholder',
@@ -15,16 +16,24 @@ export const docs = {
       description: 'Placeholder text for the input.',
       default: "'Search...'",
     },
+    {
+      name: 'label',
+      type: 'string',
+      description:
+        'Accessible label for the combobox input, announced by screen readers. Falls back to the placeholder text when omitted.',
+    },
     {
       name: 'hasAutoFocus',
       type: 'boolean',
-      description: 'Auto-focus the input when mounted. Automatically disabled when inside an inline command palette.',
+      description:
+        'Auto-focus the input when mounted. Automatically disabled when inside an inline command palette.',
       default: 'true',
     },
     {
       name: 'endContent',
       type: 'ReactNode',
-      description: 'Content rendered at the trailing end of the input, after the spinner. Use for clear buttons or keyboard shortcut hints.',
+      description:
+        'Content rendered at the trailing end of the input, after the spinner. Use for clear buttons or keyboard shortcut hints.',
       slotElements: [
         {
           __element: 'Icon',
@@ -44,17 +53,20 @@ export const docs = {
     {
       name: 'value',
       type: 'string',
-      description: 'Search value. When omitted inside CommandPalette, reads from context.',
+      description:
+        'Search value. When omitted inside CommandPalette, reads from context.',
     },
     {
       name: 'onValueChange',
       type: '(value: string) => void',
-      description: 'Called when search value changes. When omitted inside CommandPalette, writes to context.',
+      description:
+        'Called when search value changes. When omitted inside CommandPalette, writes to context.',
     },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
-      description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
+      description:
+        'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
   playground: {
@@ -69,9 +81,11 @@ export const docsZh = {
   name: 'CommandPaletteInput',
   isHiddenFromOverview: true,
   displayName: 'Command Palette Input',
-  description: '搜索输入插槽。挂载时自动聚焦。在 CommandPalette 内使用时连接到上下文。',
+  description:
+    '搜索输入插槽。挂载时自动聚焦。在 CommandPalette 内使用时连接到上下文。',
   propDescriptions: {
     placeholder: '输入框的占位文本。',
+    label: '组合框输入的无障碍标签，供屏幕阅读器朗读。省略时回退到占位文本。',
     hasAutoFocus: '挂载时自动聚焦输入框。内联命令面板中自动禁用。',
     endContent: '渲染在输入框末尾的内容，位于加载指示器之后。',
     value: '搜索值。在 CommandPalette 内省略时从上下文读取。',
@@ -84,13 +98,16 @@ export const docsDense = {
   name: 'CommandPaletteInput',
   isHiddenFromOverview: true,
   displayName: 'Command Palette Input',
-  description: 'search input; auto-focus on mount; wires to context inside CommandPalette',
+  description:
+    'search input; auto-focus on mount; wires to context inside CommandPalette',
   propDescriptions: {
     placeholder: 'input placeholder text',
+    label: 'accessible label for the combobox; falls back to placeholder',
     hasAutoFocus: 'auto-focus on mount; auto-disabled in inline mode',
     endContent: 'trailing content after spinner',
     value: 'search value; reads context when omitted inside palette',
-    onValueChange: 'called on change; writes context when omitted inside palette',
+    onValueChange:
+      'called on change; writes context when omitted inside palette',
     xstyle: 'StyleX layout styles; must be stylex.create() value',
   },
 };

package/src/CommandPalette/CommandPaletteInput.test.tsx

@@ -32,6 +32,40 @@ describe('CommandPaletteInput', () => {
     expect(screen.getByRole('combobox')).toBeInTheDocument();
   });
 
+  it('has an accessible name by default', () => {
+    render(<CommandPaletteInput />);
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-label',
+      'Search…',
+    );
+  });
+
+  it('uses the label prop as the accessible name', () => {
+    render(<CommandPaletteInput label="Search commands" />);
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('aria-label', 'Search commands');
+    // The label prop does not affect the visible placeholder
+    expect(input).toHaveAttribute('placeholder', 'Search…');
+  });
+
+  it('falls back to a custom placeholder for the accessible name', () => {
+    render(<CommandPaletteInput placeholder="Type a command..." />);
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-label',
+      'Type a command...',
+    );
+  });
+
+  it('lets a consumer-passed aria-label override the default', () => {
+    render(
+      <CommandPaletteInput label="Search commands" aria-label="Custom name" />,
+    );
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-label',
+      'Custom name',
+    );
+  });
+
   it('calls onValueChange when typing', () => {
     const handleChange = vi.fn();
     render(<CommandPaletteInput onValueChange={handleChange} />);

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -109,6 +109,13 @@ export interface CommandPaletteInputProps extends Omit<
    */
   placeholder?: string;
 
+  /**
+   * Accessible label for the combobox input, announced by screen readers.
+   * Falls back to the placeholder text (`'Search…'` by default), since a
+   * placeholder alone is not a reliable accessible name.
+   */
+  label?: string;
+
   /**
    * Whether to auto-focus the input when mounted.
    * @default true
@@ -149,6 +156,7 @@ export function CommandPaletteInput({
   value: controlledValue,
   onValueChange,
   placeholder: placeholderFromProps,
+  label,
   hasAutoFocus = true,
   endContent,
   onChange,
@@ -215,6 +223,9 @@ export function CommandPaletteInput({
             ? ctx.getItemId(ctx.highlightedIndex)
             : undefined
         }
+        // A placeholder alone is not a reliable accessible name; give the
+        // combobox an explicit one (consumer aria-label via rest props wins).
+        aria-label={label ?? placeholder}
         placeholder={placeholder}
         value={value}
         data-autofocus={effectiveAutoFocus || undefined}

package/src/ContextMenu/ContextMenu.test.tsx

@@ -12,7 +12,12 @@ import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {ContextMenu} from './ContextMenu';
-import {ContextMenuItem} from './index';
+import {
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+} from './index';
 import {DropdownMenuItem} from '../DropdownMenu/DropdownMenuItem';
 import {Divider} from '../Divider';
 
@@ -537,3 +542,72 @@ describe('ContextMenu compound mode', () => {
     });
   });
 });
+
+describe('ContextMenu selectable items', () => {
+  it('renders checkbox and radio items with correct roles and state', () => {
+    render(
+      <ContextMenu
+        menuContent={
+          <>
+            <ContextMenuRadioGroup
+              value="name"
+              onChange={() => {}}
+              aria-label="Sort by">
+              <ContextMenuRadioItem value="name" label="Sort by name" />
+              <ContextMenuRadioItem value="date" label="Sort by date" />
+            </ContextMenuRadioGroup>
+            <ContextMenuCheckboxItem label="Show hidden" value={true} />
+          </>
+        }>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+    expect(
+      screen.getByRole('menuitemradio', {name: 'Sort by name', hidden: true}),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(
+      screen.getByRole('menuitemradio', {name: 'Sort by date', hidden: true}),
+    ).toHaveAttribute('aria-checked', 'false');
+    expect(
+      screen.getByRole('menuitemcheckbox', {name: 'Show hidden', hidden: true}),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(
+      screen.getByRole('group', {name: 'Sort by', hidden: true}),
+    ).toBeInTheDocument();
+  });
+
+  it('fires onChange for radio and checkbox items', async () => {
+    const user = userEvent.setup();
+    const onSort = vi.fn();
+    const onToggle = vi.fn();
+    render(
+      <ContextMenu
+        menuContent={
+          <>
+            <ContextMenuRadioGroup
+              value="name"
+              onChange={onSort}
+              aria-label="Sort by">
+              <ContextMenuRadioItem value="name" label="Sort by name" />
+              <ContextMenuRadioItem value="date" label="Sort by date" />
+            </ContextMenuRadioGroup>
+            <ContextMenuCheckboxItem
+              label="Show hidden"
+              value={false}
+              onChange={onToggle}
+            />
+          </>
+        }>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+    await user.click(
+      screen.getByRole('menuitemradio', {name: 'Sort by date', hidden: true}),
+    );
+    expect(onSort).toHaveBeenCalledWith('date');
+    await user.click(
+      screen.getByRole('menuitemcheckbox', {name: 'Show hidden', hidden: true}),
+    );
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+});

package/src/ContextMenu/ContextMenu.tsx

@@ -46,6 +46,10 @@ import {
   DropdownMenuContext,
   type DropdownMenuContextValue,
 } from '../DropdownMenu/DropdownMenuContext';
+import {
+  MENU_ITEM_ROLES,
+  MENU_ITEM_SELECTOR,
+} from '../DropdownMenu/menuItemRoles';
 import {useListFocus} from '../hooks/useListFocus';
 import {useTypeahead} from '../hooks/useTypeahead';
 import {useLongPress} from '../hooks/useLongPress';
@@ -265,7 +269,7 @@ export function ContextMenu({
     focusFirst,
     focusItem,
   } = useListFocus<HTMLDivElement>({
-    itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
+    itemSelector: MENU_ITEM_SELECTOR,
     wrap: false,
     onEscape: closeMenu,
   });
@@ -275,9 +279,7 @@ export function ContextMenu({
     (): HTMLElement[] =>
       listRef.current
         ? Array.from(
-            listRef.current.querySelectorAll<HTMLElement>(
-              '[role="menuitem"]:not([aria-disabled="true"])',
-            ),
+            listRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR),
           )
         : [],
     [listRef],
@@ -341,7 +343,10 @@ export function ContextMenu({
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         const focused = document.activeElement as HTMLElement | null;
-        if (focused?.getAttribute('role') === 'menuitem') {
+        if (
+          focused &&
+          MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')
+        ) {
           focused.click();
         }
         return;

package/src/ContextMenu/index.ts

@@ -20,3 +20,18 @@ export {
   DropdownMenuItem as ContextMenuItem,
   type DropdownMenuItemProps as ContextMenuItemProps,
 } from '../DropdownMenu/DropdownMenuItem';
+
+// Selectable items work inside a ContextMenu too — re-exported under the
+// ContextMenu name for a coherent API.
+export {
+  DropdownMenuCheckboxItem as ContextMenuCheckboxItem,
+  type DropdownMenuCheckboxItemProps as ContextMenuCheckboxItemProps,
+} from '../DropdownMenu/DropdownMenuCheckboxItem';
+export {
+  DropdownMenuRadioGroup as ContextMenuRadioGroup,
+  type DropdownMenuRadioGroupProps as ContextMenuRadioGroupProps,
+} from '../DropdownMenu/DropdownMenuRadioGroup';
+export {
+  DropdownMenuRadioItem as ContextMenuRadioItem,
+  type DropdownMenuRadioItemProps as ContextMenuRadioItemProps,
+} from '../DropdownMenu/DropdownMenuRadioItem';