@astryxdesign/core 0.6.2 → 0.6.3-canary.039a67e

package/src/Chat/ChatToolCalls.test.tsx

@@ -1,9 +1,12 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+import {createRef} from 'react';
 import {describe, it, expect} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
+import * as stylex from '@stylexjs/stylex';
 import {Theme} from '../theme/Theme';
 import {defineTheme} from '../theme/defineTheme';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {ChatToolCalls} from './ChatToolCalls';
 
 describe('ChatToolCalls', () => {
@@ -12,6 +15,26 @@ describe('ChatToolCalls', () => {
     expect(container.firstChild).toBeNull();
   });
 
+  it('forwards the root ref and supported DOM props', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <ChatToolCalls
+        ref={ref}
+        calls={[{name: 'bash'}]}
+        data-testid="tool-calls"
+        aria-label="Tool activity"
+        className="consumer-class"
+        style={{marginBlockStart: 12}}
+      />,
+    );
+
+    const root = screen.getByTestId('tool-calls');
+    expect(ref.current).toBe(root);
+    expect(root).toHaveAttribute('aria-label', 'Tool activity');
+    expect(root).toHaveClass('astryx-chat-tool-calls', 'consumer-class');
+    expect(root).toHaveStyle({marginBlockStart: '12px'});
+  });
+
   it('renders single call inline without group chrome', () => {
     render(
       <ChatToolCalls
@@ -165,6 +188,66 @@ describe('ChatToolCalls', () => {
     expect(btn).toHaveAttribute('aria-expanded', 'true');
   });
 
+  it('renders the public custom group label when expanded', () => {
+    render(
+      <ChatToolCalls
+        label="Repository updates"
+        defaultIsExpanded
+        calls={[{name: 'read'}, {name: 'edit'}]}
+      />,
+    );
+
+    expect(screen.getByText('Repository updates')).toBeInTheDocument();
+    expect(screen.queryByText('2 tool calls')).not.toBeInTheDocument();
+  });
+
+  it('removes collapsed call rows from keyboard and accessibility navigation', () => {
+    render(
+      <ChatToolCalls
+        calls={[
+          {name: 'read', resultDetail: <div>file contents</div>},
+          {name: 'edit', resultDetail: <div>diff contents</div>},
+        ]}
+      />,
+    );
+
+    const header = screen.getAllByRole('button')[0];
+    const content = document.getElementById(
+      header.getAttribute('aria-controls') as string,
+    );
+    expect(content).toHaveAttribute('inert');
+
+    fireEvent.click(header);
+    expect(content).not.toHaveAttribute('inert');
+  });
+
+  it('composes the shared visible focus ring on every disclosure control', () => {
+    render(
+      <ChatToolCalls
+        defaultIsExpanded
+        calls={[
+          {name: 'read', resultDetail: <div>file contents</div>},
+          {name: 'edit'},
+        ]}
+      />,
+    );
+
+    const buttons = screen.getAllByRole('button');
+    const focusRingClasses = stylex
+      .props(focusOutlineStyles.focusVisible)
+      .className!.split(' ');
+    const [focusRingMarker] = focusRingClasses;
+    for (const button of buttons) {
+      expect(button).toHaveClass(focusRingMarker);
+    }
+    // The group header keeps the shared ring unchanged. Grouped detail rows
+    // replace only its offset with an inset value so the animated clip boundary
+    // cannot hide the ring; the focused Storybook story verifies that geometry.
+    for (const className of focusRingClasses) {
+      expect(buttons[0]).toHaveClass(className);
+    }
+  });
+
   it('shows target when provided', () => {
     render(
       <ChatToolCalls

package/src/Chat/ChatToolCalls.tsx

@@ -30,6 +30,7 @@ import {
   radiusVars,
   durationVars,
   easeVars,
+  focusVars,
 } from '../theme/tokens.stylex';
 import {getKey, mergeProps} from '../utils';
 import {Badge} from '../Badge';
@@ -37,6 +38,7 @@ import {Icon, type IconName} from '../Icon';
 import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useTranslator} from '../i18n';
 
 // =============================================================================
@@ -63,14 +65,14 @@ export interface ChatToolCallItem {
   /** Additional info rendered after the label. Free-form ReactNode. */
   stats?: ReactNode;
   /**
-   * Error message when status is 'error'. Rendered as visually hidden text in
-   * the row (so screen readers and keyboard users perceive it) and echoed in a
-   * hover tooltip on the status icon.
+   * Error message when status is 'error'. Exposed as visually hidden text in
+   * the row for assistive technology and echoed in a hover tooltip on the
+   * status icon.
    */
   errorMessage?: string;
   /** Unique key for React list rendering. Derived from stable metadata if omitted. */
   key?: string;
-  /** Arbitrary data passed through to renderDetail. Store tool args, result, etc. */
+  /** Arbitrary caller data retained with the call item. */
   data?: unknown;
   /** Inline detail content shown when the row is expanded (e.g. code diff, command output). */
   resultDetail?: ReactNode;
@@ -80,11 +82,11 @@ export interface ChatToolCallsProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
   /** Array of tool call data. */
   calls: ChatToolCallItem[];
-  /** Custom summary label for groups. Auto-generated from count if omitted. */
+  /** Custom summary label shown for an expanded group. */
   label?: string;
   /** Whether the group is expanded. Uncontrolled by default. */
   isExpanded?: boolean;
-  /** Default expanded state. @default true for ≤3 calls, false for >3. */
+  /** Default expanded state when uncontrolled. @default false */
   defaultIsExpanded?: boolean;
   /** Callback when expanded state changes. */
   onExpandedChange?: (isExpanded: boolean) => void;
@@ -136,7 +138,7 @@ const styles = stylex.create({
     flexShrink: 0,
     width: '14px',
     height: '14px',
-    color: colorVars['--color-text-disabled'],
+    color: colorVars['--color-text-secondary'],
   },
   // Rides on the chevron <Icon> (via `xstyle`), next to the rotation it
   // animates, so one element carries both the transform and the theme target.
@@ -194,6 +196,12 @@ const styles = stylex.create({
     minHeight: '24px',
     paddingBlock: spacingVars['--spacing-0-5'],
   },
+  callRowFocusInset: {
+    outlineOffset: {
+      default: null,
+      ':focus-visible': `calc(-1 * ${focusVars['--focus-outline-width']})`,
+    },
+  },
   callRowClickable: {
     cursor: {
       default: 'pointer',
@@ -240,7 +248,7 @@ const styles = stylex.create({
     fontSize: typeScaleVars['--text-supporting-size'],
     lineHeight: typeScaleVars['--text-supporting-leading'],
     fontFamily: typographyVars['--font-family-body'],
-    color: colorVars['--color-text-disabled'],
+    color: colorVars['--color-text-secondary'],
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -251,7 +259,7 @@ const styles = stylex.create({
     fontSize: typeScaleVars['--text-supporting-size'],
     lineHeight: typeScaleVars['--text-supporting-leading'],
     fontFamily: typographyVars['--font-family-body'],
-    color: colorVars['--color-text-disabled'],
+    color: colorVars['--color-text-secondary'],
     whiteSpace: 'nowrap',
     flexShrink: 0,
   },
@@ -265,7 +273,7 @@ const styles = stylex.create({
     fontSize: typeScaleVars['--text-supporting-size'],
     lineHeight: typeScaleVars['--text-supporting-leading'],
     fontFamily: typographyVars['--font-family-body'],
-    color: colorVars['--color-text-disabled'],
+    color: colorVars['--color-text-secondary'],
     flexShrink: 0,
   },
   statsAdditions: {
@@ -286,7 +294,7 @@ const styles = stylex.create({
     flexShrink: 0,
     width: '14px',
     height: '14px',
-    color: colorVars['--color-text-disabled'],
+    color: colorVars['--color-text-secondary'],
     marginInlineStart: 'auto',
   },
   callDetailContent: {
@@ -300,7 +308,7 @@ const styles = stylex.create({
     fontSize: typeScaleVars['--text-supporting-size'],
     lineHeight: typeScaleVars['--text-supporting-leading'],
     fontFamily: typographyVars['--font-family-body'],
-    color: colorVars['--color-text-disabled'],
+    color: colorVars['--color-text-secondary'],
     flexShrink: 0,
   },
 
@@ -393,7 +401,13 @@ function getToolCallKey(call: ChatToolCallItem): string {
 // Internal: single call row
 // =============================================================================
 
-function CallRow({call}: {call: ChatToolCallItem}) {
+function CallRow({
+  call,
+  hasClippedFocusRing = false,
+}: {
+  call: ChatToolCallItem;
+  hasClippedFocusRing?: boolean;
+}) {
   const t = useTranslator();
   const status = call.status ?? 'complete';
   const hasDetail = call.resultDetail != null;
@@ -426,7 +440,11 @@ function CallRow({call}: {call: ChatToolCallItem}) {
             }
           : undefined
       }
-      {...stylex.props(styles.callRow, hasDetail && styles.callRowClickable)}>
+      {...focusOutlineProps.focusVisible(
+        styles.callRow,
+        hasDetail && styles.callRowClickable,
+        hasDetail && hasClippedFocusRing && styles.callRowFocusInset,
+      )}>
       <span
         title={status === 'error' ? call.errorMessage : undefined}
         {...stylex.props(styles.statusIcon, STATUS_STYLES[status])}>
@@ -520,10 +538,8 @@ function CallRow({call}: {call: ChatToolCallItem}) {
  *     name: tc.toolName,
  *     status: tc.state,
  *     duration: tc.duration,
+ *     resultDetail: <CodeBlock code={tc.args} language="json" />,
  *   }))}
- *   renderDetail={(call) => (
- *     <CodeBlock code={call.args} language="json" />
- *   )}
  * />
  * ```
  */
@@ -531,7 +547,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
   const t = useTranslator();
   const {
     calls,
-    label: _customLabel,
+    label: customLabel,
     isExpanded: controlledExpanded,
     defaultIsExpanded,
     onExpandedChange,
@@ -609,14 +625,18 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
             toggle();
           }
         }}
-        {...stylex.props(styles.callRow, styles.callRowToggle)}>
+        {...focusOutlineProps.focusVisible(
+          styles.callRow,
+          styles.callRowToggle,
+        )}>
         {isExpanded ? (
           <>
             <span {...stylex.props(styles.groupIcon)}>
               <Icon icon="wrench" size="sm" color="inherit" />
             </span>
             <span {...stylex.props(styles.groupLabel)}>
-              {t('@astryx.chatToolCalls.groupLabel', {count: calls.length})}
+              {customLabel ??
+                t('@astryx.chatToolCalls.groupLabel', {count: calls.length})}
             </span>
           </>
         ) : (
@@ -668,6 +688,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
       {/* Expanded: all calls with full metadata */}
       <div
         id={contentId}
+        inert={isExpanded ? undefined : true}
         {...stylex.props(
           styles.groupContent,
           isExpanded && styles.groupContentExpanded,
@@ -675,7 +696,11 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
         <div {...stylex.props(styles.groupContentInner)}>
           <div {...stylex.props(styles.list)}>
             {calls.map(call => (
-              <CallRow key={getToolCallKey(call)} call={call} />
+              <CallRow
+                key={getToolCallKey(call)}
+                call={call}
+                hasClippedFocusRing
+              />
             ))}
           </div>
         </div>