@edux-design/buttons 0.1.3 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -8,9 +8,9 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     }
   },
   "scripts": {
@@ -32,6 +32,7 @@
     "@edux-design/utils": "*"
   },
   "peerDependencies": {
+    "@edux-design/tokens": ">=0.2.0 <0.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   }

package/src/demo/ButtonCompatibility.stories.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import {
+  Button,
+  ButtonCounter,
+  ButtonGroup,
+  ButtonGroupItem,
+  IconButton,
+  MenuButton,
+} from "./../index";
+
+const sizes = ["small", "medium", "large"];
+const variants = [
+  { label: "Primary", props: {} },
+  { label: "Secondary", props: { isSecondary: true } },
+  { label: "Bare", props: { isBare: true } },
+  { label: "Danger", props: { isDanger: true } },
+  { label: "Danger bare", props: { isDanger: true, isBare: true } },
+  { label: "Disabled", props: { disabled: true } },
+];
+
+function GroupExample() {
+  const [value, setValue] = useState("one");
+
+  return (
+    <ButtonGroup value={value} onChange={setValue}>
+      <ButtonGroupItem value="one">One</ButtonGroupItem>
+      <ButtonGroupItem value="two">Two</ButtonGroupItem>
+      <ButtonGroupItem value="three">Three</ButtonGroupItem>
+    </ButtonGroup>
+  );
+}
+
+function ControlMatrix() {
+  return (
+    <div className="space-y-24">
+      <section className="space-y-12">
+        <h3 className="text-lg font-semibold text-fg-emphasis">
+          Button variants
+        </h3>
+        <div className="grid gap-12">
+          {variants.map(({ label, props }) => (
+            <div key={label} className="flex flex-wrap items-center gap-12">
+              {sizes.map((size) => (
+                <Button key={size} size={size} {...props}>
+                  {label} {size}
+                </Button>
+              ))}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="space-y-12">
+        <h3 className="text-lg font-semibold text-fg-emphasis">
+          Related controls
+        </h3>
+        <div className="flex flex-wrap items-center gap-12">
+          {sizes.map((size) => (
+            <IconButton
+              key={size}
+              size={size}
+              icon={<span aria-hidden="true">×</span>}
+              aria-label={`Close ${size}`}
+            />
+          ))}
+          <MenuButton size="small" aria-expanded="false">
+            Small menu
+          </MenuButton>
+          <MenuButton size="medium" aria-expanded="false">
+            Medium menu
+          </MenuButton>
+        </div>
+        <div className="flex flex-wrap items-center gap-12">
+          {sizes.map((size) => (
+            <ButtonCounter
+              key={size}
+              size={size}
+              defaultValue={2}
+              aria-label={`${size} quantity`}
+            />
+          ))}
+        </div>
+        <GroupExample />
+      </section>
+    </div>
+  );
+}
+
+const themeCases = [
+  { label: "Light · Blue", className: "theme--light brand--blue" },
+  { label: "Light · Teal", className: "theme--light brand--teal" },
+  { label: "Dark · Blue", className: "theme--dark brand--blue" },
+  { label: "Dark · Teal", className: "theme--dark brand--teal" },
+];
+
+export default {
+  title: "Components/Button/Compatibility",
+  parameters: {
+    layout: "fullscreen",
+    chromatic: { disableSnapshot: false },
+  },
+};
+
+export const CompatibilityMatrix = {
+  render: () => (
+    <div className="grid grid-cols-1 2xl:grid-cols-2">
+      {themeCases.map(({ label, className }) => (
+        <div key={label} className={`${className} bg-bg-base p-24`}>
+          <h2 className="mb-16 text-xl font-bold text-fg-emphasis">{label}</h2>
+          <ControlMatrix />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/elements/Button.a11y.test.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Button } from "./Button";
+import { IconButton } from "./IconButton";
+import { MenuButton } from "./MenuButton";
+import { ButtonGroup } from "./ButtonGroup";
+import { ButtonGroupItem } from "./ButtonGroupItem";
+import { ButtonCounter } from "./ButtonCounter";
+import { expectNoAxeViolations } from "./testA11y";
+
+describe("buttons accessibility", () => {
+  it("Button has no detectable accessibility violations", async () => {
+    const { container } = render(
+      <Button startIcon={<span aria-hidden="true">+</span>}>Save</Button>,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+
+  it("IconButton has no detectable accessibility violations when named", async () => {
+    const { container } = render(
+      <IconButton
+        icon={<span aria-hidden="true">X</span>}
+        aria-label="Close dialog"
+      />,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+
+  it("MenuButton has no detectable accessibility violations", async () => {
+    const { container } = render(
+      <MenuButton aria-expanded={false}>Options</MenuButton>,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+
+  it("ButtonGroup has no detectable accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroup defaultValue="first">
+        <ButtonGroupItem value="first">First</ButtonGroupItem>
+        <ButtonGroupItem value="second">Second</ButtonGroupItem>
+        <ButtonGroupItem value="third" disabled>
+          Third
+        </ButtonGroupItem>
+      </ButtonGroup>,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+
+  it("ButtonCounter has no detectable accessibility violations", async () => {
+    const { container } = render(
+      <ButtonCounter defaultValue={2} aria-label="Quantity" />,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+});

package/src/elements/Button.test.jsx

@@ -11,17 +11,17 @@ describe("Button", () => {
   it("applies medium size by default", () => {
     render(<Button>Default size</Button>);
     const btn = screen.getByRole("button");
-    expect(btn.className).toMatch(/h-control-md/);
+    expect(btn).toHaveClass("h-control-md");
   });
 
   it("applies small size when size='small'", () => {
     render(<Button size="small">Small</Button>);
-    expect(screen.getByRole("button").className).toMatch(/h-control-sm/);
+    expect(screen.getByRole("button")).toHaveClass("h-control-sm");
   });
 
   it("applies large size when size='large'", () => {
     render(<Button size="large">Large</Button>);
-    expect(screen.getByRole("button").className).toMatch(/h-control-lg/);
+    expect(screen.getByRole("button")).toHaveClass("h-control-lg");
   });
 
   it("uses stretched width when isStretched=true", () => {

package/src/elements/ButtonCounter.jsx

@@ -2,6 +2,7 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -67,6 +68,7 @@ export const ButtonCounter = forwardRef(function ButtonCounter(
     decrementButtonProps,
     incrementButtonProps,
     className,
+    "aria-label": ariaLabel,
     ...rest
   },
   ref,
@@ -123,16 +125,16 @@ export const ButtonCounter = forwardRef(function ButtonCounter(
 
   const CONTROL_SIZES = {
     small: {
-      button: "h-[36px] w-[36px] text-sm",
-      display: "h-[36px] min-w-[48px] px-12 text-sm",
+      button: "size-control-sm text-sm",
+      display: "h-control-sm min-w-[48px] px-12 text-sm",
     },
     medium: {
-      button: "h-[44px] w-[44px] text-base",
-      display: "h-[44px] min-w-[56px] px-12 text-base",
+      button: "size-control-md text-base",
+      display: "h-control-md min-w-[56px] px-12 text-base",
     },
     large: {
-      button: "h-[56px] w-[56px] text-lg",
-      display: "h-[56px] min-w-[72px] px-16 text-lg",
+      button: "size-control-lg text-lg",
+      display: "h-control-lg min-w-[72px] px-16 text-lg",
     },
   };
 
@@ -212,6 +214,10 @@ export const ButtonCounter = forwardRef(function ButtonCounter(
   const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
   const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
 
+  const generatedValueId = useId();
+  const valueElementId = inputProps?.id ?? generatedValueId;
+  const valueAriaLabel = inputProps?.["aria-label"] ?? ariaLabel ?? "Value";
+
   const [draftValue, setDraftValue] = useState(String(clampedValue));
   const [isEditing, setIsEditing] = useState(false);
   const inputRef = useRef(null);
@@ -247,6 +253,7 @@ export const ButtonCounter = forwardRef(function ButtonCounter(
         {...decrementButtonProps}
         type="button"
         aria-label={decrementButtonProps?.["aria-label"] ?? "Decrease"}
+        aria-controls={valueElementId}
         aria-disabled={decrementDisabled}
         disabled={decrementDisabled}
         className={cx(
@@ -271,8 +278,9 @@ export const ButtonCounter = forwardRef(function ButtonCounter(
           ref={inputRef}
           type="number"
           inputMode="numeric"
+          id={valueElementId}
           disabled={!!disabled}
-          aria-label={inputProps?.["aria-label"] ?? "Value"}
+          aria-label={valueAriaLabel}
           className={cx(
             displayStyles,
             "w-[44px] text-center outline-none bg-transparent text-fg-base",
@@ -310,15 +318,22 @@ export const ButtonCounter = forwardRef(function ButtonCounter(
           }}
         />
       ) : (
-        <div className={cx(displayStyles, "select-none")}>
+        <output
+          id={valueElementId}
+          aria-label={valueAriaLabel}
+          aria-live="polite"
+          aria-atomic="true"
+          className={cx(displayStyles, "select-none")}
+        >
           {children ?? clampedValue}
-        </div>
+        </output>
       )}
 
       <button
         {...incrementButtonProps}
         type="button"
         aria-label={incrementButtonProps?.["aria-label"] ?? "Increase"}
+        aria-controls={valueElementId}
         aria-disabled={incrementDisabled}
         disabled={incrementDisabled}
         className={cx(

package/src/elements/ButtonCounter.test.jsx

@@ -35,16 +35,19 @@ describe("ButtonCounter", () => {
   it("applies medium size by default", () => {
     render(<ButtonCounter defaultValue={1} />);
     const buttons = screen.getAllByRole("button");
-    expect(buttons[0].className).toMatch(/h-\[44px\]/);
-    expect(buttons[1].className).toMatch(/h-\[44px\]/);
+    expect(buttons[0]).toHaveClass("size-control-md");
+    expect(buttons[1]).toHaveClass("size-control-md");
+    expect(screen.getByLabelText("Value")).toHaveClass("h-control-md");
   });
 
   it("applies small and large sizes", () => {
     const { rerender } = render(<ButtonCounter size="small" defaultValue={1} />);
-    expect(screen.getAllByRole("button")[0].className).toMatch(/h-\[36px\]/);
+    expect(screen.getAllByRole("button")[0]).toHaveClass("size-control-sm");
+    expect(screen.getByLabelText("Value")).toHaveClass("h-control-sm");
 
     rerender(<ButtonCounter size="large" defaultValue={1} />);
-    expect(screen.getAllByRole("button")[0].className).toMatch(/h-\[56px\]/);
+    expect(screen.getAllByRole("button")[0]).toHaveClass("size-control-lg");
+    expect(screen.getByLabelText("Value")).toHaveClass("h-control-lg");
   });
 
   it("applies variants", () => {
@@ -97,4 +100,22 @@ describe("ButtonCounter", () => {
 
     warnSpy.mockRestore();
   });
+
+  it("exposes the non-editable value through an output element", () => {
+    render(<ButtonCounter defaultValue={5} />);
+
+    expect(screen.getByLabelText("Value")).toHaveTextContent("5");
+    expect(screen.getByRole("button", { name: "Increase" })).toHaveAttribute(
+      "aria-controls",
+      screen.getByLabelText("Value").getAttribute("id"),
+    );
+  });
+
+
+  it("uses a top-level aria-label for the exposed value when provided", () => {
+    render(<ButtonCounter defaultValue={2} aria-label="Quantity" />);
+
+    expect(screen.getByLabelText("Quantity")).toHaveTextContent("2");
+  });
+
 });

package/src/elements/ButtonGroup.jsx

@@ -248,9 +248,17 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
   }, [normalizedOptions]);
 
   const indicatorVisible = indicator.width > 0 && indicator.height > 0;
+  const selectedIndex = normalizedOptions.findIndex(
+    (option) => option.value === selectedValue && !option.disabled
+  );
+  const firstEnabledIndex = normalizedOptions.findIndex(
+    (option) => !option.disabled
+  );
+  const activeTabStopIndex =
+    selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
 
   const rootClasses = cx(
-    "inline-flex h-[44px] rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
+    "inline-flex h-control-md rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
     isStretched ? "w-full" : "w-auto",
     className
   );
@@ -261,7 +269,7 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
   );
 
   const buttonBaseClasses = cx(
-    "relative z-10 h-[36px] inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold tracking-tight transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:shadow-focus motion-reduce:duration-0",
+    "relative z-10 h-control-sm inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold tracking-tight transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:shadow-focus motion-reduce:duration-0",
     sizeStyles.button,
     isStretched ? "flex-1" : "w-auto"
   );
@@ -271,19 +279,20 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
       {...rest}
       ref={setContainerRef}
       role="radiogroup"
+      aria-orientation="horizontal"
       className={rootClasses}
     >
       <div className={trackClasses}>
         <span
           aria-hidden="true"
           className={cx(
-            "pointer-events-none h-[44px] absolute rounded-md border-2 border-border-primary-emphasis bg-bg-base shadow-[0_8px_20px_rgb(22_92_131/0.18)] transition-[transform,width,height] duration-300 ease-out motion-reduce:duration-0",
+            "pointer-events-none h-control-md absolute rounded-md border-2 border-border-primary-emphasis bg-bg-base shadow-[0_8px_20px_rgb(22_92_131/0.18)] transition-[transform,width,height] duration-300 ease-out motion-reduce:duration-0",
             !indicatorVisible && "opacity-0"
           )}
           style={{
             width: indicator.width || undefined,
             height: indicator.height || undefined,
-            transform: `translate(${indicator.x - 4}px`,
+            transform: `translate(${indicator.x - 4}px, ${indicator.y - 4}px)`,
           }}
         />
 
@@ -352,7 +361,13 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
               type="button"
               role="radio"
               aria-checked={isActive}
-              // tabIndex={isActive ? 0 : -1}
+              tabIndex={
+                option.disabled
+                  ? -1
+                  : index === activeTabStopIndex
+                    ? 0
+                    : -1
+              }
               disabled={option.disabled}
               className={buttonClasses}
               onClick={() => handleSelect(option)}

package/src/elements/ButtonGroup.test.jsx

@@ -4,6 +4,21 @@ import { ButtonGroup } from "./ButtonGroup";
 import { ButtonGroupItem } from "./ButtonGroupItem";
 
 describe("ButtonGroup", () => {
+  it("uses the shared control size contract", () => {
+    const { container } = render(
+      <ButtonGroup defaultValue="first">
+        <ButtonGroupItem value="first">First</ButtonGroupItem>
+        <ButtonGroupItem value="second">Second</ButtonGroupItem>
+      </ButtonGroup>,
+    );
+
+    expect(screen.getByRole("radiogroup")).toHaveClass("h-control-md");
+    expect(screen.getAllByRole("radio")[0]).toHaveClass("h-control-sm");
+    expect(container.querySelector('[aria-hidden="true"]')).toHaveClass(
+      "h-control-md",
+    );
+  });
+
   it("renders provided options and honors defaultValue", () => {
     render(
       <ButtonGroup defaultValue="second">
@@ -66,4 +81,50 @@ describe("ButtonGroup", () => {
     expect(handleChange).not.toHaveBeenCalled();
     expect(disabled).toHaveAttribute("aria-checked", "false");
   });
+
+  it("uses roving tabindex for keyboard navigation", () => {
+    render(
+      <ButtonGroup defaultValue="second">
+        <ButtonGroupItem value="first">First</ButtonGroupItem>
+        <ButtonGroupItem value="second">Second</ButtonGroupItem>
+        <ButtonGroupItem value="third">Third</ButtonGroupItem>
+      </ButtonGroup>,
+    );
+
+    expect(screen.getByRole("radio", { name: "Second" })).toHaveAttribute(
+      "tabindex",
+      "0",
+    );
+    expect(screen.getByRole("radio", { name: "First" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+    expect(screen.getByRole("radio", { name: "Third" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+  });
+
+  it("moves focus and selection with arrow keys", () => {
+    const handleChange = vi.fn();
+    render(
+      <ButtonGroup defaultValue="first" onChange={handleChange}>
+        <ButtonGroupItem value="first">First</ButtonGroupItem>
+        <ButtonGroupItem value="second">Second</ButtonGroupItem>
+        <ButtonGroupItem value="third">Third</ButtonGroupItem>
+      </ButtonGroup>,
+    );
+
+    const first = screen.getByRole("radio", { name: "First" });
+    fireEvent.keyDown(first, { key: "ArrowRight" });
+
+    const second = screen.getByRole("radio", { name: "Second" });
+    expect(second).toHaveFocus();
+    expect(second).toHaveAttribute("aria-checked", "true");
+    expect(handleChange).toHaveBeenCalledWith(
+      "second",
+      expect.objectContaining({ value: "second" }),
+    );
+  });
+
 });

package/src/elements/IconButton.jsx

@@ -8,6 +8,8 @@ import { cx } from "@edux-design/utils";
  * Designed for circular icon-only buttons that follow the same
  * design-system patterns as the regular Button.
  *
+ * Provide an accessible name with `aria-label` or `aria-labelledby`.
+ *
  * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
  *   icon: React.ReactNode,
  *   size?: "small"|"medium"|"large",
@@ -31,8 +33,8 @@ import { cx } from "@edux-design/utils";
  * @example
  * ```jsx
  * <IconButton icon={<XIcon />} aria-label="Close" />
- * <IconButton icon={<EditIcon />} isSecondary />
- * <IconButton icon={<TrashIcon />} isDanger disabled />
+ * <IconButton icon={<EditIcon />} isSecondary aria-label="Edit" />
+ * <IconButton icon={<TrashIcon />} isDanger disabled aria-label="Delete" />
  * ```
  */
 export const IconButton = forwardRef(
@@ -62,15 +64,24 @@ export const IconButton = forwardRef(
           "[IconButton]: Multiple variant props passed. Using the highest priority only."
         );
       }
+
+      const hasAccessibleName = Boolean(
+        props["aria-label"] || props["aria-labelledby"]
+      );
+      if (!hasAccessibleName) {
+        console.warn(
+          "[IconButton]: Provide an accessible name with aria-label or aria-labelledby."
+        );
+      }
     }
 
     const defaults =
       "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full cursor-pointer";
 
     const sizes = {
-      small: "h-[36px] w-[36px] text-sm",
-      medium: "h-[44px] w-[44px] text-base",
-      large: "h-[56px] w-[56px] text-lg",
+      small: "size-control-sm text-sm",
+      medium: "size-control-md text-base",
+      large: "size-control-lg text-lg",
     };
 
     const variants = {

package/src/elements/IconButton.test.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { IconButton } from "./IconButton";
+
+describe("IconButton", () => {
+  it("renders an icon-only button with an accessible name", () => {
+    render(
+      <IconButton icon={<span aria-hidden="true">X</span>} aria-label="Close" />,
+    );
+
+    expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+  });
+
+  it("warns in dev mode when no accessible name is provided", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(<IconButton icon={<span aria-hidden="true">X</span>} />);
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      "[IconButton]: Provide an accessible name with aria-label or aria-labelledby.",
+    );
+
+    warnSpy.mockRestore();
+  });
+
+  it("does not warn when aria-labelledby is provided", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(
+      <>
+        <span id="icon-label">Close</span>
+        <IconButton icon={<span aria-hidden="true">X</span>} aria-labelledby="icon-label" />
+      </>,
+    );
+
+    expect(warnSpy).not.toHaveBeenCalledWith(
+      "[IconButton]: Provide an accessible name with aria-label or aria-labelledby.",
+    );
+
+    warnSpy.mockRestore();
+  });
+
+  it.each([
+    ["small", "size-control-sm"],
+    ["medium", "size-control-md"],
+    ["large", "size-control-lg"],
+  ])("maps the %s size to the shared control token", (size, className) => {
+    render(
+      <IconButton
+        icon={<span aria-hidden="true">X</span>}
+        aria-label="Close"
+        size={size}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Close" })).toHaveClass(
+      className,
+    );
+  });
+});