@mindlogic-ai/logician-ui 5.0.0-alpha.19 → 5.0.0-alpha.20

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAA8B,MAAM,gBAAgB,CAAC;AA0K5E,eAAO,MAAM,MAAM,gEAA0C,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAA8B,MAAM,gBAAgB,CAAC;AAwM5E,eAAO,MAAM,MAAM,gEAA0C,CAAC"}

package/dist/components/Button/Button.js

@@ -28,7 +28,7 @@ var Button_styles = require('./Button.styles.js');
  * <Button as="a" href="/docs" target="_blank">문서</Button>
  * ```
  */
-const ButtonImpl = React.forwardRef(({ variant: variantProp, isDestructive: isDestructiveProp = false, size, lift, children, _hover: hoverProp, _active: activeProp, _disabled: disabledProp, css: cssProp, ...restWithLegacy }, ref) => {
+const ButtonImpl = React.forwardRef(({ variant: variantProp, isDestructive: isDestructiveProp = false, size, lift, disabled, focusableWhenDisabled = false, onDisabledClick, onClick, children, _hover: hoverProp, _active: activeProp, _disabled: disabledProp, css: cssProp, ...restWithLegacy }, ref) => {
     // 4.x callers (untyped JS, `as any`) can still hand us `colorPalette` and
     // an old variant name. Strip it so it never reaches Chakra's own recipe,
     // and map the pair onto a 5.0 role — see `Button.legacy.ts`.
@@ -49,6 +49,23 @@ const ButtonImpl = React.forwardRef(({ variant: variantProp, isDestructive: isDe
         isDestructive = isDestructive || resolved.isDestructive;
     }
     const base = Button_styles.getButtonStyles(variant, isDestructive);
+    // `focusableWhenDisabled`: disabled by ARIA, not by the attribute, so the
+    // button stays focusable and can answer a press. `aria-disabled=true` is
+    // in Chakra's `_disabled` condition, so the disabled colours and cursor
+    // still apply; `data-disabled` is what `_hover` / `_active` exclude, so
+    // without it the button would still react to the pointer. `loading` keeps
+    // the native attribute (Chakra sets it) — see `focusableWhenDisabled`.
+    const softDisabled = !!disabled && focusableWhenDisabled && !rest.loading;
+    const handleClick = softDisabled
+        ? (event) => {
+            // Also what stops a `type="submit"` button from submitting.
+            event.preventDefault();
+            // A native disabled button sends no click to its ancestors either —
+            // a clickable row around it must not run its own action.
+            event.stopPropagation();
+            onDisabledClick?.(event);
+        }
+        : onClick;
     // Merged rather than spread after: each variant already owns `_hover` and
     // `_active` for its colours, and replacing either would drop them.
     const styles = lift
@@ -112,7 +129,10 @@ const ButtonImpl = React.forwardRef(({ variant: variantProp, isDestructive: isDe
         // Two clocks on one element — the press is faster than the colour
         // change — so the shorthand is written out and only the reduced-motion
         // guard comes from the vocabulary.
-        transition: Button_styles.buttonTransition, animationStyle: "composite", ref: ref, "data-variant": variant, "data-destructive": isDestructive || undefined, loadingText: loadingText, ...rest, 
+        transition: Button_styles.buttonTransition, animationStyle: "composite", ref: ref, "data-variant": variant, "data-destructive": isDestructive || undefined, loadingText: loadingText, disabled: softDisabled ? undefined : disabled, onClick: handleClick, ...rest, ...(softDisabled && {
+            'aria-disabled': true,
+            'data-disabled': '',
+        }), 
         // The `action` icon rule lives in `css` (a nested selector cannot be a
         // style prop); merged so a call site's `css` adds to it.
         css: mergeCss.mergeCss(base.css, cssProp), children: children }));

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":[null],"names":["forwardRef","useTranslate","isLegacyButtonProps","resolveLegacyButtonVariant","warnLegacyButtonProps","getButtonStyles","_jsx","ChakraButton","mergeCss","focusRing","buttonTransition","polymorphic"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":[null],"names":["forwardRef","useTranslate","isLegacyButtonProps","resolveLegacyButtonVariant","warnLegacyButtonProps","getButtonStyles","_jsx","ChakraButton","mergeCss","focusRing","buttonTransition","polymorphic"],"mappings":";;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;;AAgBG;AACH,MAAM,UAAU,GAAGA,gBAAU,CAC3B,CACE,EACE,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,iBAAiB,GAAG,KAAK,EACxC,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,qBAAqB,GAAG,KAAK,EAC7B,eAAe,EACf,OAAO,EACP,QAAQ,EACR,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,YAAY,EACvB,GAAG,EAAE,OAAO,EACZ,GAAG,cAAc,EAClB,EACD,GAAG,KACD;;;;AAIF,IAAA,MAAM,EACJ,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,eAAe,EAC5B,GAAG,IAAI,EACR,GAAG,cAAoE;;;;AAIxE,IAAA,MAAM,SAAS,GAAGC,yBAAY,EAAE;AAChC,IAAA,MAAM,WAAW,GACf,eAAe,KAAK;AAClB,UAAE,SAAS,CAAC,YAAY;AACxB,WAAG,eAAe,IAAI,SAAS,CAAC;AAEpC,IAAA,IAAI,OAAO,GAAkB,WAAW,IAAI,QAAQ;IACpD,IAAI,aAAa,GAAG,iBAAiB;IACrC,IAAIC,iCAAmB,CAAC,QAAQ,EAAE,aAAa,EAAE,WAAW,CAAC,EAAE;QAC7D,MAAM,QAAQ,GAAGC,wCAA0B,CACzC,QAAQ,EACR,aAAa,EACb,WAAW,CACZ;QACDC,mCAAqB,CAAC,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,CAAC;AACrE,QAAA,OAAO,GAAG,QAAQ,CAAC,OAAO;AAC1B,QAAA,aAAa,GAAG,aAAa,IAAI,QAAQ,CAAC,aAAa;IACzD;IAEA,MAAM,IAAI,GAAGC,6BAAe,CAAC,OAAO,EAAE,aAAa,CAAC;;;;;;;AAQpD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,QAAQ,IAAI,qBAAqB,IAAI,CAAC,IAAI,CAAC,OAAO;IACzE,MAAM,WAAW,GAAG;AAClB,UAAE,CAAC,KAAoC,KAAI;;YAEvC,KAAK,CAAC,cAAc,EAAE;;;YAGtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,eAAe,GAAG,KAAK,CAAC;QAC1B;UACA,OAAO;;;IAIX,MAAM,MAAM,GAAG;AACb,UAAE;AACE,YAAA,GAAG,IAAI;AACP,YAAA,MAAM,EAAE;gBACN,GAAG,IAAI,CAAC,MAAM;AACd,gBAAA,SAAS,EAAE,QAAQ;;;;;;AAMnB,gBAAA,MAAM,EAAE,4CAA4C;;AAEpD,gBAAA,KAAK,EAAE,EAAE,MAAM,EAAE,4CAA4C,EAAE;AAChE,aAAA;;AAED,YAAA,OAAO,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE;;;;AAI9D,YAAA,SAAS,EAAE;gBACT,GAAI,IAAI,CAAC,SAAoB;AAC7B,gBAAA,SAAS,EAAE,KAAK;AAChB,gBAAA,MAAM,EAAE,MAAM;AACf,aAAA;AACF;UACD,IAAI;AAER;;;;;;;;;AASG;IACH,QACEC,cAAA,CAACC,YAAY,EAAA,EACX,MAAM,EAAC,WAAW,EAClB,UAAU,EAAC,KAAK,EAChB,UAAU,EAAC,UAAU,EACrB,IAAI,EAAE,IAAI,EACV,YAAY,EAAC,IAAI,EAAA,GACb,MAAM;;;;;;;;AAQV,QAAA,MAAM,EAAEC,iBAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC1C,OAAO,EAAEA,iBAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC;;;;;;AAM7C,QAAA,SAAS,EAAEA,iBAAQ,CACjB,WAAW,IAAI,MAAM,GAAG,MAAM,CAAC,SAAS,GAAG,SAAS;;;QAGpD,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,aAAa,EAAE,EACrD,YAAY,CACb,KACGC,mBAAS,EACb,MAAM,EAAC,SAAS;;;AAGhB,QAAA,KAAK,EAAC,GAAG;;;;AAIT,QAAA,UAAU,EAAEC,8BAAgB,EAC5B,cAAc,EAAC,WAAW,EAC1B,GAAG,EAAE,GAAG,EAAA,cAAA,EACM,OAAO,EAAA,kBAAA,EACH,aAAa,IAAI,SAAS,EAC5C,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,GAAG,SAAS,GAAG,QAAQ,EAC7C,OAAO,EAAE,WAAW,EAAA,GAChB,IAAI,EAAA,IAGH,YAAY,IAAI;AACnB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,eAAe,EAAE,EAAE;SACpB,CAAC;;;AAGF,QAAA,GAAG,EAAEF,iBAAQ,CAAC,IAAI,CAAC,GAAoC,EAAE,OAAO,CAAC,EAAA,QAAA,EAEhE,QAAQ,EAAA,CACI;AAEnB,CAAC,CACF;AAED;;;;;;AAMG;AACH,UAAU,CAAC,WAAW,GAAG,QAAQ;MAEpB,MAAM,GAAGG,uBAAW,CAAiB,UAAU;;;;"}

package/dist/components/Button/Button.mjs

@@ -26,7 +26,7 @@ import { getButtonStyles, buttonTransition } from './Button.styles.mjs';
  * <Button as="a" href="/docs" target="_blank">문서</Button>
  * ```
  */
-const ButtonImpl = forwardRef(({ variant: variantProp, isDestructive: isDestructiveProp = false, size, lift, children, _hover: hoverProp, _active: activeProp, _disabled: disabledProp, css: cssProp, ...restWithLegacy }, ref) => {
+const ButtonImpl = forwardRef(({ variant: variantProp, isDestructive: isDestructiveProp = false, size, lift, disabled, focusableWhenDisabled = false, onDisabledClick, onClick, children, _hover: hoverProp, _active: activeProp, _disabled: disabledProp, css: cssProp, ...restWithLegacy }, ref) => {
     // 4.x callers (untyped JS, `as any`) can still hand us `colorPalette` and
     // an old variant name. Strip it so it never reaches Chakra's own recipe,
     // and map the pair onto a 5.0 role — see `Button.legacy.ts`.
@@ -47,6 +47,23 @@ const ButtonImpl = forwardRef(({ variant: variantProp, isDestructive: isDestruct
         isDestructive = isDestructive || resolved.isDestructive;
     }
     const base = getButtonStyles(variant, isDestructive);
+    // `focusableWhenDisabled`: disabled by ARIA, not by the attribute, so the
+    // button stays focusable and can answer a press. `aria-disabled=true` is
+    // in Chakra's `_disabled` condition, so the disabled colours and cursor
+    // still apply; `data-disabled` is what `_hover` / `_active` exclude, so
+    // without it the button would still react to the pointer. `loading` keeps
+    // the native attribute (Chakra sets it) — see `focusableWhenDisabled`.
+    const softDisabled = !!disabled && focusableWhenDisabled && !rest.loading;
+    const handleClick = softDisabled
+        ? (event) => {
+            // Also what stops a `type="submit"` button from submitting.
+            event.preventDefault();
+            // A native disabled button sends no click to its ancestors either —
+            // a clickable row around it must not run its own action.
+            event.stopPropagation();
+            onDisabledClick?.(event);
+        }
+        : onClick;
     // Merged rather than spread after: each variant already owns `_hover` and
     // `_active` for its colours, and replacing either would drop them.
     const styles = lift
@@ -110,7 +127,10 @@ const ButtonImpl = forwardRef(({ variant: variantProp, isDestructive: isDestruct
         // Two clocks on one element — the press is faster than the colour
         // change — so the shorthand is written out and only the reduced-motion
         // guard comes from the vocabulary.
-        transition: buttonTransition, animationStyle: "composite", ref: ref, "data-variant": variant, "data-destructive": isDestructive || undefined, loadingText: loadingText, ...rest, 
+        transition: buttonTransition, animationStyle: "composite", ref: ref, "data-variant": variant, "data-destructive": isDestructive || undefined, loadingText: loadingText, disabled: softDisabled ? undefined : disabled, onClick: handleClick, ...rest, ...(softDisabled && {
+            'aria-disabled': true,
+            'data-disabled': '',
+        }), 
         // The `action` icon rule lives in `css` (a nested selector cannot be a
         // style prop); merged so a call site's `css` adds to it.
         css: mergeCss(base.css, cssProp), children: children }));

package/dist/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraButton"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraButton"],"mappings":"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"}

package/dist/components/Button/Button.types.d.ts

@@ -1,4 +1,4 @@
-import type { ElementType } from 'react';
+import type { ElementType, MouseEvent } from 'react';
 import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 import type { PolymorphicProps } from '../../types/polymorphic';
 /**
@@ -81,6 +81,43 @@ export type ButtonOwnProps = Omit<ChakraButtonProps, 'variant' | 'colorScheme' |
      * @default false
      */
     lift?: boolean;
+    /**
+     * Keeps a `disabled` button in the Tab order and lets it receive clicks, so
+     * the screen can say *why* it is disabled.
+     *
+     * A natively `disabled` `<button>` cannot be focused and swallows every
+     * click: a keyboard or screen reader user may never find it, and a mouse
+     * user who presses it gets no answer at all. With this prop, `disabled`
+     * renders as `aria-disabled="true"` (plus `data-disabled`) instead of the
+     * native attribute:
+     *
+     * - the disabled colours, the `not-allowed` cursor and the "no hover, no
+     *   press" behaviour are the same as a native disabled button;
+     * - Tab still reaches it and the focus ring shows;
+     * - activating it (click, Enter, Space) does **not** call `onClick`, and its
+     *   default action is cancelled, so a `type="submit"` button does not submit
+     *   its form; the click does not bubble to ancestors; `onDisabledClick` is
+     *   called instead.
+     *
+     * Only activation is blocked: other handlers (`onKeyDown`, `onPointerDown`,
+     * …) still run, as they would on any focusable element. Inside a trigger
+     * (`Menu.Trigger asChild`, `Popover.Trigger asChild`) disable the root as
+     * well. Meant for `<button>`: with `as="a"` the `href` stays, so middle-click
+     * still opens it.
+     *
+     * Has no effect unless `disabled` is set. `loading` keeps the native
+     * `disabled` — a busy button is working, not refusing.
+     *
+     * @default false
+     */
+    focusableWhenDisabled?: boolean;
+    /**
+     * Called when a `disabled` + `focusableWhenDisabled` button is activated
+     * (click, Enter, Space) — where `onClick` would have been. Use it to explain
+     * the reason or move focus to what is missing (an unticked consent box).
+     * Never called on a natively disabled button, and never while `loading`.
+     */
+    onDisabledClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 /**
  * Props for `Button`, typed for whatever element `as` renders.

package/dist/components/Button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEzE;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,iBAAiB,EACjB,SAAS,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,GAAG,IAAI,CAC7E,GAAG;IACF;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;;;;;;;;OAcG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,WAAW,GAAG,QAAQ,IAC7D,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEzE;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,iBAAiB,EACjB,SAAS,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,GAAG,IAAI,CAC7E,GAAG;IACF;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;;;;;;;;OAcG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,WAAW,GAAG,QAAQ,IAC7D,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "5.0.0-alpha.19",
+  "version": "5.0.0-alpha.20",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Button/Button.focusableWhenDisabled.test.tsx

@@ -0,0 +1,218 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { system } from '../../theme';
+import { Button } from './Button';
+
+/**
+ * `focusableWhenDisabled` — a disabled button that can still be reached and
+ * pressed, so the screen can say why it is disabled.
+ *
+ * A native `disabled` button leaves the Tab order and swallows every click.
+ * FactChat's checkout pay button sat locked until a consent box was ticked,
+ * and pressing it did nothing at all — the reason was off screen. With the
+ * prop the button is disabled by `aria-disabled` instead: it looks and refuses
+ * the same, but focus and a press reach it, and `onDisabledClick` answers.
+ */
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('Button focusableWhenDisabled', () => {
+  it('drops native disabled for aria-disabled and data-disabled', () => {
+    wrap(
+      <Button disabled focusableWhenDisabled>
+        결제
+      </Button>
+    );
+    const button = screen.getByRole('button', { name: '결제' });
+    expect(button).not.toHaveAttribute('disabled');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(button).toHaveAttribute('data-disabled');
+  });
+
+  it('keeps the disabled look and cursor', () => {
+    wrap(
+      <>
+        <Button variant="primary" disabled>
+          native
+        </Button>
+        <Button variant="primary" disabled focusableWhenDisabled>
+          soft
+        </Button>
+      </>
+    );
+    const native = getComputedStyle(
+      screen.getByRole('button', { name: 'native' })
+    );
+    const soft = getComputedStyle(screen.getByRole('button', { name: 'soft' }));
+    expect(soft.cursor).toBe('not-allowed');
+    expect(soft.backgroundColor).toBe(native.backgroundColor);
+    expect(soft.color).toBe(native.color);
+  });
+
+  it('stays in the Tab order', async () => {
+    const user = userEvent.setup();
+    wrap(
+      <>
+        <Button>before</Button>
+        <Button disabled focusableWhenDisabled>
+          결제
+        </Button>
+      </>
+    );
+    await user.tab();
+    await user.tab();
+    expect(screen.getByRole('button', { name: '결제' })).toHaveFocus();
+  });
+
+  it('click, Enter and Space call onDisabledClick, never onClick', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const onDisabledClick = vi.fn();
+    wrap(
+      <Button
+        disabled
+        focusableWhenDisabled
+        onClick={onClick}
+        onDisabledClick={onDisabledClick}
+      >
+        결제
+      </Button>
+    );
+    const button = screen.getByRole('button', { name: '결제' });
+    await user.click(button);
+    button.focus();
+    await user.keyboard('{Enter}');
+    await user.keyboard(' ');
+    expect(onClick).not.toHaveBeenCalled();
+    expect(onDisabledClick).toHaveBeenCalledTimes(3);
+  });
+
+  it('a type="submit" button does not submit its form', async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn((event: React.FormEvent) => event.preventDefault());
+    wrap(
+      <form onSubmit={onSubmit}>
+        <input aria-label="이름" />
+        <Button type="submit" disabled focusableWhenDisabled>
+          보내기
+        </Button>
+      </form>
+    );
+    await user.click(screen.getByRole('button', { name: '보내기' }));
+    // Implicit submission: Enter in a field clicks the default button.
+    await user.type(screen.getByRole('textbox', { name: '이름' }), '{Enter}');
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('once enabled, behaves like any button', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const onDisabledClick = vi.fn();
+    wrap(
+      <Button
+        disabled={false}
+        focusableWhenDisabled
+        onClick={onClick}
+        onDisabledClick={onDisabledClick}
+      >
+        결제
+      </Button>
+    );
+    const button = screen.getByRole('button', { name: '결제' });
+    expect(button).not.toHaveAttribute('aria-disabled');
+    expect(button).not.toHaveAttribute('data-disabled');
+    await user.click(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onDisabledClick).not.toHaveBeenCalled();
+  });
+
+  it('loading keeps the native disabled attribute', () => {
+    const onDisabledClick = vi.fn();
+    wrap(
+      <Button
+        disabled
+        loading
+        focusableWhenDisabled
+        onDisabledClick={onDisabledClick}
+      >
+        결제
+      </Button>
+    );
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(button).not.toHaveAttribute('aria-disabled');
+    expect(getComputedStyle(button).cursor).toBe('progress');
+  });
+
+  it('the click does not reach an ancestor', async () => {
+    const user = userEvent.setup();
+    const onRowClick = vi.fn();
+    const onDisabledClick = vi.fn();
+    wrap(
+      <div onClick={onRowClick}>
+        <Button
+          disabled
+          focusableWhenDisabled
+          onDisabledClick={onDisabledClick}
+        >
+          결제
+        </Button>
+      </div>
+    );
+    await user.click(screen.getByRole('button', { name: '결제' }));
+    expect(onDisabledClick).toHaveBeenCalledTimes(1);
+    expect(onRowClick).not.toHaveBeenCalled();
+  });
+
+  it('a call-site aria-disabled / data-disabled cannot undo it', () => {
+    wrap(
+      <Button
+        disabled
+        focusableWhenDisabled
+        aria-disabled={false}
+        data-disabled={undefined}
+      >
+        결제
+      </Button>
+    );
+    const button = screen.getByRole('button', { name: '결제' });
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(button).toHaveAttribute('data-disabled');
+  });
+
+  describe('without the prop nothing changes', () => {
+    it('disabled is the native attribute, out of the Tab order', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      const onDisabledClick = vi.fn();
+      wrap(
+        <>
+          <Button>before</Button>
+          <Button disabled onClick={onClick} onDisabledClick={onDisabledClick}>
+            결제
+          </Button>
+        </>
+      );
+      const button = screen.getByRole('button', { name: '결제' });
+      expect(button).toBeDisabled();
+      expect(button).not.toHaveAttribute('aria-disabled');
+      await user.tab();
+      await user.tab();
+      expect(button).not.toHaveFocus();
+      await user.click(button);
+      expect(onClick).not.toHaveBeenCalled();
+      expect(onDisabledClick).not.toHaveBeenCalled();
+    });
+
+    it('an enabled button calls onClick', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      wrap(<Button onClick={onClick}>결제</Button>);
+      await user.click(screen.getByRole('button', { name: '결제' }));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useId, useRef, useState } from 'react';
 import { Box, Flex, Grid, HStack, Text, VStack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
@@ -264,6 +264,71 @@ export const AsLink: Story = {
   ),
 };
 
+/**
+ * `focusableWhenDisabled` keeps a disabled button reachable so it can explain
+ * itself. Tab to 결제 with the box unticked, then press it: `onClick` does not
+ * run, `onDisabledClick` moves focus to the box and the hint turns red.
+ *
+ * It is disabled by `aria-disabled="true"` instead of the native attribute, so
+ * it looks the same as the native disabled button next to it, ignores hover
+ * and press, and does not submit a form.
+ */
+export const FocusableWhenDisabled: Story = {
+  render: function Render() {
+    const [agreed, setAgreed] = useState(false);
+    const [nudged, setNudged] = useState(false);
+    const [paid, setPaid] = useState(0);
+    const checkboxRef = useRef<HTMLInputElement>(null);
+    const hintId = useId();
+    return (
+      <VStack align="flex-start" gap={3} p={4} maxW="360px">
+        <label style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <input
+            ref={checkboxRef}
+            type="checkbox"
+            checked={agreed}
+            onChange={(event) => {
+              setAgreed(event.target.checked);
+              setNudged(false);
+            }}
+          />
+          <Text fontSize="sm">이용 및 환불 안내에 동의합니다</Text>
+        </label>
+        {!agreed && (
+          <Text
+            id={hintId}
+            fontSize="sm"
+            color={nudged ? 'danger.fg' : 'fg.muted'}
+          >
+            안내에 동의하면 결제할 수 있습니다.
+          </Text>
+        )}
+        <HStack gap={3}>
+          <Button
+            variant="primary"
+            disabled={!agreed}
+            focusableWhenDisabled
+            aria-describedby={agreed ? undefined : hintId}
+            onDisabledClick={() => {
+              setNudged(true);
+              checkboxRef.current?.focus();
+            }}
+            onClick={() => setPaid((n) => n + 1)}
+          >
+            결제
+          </Button>
+          <Button variant="primary" disabled>
+            native disabled
+          </Button>
+        </HStack>
+        <Text fontSize="sm" color="fg.muted">
+          onClick: {paid}
+        </Text>
+      </VStack>
+    );
+  },
+};
+
 // ───────────────────────── Usage-page specimens ─────────────────────────
 // Pulled into `Button.usage.mdx` with <Canvas of={…} />. Hidden from the
 // sidebar (`!dev`); being stories, they type-check with the rest of the code.

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, MouseEvent } from 'react';
 import { Button as ChakraButton, SystemStyleObject } from '@chakra-ui/react';
 
 import { useTranslate } from '@/hooks/useTranslate';
@@ -38,6 +38,10 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonProps>(
       isDestructive: isDestructiveProp = false,
       size,
       lift,
+      disabled,
+      focusableWhenDisabled = false,
+      onDisabledClick,
+      onClick,
       children,
       _hover: hoverProp,
       _active: activeProp,
@@ -79,6 +83,24 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const base = getButtonStyles(variant, isDestructive);
 
+    // `focusableWhenDisabled`: disabled by ARIA, not by the attribute, so the
+    // button stays focusable and can answer a press. `aria-disabled=true` is
+    // in Chakra's `_disabled` condition, so the disabled colours and cursor
+    // still apply; `data-disabled` is what `_hover` / `_active` exclude, so
+    // without it the button would still react to the pointer. `loading` keeps
+    // the native attribute (Chakra sets it) — see `focusableWhenDisabled`.
+    const softDisabled = !!disabled && focusableWhenDisabled && !rest.loading;
+    const handleClick = softDisabled
+      ? (event: MouseEvent<HTMLButtonElement>) => {
+          // Also what stops a `type="submit"` button from submitting.
+          event.preventDefault();
+          // A native disabled button sends no click to its ancestors either —
+          // a clickable row around it must not run its own action.
+          event.stopPropagation();
+          onDisabledClick?.(event);
+        }
+      : onClick;
+
     // Merged rather than spread after: each variant already owns `_hover` and
     // `_active` for its colours, and replacing either would drop them.
     const styles = lift
@@ -162,7 +184,15 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonProps>(
         data-variant={variant}
         data-destructive={isDestructive || undefined}
         loadingText={loadingText}
+        disabled={softDisabled ? undefined : disabled}
+        onClick={handleClick}
         {...rest}
+        // After `rest`, so a stray `aria-disabled` / `data-disabled` from the
+        // call site or a merging `asChild` parent cannot undo it.
+        {...(softDisabled && {
+          'aria-disabled': true,
+          'data-disabled': '',
+        })}
         // The `action` icon rule lives in `css` (a nested selector cannot be a
         // style prop); merged so a call site's `css` adds to it.
         css={mergeCss(base.css as SystemStyleObject | undefined, cssProp)}

package/src/components/Button/Button.types.ts

@@ -1,4 +1,4 @@
-import type { ElementType } from 'react';
+import type { ElementType, MouseEvent } from 'react';
 import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 
 // Relative, NOT `@/types/polymorphic`. Path aliases survive into the emitted
@@ -107,6 +107,43 @@ export type ButtonOwnProps = Omit<
    * @default false
    */
   lift?: boolean;
+  /**
+   * Keeps a `disabled` button in the Tab order and lets it receive clicks, so
+   * the screen can say *why* it is disabled.
+   *
+   * A natively `disabled` `<button>` cannot be focused and swallows every
+   * click: a keyboard or screen reader user may never find it, and a mouse
+   * user who presses it gets no answer at all. With this prop, `disabled`
+   * renders as `aria-disabled="true"` (plus `data-disabled`) instead of the
+   * native attribute:
+   *
+   * - the disabled colours, the `not-allowed` cursor and the "no hover, no
+   *   press" behaviour are the same as a native disabled button;
+   * - Tab still reaches it and the focus ring shows;
+   * - activating it (click, Enter, Space) does **not** call `onClick`, and its
+   *   default action is cancelled, so a `type="submit"` button does not submit
+   *   its form; the click does not bubble to ancestors; `onDisabledClick` is
+   *   called instead.
+   *
+   * Only activation is blocked: other handlers (`onKeyDown`, `onPointerDown`,
+   * …) still run, as they would on any focusable element. Inside a trigger
+   * (`Menu.Trigger asChild`, `Popover.Trigger asChild`) disable the root as
+   * well. Meant for `<button>`: with `as="a"` the `href` stays, so middle-click
+   * still opens it.
+   *
+   * Has no effect unless `disabled` is set. `loading` keeps the native
+   * `disabled` — a busy button is working, not refusing.
+   *
+   * @default false
+   */
+  focusableWhenDisabled?: boolean;
+  /**
+   * Called when a `disabled` + `focusableWhenDisabled` button is activated
+   * (click, Enter, Space) — where `onClick` would have been. Use it to explain
+   * the reason or move focus to what is missing (an unticked consent box).
+   * Never called on a natively disabled button, and never while `loading`.
+   */
+  onDisabledClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
 /**

package/src/components/Button/Button.usage.mdx

@@ -69,7 +69,7 @@ A control that does something on this screen: save, cancel, run, delete. One
 
 </Ko>
 
-<ArgTypes of={ButtonStories} include={['variant', 'isDestructive', 'lift']} />
+<ArgTypes of={ButtonStories} include={['variant', 'isDestructive', 'lift', 'focusableWhenDisabled', 'onDisabledClick']} />
 
 <En>
 
@@ -203,6 +203,13 @@ other actions, and keep the red fill for the final confirmation.
   ko="loadingText 없이 loading만 주지 마세요. 라벨이 스피너 뒤로 숨어 눈에 보이는 글자가 없어지고, 화면 낭독기에도 이름이 전달되지 않을 수 있습니다."
 />
 
+<Canvas of={ButtonStories.FocusableWhenDisabled} />
+<Verdict
+  kind="do"
+  en="When the reason a button is disabled can be out of view, add focusableWhenDisabled and answer onDisabledClick by moving focus to what is missing. Without it the button cannot be reached by Tab and a press does nothing."
+  ko="버튼이 비활성인 이유가 화면 밖에 있을 수 있다면 focusableWhenDisabled를 붙이고, onDisabledClick에서 빠진 항목으로 초점을 옮깁니다. 붙이지 않으면 Tab으로 닿지 않고, 눌러도 아무 반응이 없습니다."
+/>
+
 <En>
 
 ## Content
@@ -244,7 +251,11 @@ What you still have to do:
   the spinner.
 - **Say why it is disabled.** A disabled `<button>` cannot be focused, so a
   keyboard or screen reader user may never find it. Put the reason in text
-  near it, or keep the button enabled and explain on click.
+  near it. When the reason is out of view (a consent box at the bottom of a
+  long form), add `focusableWhenDisabled`: the button stays in the Tab order
+  as `aria-disabled="true"`, looks and refuses the same, and calls
+  `onDisabledClick` instead of `onClick` when pressed — use it to move focus
+  to what is missing. Point `aria-describedby` at the reason text.
 - **Only phrasing content inside** (ACCESSIBILITY.md §5). No `<div>` or `<p>`
   inside a Button; wrap with `as="span"` and set `display`.
 - **No button inside another control.** Don't put a Button inside a clickable
@@ -300,7 +311,10 @@ Button이 알아서 하는 일
 - **`loading`에는 `loadingText`를 함께 줍니다.** 없으면 라벨이 스피너 뒤로 숨습니다.
 - **왜 비활성인지 알립니다.** 비활성 `<button>`은 초점을 받지 못해 키보드나 화면
   낭독기 사용자는 버튼이 있다는 것조차 모를 수 있습니다. 가까운 곳에 이유를 글로
-  적거나, 버튼을 활성으로 두고 눌렀을 때 설명합니다.
+  적습니다. 이유가 화면 밖에 있다면(긴 폼 맨 아래의 동의 체크박스) `focusableWhenDisabled`를
+  붙입니다. 버튼이 `aria-disabled="true"`로 Tab 순서에 남고, 모양과 막히는 동작은
+  같으며, 누르면 `onClick` 대신 `onDisabledClick`을 부릅니다. 여기서 빠진 항목으로
+  초점을 옮기고, `aria-describedby`로 이유 문구를 가리킵니다.
 - **안에는 구문 콘텐츠만 넣습니다**(ACCESSIBILITY.md 5절). Button 안에 `<div>`나
   `<p>`를 넣지 않습니다. 감싸야 한다면 `as="span"`에 `display`를 지정합니다.
 - **컨트롤 안에 버튼을 넣지 않습니다.** 누를 수 있는 카드나 `role="button"` 래퍼 안에