feat(button): add disabled behavior with aria-disabled only

Author: hchevallier

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+-   `Button`: add disabled behavior with `aria-disabled` only
+
 ## [3.14.0][] - 2025-05-13
 
 ### Fixed

packages/lumx-core/src/scss/components/button/_mixins.scss

@@ -132,7 +132,7 @@
         }
     }
 
-    &:hover,
+    &:hover:not([aria-disabled="true"]),
     &[class*="--is-hovered"] {
         @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") {
             color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-color);
@@ -158,7 +158,7 @@
         }
     }
 
-    &:active,
+    &:active:not([aria-disabled="true"]),
     &[class*="--is-active"] {
         @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") {
             color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-color);
@@ -192,6 +192,9 @@
     &:disabled,
     &[aria-disabled="true"] {
         @include lumx-state-disabled-input;
+        // Enabling pointer-events to display label tooltips on hover
+        // @TODO: should be moved in the mixin when all disabled states will be aligned
+        pointer-events: all;
     }
 }
 

packages/lumx-core/src/scss/core/state/_mixins.scss

@@ -133,6 +133,7 @@
 @mixin lumx-state-disabled-input() {
     pointer-events: none;
     opacity: 0.5;
+    cursor: default;
 }
 
 @mixin lumx-state($state, $emphasis, $color, $theme: null) {

packages/lumx-react/src/components/button/Button.stories.tsx

@@ -178,6 +178,7 @@ export const StateVariations = {
                     Active: { isActive: true },
                     Focused: { isFocused: true },
                     Disabled: { isDisabled: true },
+                    AriaDisabled: { 'aria-disabled': true },
                 },
                 // Emphasis/Background
                 sections: {
@@ -212,6 +213,7 @@ export const Theming = {
                     Active: { isActive: true },
                     Focused: { isFocused: true },
                     Disabled: { isDisabled: true },
+                    AriaDisabled: { 'aria-disabled': true },
                 },
                 rows: {
                     Default: {},

packages/lumx-react/src/components/button/Button.test.tsx

@@ -63,6 +63,12 @@ describe(`<${Button.displayName}>`, () => {
             expect(buttonWrapper).toBeInTheDocument();
             expect(button).toBe(within(buttonWrapper as any).queryByRole('button', { name: label }));
         });
+
+        it('should prevent click when aria-disabled', () => {
+            const onClick = jest.fn();
+            const { button } = setup({ children: 'Label', 'aria-disabled': true, onClick });
+            expect(button.onclick).toBeFalsy();
+        });
     });
 
     // Common tests suite.

packages/lumx-react/src/components/button/ButtonRoot.tsx

@@ -20,7 +20,7 @@ export type ButtonSize = Extract<Size, 's' | 'm'>;
 
 export interface BaseButtonProps
     extends GenericProps,
-        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>,
+        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label' | 'aria-disabled'>,
         HasTheme {
     /** Color variant. */
     color?: ColorPalette;
@@ -106,6 +106,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         hasBackground,
         href,
         isDisabled = disabled,
+        'aria-disabled': ariaDisabled = isDisabled,
         isSelected,
         isActive,
         isFocused,
@@ -172,8 +173,9 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
     return (
         <button
             {...forwardedProps}
+            {...(ariaDisabled ? { onClick: undefined } : undefined)}
             disabled={isDisabled}
-            aria-disabled={isDisabled}
+            aria-disabled={ariaDisabled}
             aria-label={ariaLabel}
             ref={ref as RefObject<HTMLButtonElement>}
             className={buttonClassName}