@elabs-ai/components-ai 4.2.0 → 5.1.0

package/src/diff-view.stories.tsx

@@ -194,3 +194,82 @@ export const ChangeReviewComposition: Story = {
     </div>
   ),
 };
+
+/**
+ * Focus indicator on expandable line (#313): Tab to the "show more" button
+ * and assert the compound indicator's OUTLINE layer (`outlineStyle: "solid"`,
+ * `--ring-contour`) that `focus-ring` adds — not just `boxShadow !== "none"`,
+ * which the legacy `ring-2` pattern also produces.
+ *
+ * The prior version passed a `hiddenLineCount` prop that `DiffViewProps`
+ * (`diff-view.tsx:77`) does not define — React spread it onto the DOM as a
+ * meaningless `hiddenlinecount` attribute and warned about it, and the "show
+ * more" row NEVER rendered (a real diff never mentions "50" anywhere).
+ * `getByRole("button", …)` then always threw before the focus check ran.
+ * `CollapsedRow` (`diff-view.tsx:289`) only appears when `collapseDiffRows`
+ * (`packages/ui/src/lib/diff-rows.ts`) actually collapses a context run
+ * longer than `contextLines` — so this story now supplies a real 10-line
+ * context run with `contextLines={2}`, which collapses to
+ * `top(1) + collapsed(8) + bottom(1)`, i.e. a real "Show 8 more lines"
+ * button. The button's accessible name is
+ * `t("ai.diffView.showMore", { count })`, not the literal "Show more" —
+ * matched by a count-tolerant regex so it doesn't drift with the wording.
+ */
+export const FocusIndicatorExpand: Story = {
+  name: "Keyboard focus — expand",
+  render: () => (
+    <div className="max-w-2xl">
+      <DiffView
+        lines={Array.from({ length: 10 }, (_, i) => ({
+          type: "context" as const,
+          oldNumber: i + 1,
+          newNumber: i + 1,
+          text: `line ${i + 1}`,
+        }))}
+        contextLines={2}
+      />
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: /show \d+ more lines?/i });
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    const focused = getComputedStyle(button);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+  },
+};
+
+/**
+ * Focus indicator on scrollable pager (#313): Tab to the diff body and
+ * assert the compound indicator's OUTLINE layer on the actual scroll
+ * container. The prior version located it via `getByText(/^export/)`, which
+ * throws "multiple elements" under `variant="split"` (the same line renders
+ * once per pane) — and even resolved, `scrollDiv.parentElement` was never
+ * the scroll container itself (the text sits several nodes deep inside it).
+ * Query the tabbable scroll container directly — it carries `tabIndex={0}`
+ * and `focus-ring-inset` (`diff-view.tsx`'s `DiffViewPager`) — instead of
+ * inferring it from rendered content.
+ */
+export const FocusIndicatorPager: Story = {
+  name: "Keyboard focus — pager",
+  render: () => (
+    <div className="max-w-2xl">
+      <DiffView lines={SAMPLE_LINES} pager variant="split" />
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const pager = canvas.getByRole("region");
+    const scrollDiv = pager.querySelector<HTMLElement>('[tabindex="0"]');
+    if (scrollDiv == null) {
+      throw new Error("expected a tabbable scroll container inside the pager region");
+    }
+    await userEvent.tab();
+    await expect(scrollDiv).toHaveFocus();
+    const focused = getComputedStyle(scrollDiv);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+  },
+};

package/src/diff-view.tsx

@@ -296,7 +296,7 @@ function CollapsedRow({ hiddenCount, onExpand }: { hiddenCount: number; onExpand
       <button
         type="button"
         onClick={onExpand}
-        className="col-start-4 w-fit rounded-sm px-1 text-info-text text-meta hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="col-start-4 w-fit rounded-sm px-1 text-info-text text-meta hover:underline focus-ring"
       >
         {t("ai.diffView.showMore", { count: hiddenCount })}
       </button>
@@ -486,6 +486,7 @@ function DiffViewHeader({
 }) {
   const { t } = useLocale();
   return (
+    // header-band-exempt: a file header inside the diff card, not shell chrome
     <div
       data-slot="diff-view-header"
       className="flex items-center justify-between gap-3 border-b bg-muted/80 px-3 py-2 text-meta text-muted-foreground"
@@ -579,7 +580,7 @@ function DiffViewPager({
         tabIndex={0}
         onScroll={updatePercent}
         onKeyDown={onKeyDown}
-        className="max-h-[32rem] overflow-y-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+        className="max-h-[32rem] overflow-y-auto focus-ring-inset"
       >
         {children}
       </div>

package/src/file-tree.tsx

@@ -369,6 +369,19 @@ export const ProducedAssetTree = forwardRef<HTMLDivElement, ProducedAssetTreePro
       },
       [assetsById, onSelect],
     );
+    // Empty: a plain note, not an empty `role="tree"` — a tree with no
+    // `treeitem` fails `aria-required-children` and announces nothing useful.
+    if (assets.length === 0) {
+      return (
+        <div
+          ref={ref}
+          data-slot="file-tree-empty"
+          className={cn("px-2 py-1 text-body text-muted-foreground", props.className)}
+        >
+          {t("ai.fileTree.noAssetsProduced")}
+        </div>
+      );
+    }
     return (
       <FileTree
         ref={ref}
@@ -377,23 +390,17 @@ export const ProducedAssetTree = forwardRef<HTMLDivElement, ProducedAssetTreePro
         onSelect={handleSelect}
         {...props}
       >
-        {assets.length === 0 ? (
-          <p className="px-2 py-1 text-body text-muted-foreground">
-            {t("ai.fileTree.noAssetsProduced")}
-          </p>
-        ) : (
-          assets.map((asset) => {
-            const Icon = assetIcon(asset);
-            return (
-              <FileTreeFile key={asset.id} path={asset.id} name={asset.name}>
-                <FileTreeIcon>
-                  <Icon aria-hidden="true" className="size-4 text-muted-foreground" />
-                </FileTreeIcon>
-                <FileTreeName>{asset.name}</FileTreeName>
-              </FileTreeFile>
-            );
-          })
-        )}
+        {assets.map((asset) => {
+          const Icon = assetIcon(asset);
+          return (
+            <FileTreeFile key={asset.id} path={asset.id} name={asset.name}>
+              <FileTreeIcon>
+                <Icon aria-hidden="true" className="size-4 text-muted-foreground" />
+              </FileTreeIcon>
+              <FileTreeName>{asset.name}</FileTreeName>
+            </FileTreeFile>
+          );
+        })}
       </FileTree>
     );
   },

package/src/gallery.stories.tsx

@@ -180,3 +180,45 @@ export const PartialSet: Story = {
     await expect(canvas.queryByText(/more/i)).not.toBeInTheDocument();
   },
 };
+
+/**
+ * Focus indicator on image thumbnails (#313): Tab to an image button and
+ * assert the compound indicator's OUTLINE layer — `outlineStyle: "solid"`
+ * sourced from `--ring-contour`. The pre-#67 `focus-visible:outline-none
+ * focus-visible:ring-2 focus-visible:ring-ring` pattern also paints a
+ * non-"none" `boxShadow` (Tailwind's `ring-2` box-shadow trick), so asserting
+ * boxShadow alone passes on the legacy class string too; the outline layer is
+ * the one thing only `focus-ring`/`focus-ring-inset` add.
+ */
+export const FocusIndicator: Story = {
+  name: "Keyboard focus",
+  args: { images: IMAGES.slice(0, 4) },
+  play: async ({ canvas, userEvent }) => {
+    const buttons = canvas.getAllByRole("button", { name: /fjord|desert/i });
+    await userEvent.tab();
+    await expect(buttons[0]).toHaveFocus();
+    const focused = getComputedStyle(buttons[0]);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+  },
+};
+
+/**
+ * Focus indicator on the overflow ("+N more") tile (#313): a separate DOM
+ * node from the plain thumbnails, styled the same way — never covered by any
+ * prior test (`gallery.tsx:409`, `GalleryOverflowTile`).
+ */
+export const OverflowFocusIndicator: Story = {
+  name: "Overflow tile keyboard focus",
+  args: { images: IMAGES },
+  play: async ({ canvas, userEvent }) => {
+    const overflow = canvas.getByRole("button", { name: /show all 12 images/i });
+    overflow.focus();
+    await expect(overflow).toHaveFocus();
+    const focused = getComputedStyle(overflow);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+  },
+};

package/src/gallery.tsx

@@ -372,7 +372,7 @@ function GalleryTile({ image, index }: { image: GalleryImage; index: number }) {
         type="button"
         onClick={() => actions.open(index)}
         aria-label={label}
-        className="block w-full rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        className="block w-full rounded-lg focus-ring"
       >
         <AspectRatio ratio={aspectRatio} className="overflow-hidden rounded-lg">
           {/* Decorative: the button carries the accessible name. */}
@@ -406,7 +406,7 @@ function GalleryOverflowTile() {
         type="button"
         onClick={() => actions.open(maxVisible)}
         aria-label={`Show all ${total} images`}
-        className="block w-full rounded-lg border border-border bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        className="block w-full rounded-lg border border-border bg-muted focus-ring"
       >
         <AspectRatio ratio={aspectRatio} className="overflow-hidden rounded-lg">
           <span className="flex size-full items-center justify-center text-subtitle text-muted-foreground transition-colors duration-fast ease-standard group-hover:text-foreground motion-reduce:transition-none">

package/src/grouped-parts.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent } from "storybook/test";
 import { GroupedParts } from "./grouped-parts";
 import { groupPartByType, type GroupablePart } from "./part-groups";
 
@@ -102,3 +103,25 @@ export const DarkTheme: Story = {
     ),
   ],
 };
+
+/**
+ * Focus indicator on group triggers (#313): Tab to a collapsible trigger and
+ * assert the compound indicator's OUTLINE layer (`outlineStyle: "solid"`,
+ * `--ring-contour`) that `focus-ring-inset` adds. `boxShadow !== "none"`
+ * alone also passes on the legacy `focus-visible:outline-none
+ * focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset`
+ * pattern (Tailwind's `ring-2` still paints a box-shadow), so it does not
+ * lock the fix.
+ */
+export const FocusIndicator: Story = {
+  args: { parts },
+  play: async ({ canvas, userEvent }) => {
+    const triggers = canvas.getAllByRole("button");
+    await userEvent.tab();
+    await expect(triggers[0]).toHaveFocus();
+    const focused = getComputedStyle(triggers[0]);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+  },
+};

package/src/grouped-parts.tsx

@@ -87,7 +87,7 @@ function DefaultGroup({
         className={cn(
           "group flex w-full items-center gap-2 p-3 text-body text-muted-foreground",
           "transition-colors duration-fast ease-standard hover:text-foreground motion-reduce:transition-none",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+          "focus-ring-inset",
         )}
       >
         <BrainIcon aria-hidden="true" className="size-4 shrink-0" />

package/src/index.ts

@@ -47,6 +47,7 @@ export * from "./gallery";
 export * from "./grouped-parts";
 export * from "./image";
 export * from "./inline-citation";
+export * from "./a2ui";
 export * from "./jsx-preview";
 // Mermaid loads on first diagram render, not in the entry chunk. `preloadMermaid`
 // warms it early when a surface is known to render diagrams.

package/src/message-compare.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
 import { MessageCompare, MessageCompareColumn } from "./message-compare";
 import { MessageFeedback } from "./message-feedback";
 import { MessageResponse } from "./message";
@@ -173,3 +174,42 @@ export const Mobile: Story = {
     </div>
   ),
 };
+
+/**
+ * Focus indicator on scrollable compare column (#313): Tab to the column
+ * body and assert the compound indicator's OUTLINE layer. The prior version
+ * read `role="region"` — that's `MessageCompareColumn`'s OUTER wrapper
+ * (`message-compare.tsx:416`, header + body), which never receives focus or
+ * `focus-ring-inset`. The actual scrollable, tabbable, styled element is the
+ * nested `[data-slot="message-compare-column-body"]` div
+ * (`message-compare.tsx:441-446`) — querying the region always read
+ * `boxShadow: "none"` off the wrong node, regardless of the fix.
+ */
+export const FocusIndicator: Story = {
+  render: () => (
+    <div className="h-96">
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "GPT-5" }} status="ready">
+          <MessageResponse>{GPT_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Claude" }} status="ready">
+          <MessageResponse>{CLAUDE_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+      </MessageCompare>
+    </div>
+  ),
+  play: async ({ canvasElement, userEvent }) => {
+    const body = canvasElement.querySelector<HTMLElement>(
+      '[data-slot="message-compare-column-body"]',
+    );
+    if (body == null) {
+      throw new Error("expected a message-compare-column-body scroll container");
+    }
+    await userEvent.tab();
+    await expect(body).toHaveFocus();
+    const focused = getComputedStyle(body);
+    await expect(focused.boxShadow).not.toBe("none");
+    await expect(focused.outlineStyle).toBe("solid");
+    await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+  },
+};

package/src/message-compare.tsx

@@ -416,6 +416,7 @@ export const MessageCompareColumn = forwardRef<HTMLDivElement, MessageCompareCol
         role="region"
         {...props}
       >
+        {/* header-band-exempt: a column header inside the comparison grid, not shell chrome */}
         <div
           className="flex shrink-0 items-center justify-between gap-2 border-b px-3 py-2"
           data-slot="message-compare-column-header"
@@ -439,7 +440,7 @@ export const MessageCompareColumn = forwardRef<HTMLDivElement, MessageCompareCol
           )}
         </div>
         <div
-          className="min-h-0 flex-1 overflow-y-auto p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+          className="min-h-0 flex-1 overflow-y-auto p-4 focus-ring-inset"
           data-slot="message-compare-column-body"
           onScroll={handleScroll}
           ref={setScrollRef}

package/src/message-form.tsx

@@ -689,7 +689,7 @@ export const MessageFormTitle = forwardRef<HTMLParagraphElement, MessageFormTitl
       <p
         ref={ref}
         id={headingId}
-        className={cn("text-subtitle font-semibold text-foreground text-balance", className)}
+        className={cn("text-subtitle text-foreground text-balance", className)}
         {...props}
       >
         {content}

package/src/message-table.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent } from "storybook/test";
 import { useState } from "react";
 import { MessageTable, type TableSort } from "./message-table";
 import type { TableSpec } from "./message-table-spec";
@@ -174,3 +175,26 @@ export const DarkTheme: Story = {
     ),
   ],
 };
+
+/**
+ * Focus indicator on sortable column headers (#313): Tab to a sort header and
+ * assert the compound indicator's OUTLINE layer (`outlineStyle: "solid"`,
+ * `--ring-contour`) that `focus-ring` adds. `boxShadow !== "none"` alone also
+ * passes on the legacy `focus-visible:outline-none focus-visible:ring-2
+ * focus-visible:ring-ring focus-visible:ring-offset-1` pattern (Tailwind's
+ * `ring-2` still paints a box-shadow), so it does not lock the fix.
+ */
+export const FocusIndicator: Story = {
+  args: { spec: invoicesSpec, sortable: true },
+  play: async ({ canvas, userEvent }) => {
+    const buttons = canvas.getAllByRole("button");
+    if (buttons.length > 0) {
+      await userEvent.tab();
+      await expect(buttons[0]).toHaveFocus();
+      const focused = getComputedStyle(buttons[0]);
+      await expect(focused.boxShadow).not.toBe("none");
+      await expect(focused.outlineStyle).toBe("solid");
+      await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+    }
+  },
+};

package/src/message-table.tsx

@@ -301,7 +301,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
                         onClick={() => toggleSort(column)}
                         className={cn(
                           "inline-flex items-center gap-1 rounded-sm font-medium",
-                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                          "focus-ring",
                           "hover:text-foreground transition-colors duration-fast ease-standard motion-reduce:transition-none",
                           numeric && "flex-row-reverse",
                         )}

package/src/package-info.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Badge } from "@elabs-ai/components-ui";
+import { Badge, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { ArrowRightIcon, MinusIcon, PackageIcon, PlusIcon } from "lucide-react";
 import type { HTMLAttributes } from "react";
@@ -173,14 +173,17 @@ export const PackageInfoDependencies = ({
   className,
   children,
   ...props
-}: PackageInfoDependenciesProps) => (
-  <div className={cn("space-y-2", className)} {...props}>
-    <span className="font-medium text-muted-foreground text-meta uppercase tracking-wide">
-      Dependencies
-    </span>
-    <div className="space-y-1">{children}</div>
-  </div>
-);
+}: PackageInfoDependenciesProps) => {
+  const { t } = useLocale();
+  return (
+    <div className={cn("space-y-2", className)} {...props}>
+      <span className="text-eyebrow uppercase text-muted-foreground">
+        {t("ai.packageInfo.dependencies")}
+      </span>
+      <div className="space-y-1">{children}</div>
+    </div>
+  );
+};
 
 export type PackageInfoDependencyProps = HTMLAttributes<HTMLDivElement> & {
   name: string;

package/src/reasoning.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./reasoning";
 const meta = {
@@ -79,3 +80,29 @@ export const StructuredLedger: Story = {
     </Reasoning>
   ),
 };
+
+/**
+ * Focus indicator: Tab to the trigger and assert a real box-shadow exists,
+ * mirroring the library's compound indicator (not the browser default).
+ */
+export const FocusIndicator: Story = {
+  name: "Keyboard focus",
+  render: () => (
+    <Reasoning className="max-w-prose">
+      <ReasoningTrigger />
+      <ReasoningContent>{"Checked the schema and ran the aggregation."}</ReasoningContent>
+    </Reasoning>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    // Find the trigger button inside the Collapsible component
+    const trigger = canvas.getByRole("button");
+
+    // Tab rather than .focus(): `:focus-visible` is what `focus-ring` keys
+    // on, and a programmatic focus does not reliably match it.
+    await userEvent.tab();
+    await expect(trigger).toHaveFocus();
+
+    const focused = getComputedStyle(trigger);
+    await expect(focused.boxShadow).not.toBe("none");
+  },
+};

package/src/reasoning.tsx

@@ -172,7 +172,7 @@ export const ReasoningTrigger = memo(
     return (
       <CollapsibleTrigger
         className={cn(
-          "flex w-full items-center gap-2 text-muted-foreground text-body transition-colors hover:text-foreground",
+          "flex w-full items-center gap-2 text-muted-foreground text-body transition-colors hover:text-foreground focus-ring",
           className,
         )}
         {...props}

package/src/session-header.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 
 import { ChatGreeting } from "./chat-greeting";
 import { SessionHeader } from "./session-header";
@@ -126,3 +126,37 @@ export const WithChatGreeting: Story = {
     </div>
   ),
 };
+
+/**
+ * Focus indicator on whats-new link (#313): Tab to the link and assert the
+ * compound indicator's OUTLINE layer (`outlineStyle: "solid"`,
+ * `--ring-contour`) that `focus-ring` adds. `boxShadow !== "none"` alone
+ * also passes on the legacy `focus-visible:outline-none
+ * focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`
+ * pattern (Tailwind's `ring-2` still paints a box-shadow), so it does not
+ * lock the fix.
+ */
+export const FocusIndicator: Story = {
+  args: {
+    whatsNew: [
+      { label: "New feature", href: "https://example.com" },
+      { label: "Bug fix", href: "https://example.com" },
+    ],
+  },
+  render: (args) => (
+    <div className="mx-auto max-w-md bg-background">
+      <SessionHeader {...args} />
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const links = canvas.getAllByRole("link");
+    if (links.length > 0) {
+      await userEvent.tab();
+      await expect(links[0]).toHaveFocus();
+      const focused = getComputedStyle(links[0]);
+      await expect(focused.boxShadow).not.toBe("none");
+      await expect(focused.outlineStyle).toBe("solid");
+      await expect(parseFloat(focused.outlineWidth)).toBeGreaterThan(0);
+    }
+  },
+};

package/src/session-header.tsx

@@ -194,7 +194,7 @@ export const SessionHeader = forwardRef<HTMLDivElement, SessionHeaderProps>(func
                   {item.href != null ? (
                     <a
                       href={item.href}
-                      className="text-link underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                      className="text-link underline-offset-4 hover:underline focus-ring"
                     >
                       {item.label}
                     </a>

package/src/sources.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
 import { Source, SourceList, Sources, SourcesContent, SourcesTrigger } from "./sources";
 const meta = {
   title: "AI/Sources",
@@ -32,3 +33,32 @@ export const GroundingFooter: Story = {
     />
   ),
 };
+
+/**
+ * Focus indicator: Tab to the trigger and assert a real box-shadow exists,
+ * mirroring the library's compound indicator (not the browser default).
+ */
+export const FocusIndicator: Story = {
+  name: "Keyboard focus",
+  render: () => (
+    <Sources>
+      <SourcesTrigger count={2} />
+      <SourcesContent>
+        <Source href="https://docs.acme.com" title="Acme Docs" />
+        <Source href="https://ci.acme.com" title="CI run #42" />
+      </SourcesContent>
+    </Sources>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    // Find the trigger button inside the Collapsible component
+    const trigger = canvas.getByRole("button");
+
+    // Tab rather than .focus(): `:focus-visible` is what `focus-ring` keys
+    // on, and a programmatic focus does not reliably match it.
+    await userEvent.tab();
+    await expect(trigger).toHaveFocus();
+
+    const focused = getComputedStyle(trigger);
+    await expect(focused.boxShadow).not.toBe("none");
+  },
+};

package/src/sources.tsx

@@ -16,7 +16,10 @@ export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
 };
 
 export const SourcesTrigger = ({ className, count, children, ...props }: SourcesTriggerProps) => (
-  <CollapsibleTrigger className={cn("group flex items-center gap-2", className)} {...props}>
+  <CollapsibleTrigger
+    className={cn("group flex items-center gap-2 focus-ring", className)}
+    {...props}
+  >
     {children ?? (
       <>
         <p className="font-medium">Used {count} sources</p>