fix(toolbar): add back disabled support to toolbar buttons

.changeset/fix-toolbar-button-disabled.md

@@ -0,0 +1,6 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Restore disabled and loading state handling for `Toolbar.Button` so disabled
+controls expose the correct semantics and cannot be activated.

packages/kumo/src/components/toolbar/toolbar.browser.test.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, test } from "vite-plus/test";
+import { describe, expect, test, vi } from "vite-plus/test";
 import { userEvent } from "vite-plus/test/browser";
 import { render } from "vitest-browser-react";
 import { Combobox } from "../combobox/combobox";
@@ -7,6 +7,75 @@ import { Toolbar } from "./toolbar";
 
 const fruits = ["Apple", "Banana", "Cherry"];
 
+describe("Toolbar.Button interactions", () => {
+  test("disabled buttons expose their state and cannot be activated", async () => {
+    const onDisabledClick = vi.fn();
+    const onEnabledClick = vi.fn();
+    const { getByRole } = await render(
+      <Toolbar>
+        <Toolbar.Button disabled onClick={onDisabledClick}>
+          Disabled
+        </Toolbar.Button>
+        <Toolbar.Button onClick={onEnabledClick}>Enabled</Toolbar.Button>
+      </Toolbar>,
+    );
+
+    const disabled = getByRole("button", { name: "Disabled" });
+    const enabled = getByRole("button", { name: "Enabled" });
+    const disabledElement = disabled.element() as HTMLButtonElement;
+    const enabledElement = enabled.element() as HTMLButtonElement;
+
+    await expect.element(disabled).toHaveAttribute("aria-disabled", "true");
+    disabledElement.click();
+    enabledElement.click();
+
+    expect(onDisabledClick).not.toHaveBeenCalled();
+    expect(onEnabledClick).toHaveBeenCalledOnce();
+  });
+
+  test("loading disables the outer toolbar control", async () => {
+    const onClick = vi.fn();
+    const { getByRole } = await render(
+      <Toolbar>
+        <Toolbar.Button aria-label="Save" loading onClick={onClick}>
+          Save
+        </Toolbar.Button>
+      </Toolbar>,
+    );
+
+    const button = getByRole("button", { name: "Save" });
+    const buttonElement = button.element() as HTMLButtonElement;
+    await expect.element(button).toHaveAttribute("aria-disabled", "true");
+    buttonElement.click();
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test("focusableWhenDisabled controls roving focus", async () => {
+    const { getByRole } = await render(
+      <Toolbar>
+        <Toolbar.Button>Before</Toolbar.Button>
+        <Toolbar.Button disabled>Focusable disabled</Toolbar.Button>
+        <Toolbar.Button disabled focusableWhenDisabled={false}>
+          Skipped disabled
+        </Toolbar.Button>
+        <Toolbar.Button>After</Toolbar.Button>
+      </Toolbar>,
+    );
+
+    const before = getByRole("button", { name: "Before" });
+    const focusableDisabled = getByRole("button", {
+      name: "Focusable disabled",
+    });
+    const after = getByRole("button", { name: "After" });
+
+    await before.click();
+    await userEvent.keyboard("{ArrowRight}");
+    await expect.element(focusableDisabled).toHaveFocus();
+    await userEvent.keyboard("{ArrowRight}");
+    await expect.element(after).toHaveFocus();
+  });
+});
+
 describe("Toolbar popup control interactions", () => {
   test("Select opens and selects through a rendered Toolbar.Button", async () => {
     const { getByRole } = await render(

packages/kumo/src/components/toolbar/toolbar.tsx

@@ -166,6 +166,7 @@ const Button = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       <ToolbarBase.Button
         ref={ref}
         data-kumo-component="Toolbar.Button"
+        disabled={loading || disabled}
         className={cn(className, TOOLBAR_CONTROL_STYLES)}
         render={button}
         {...props}