@lumx/react 3.18.1 → 3.18.2-alpha.1

package/src/components/link/Link.test.tsx

@@ -4,6 +4,7 @@ import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { mdiCheck, mdiPlus } from '@lumx/icons';
 import { Link, LinkProps } from './Link';
 
@@ -55,12 +56,6 @@ describe(`<${Link.displayName}>`, () => {
             expect(link).toBe(screen.queryByRole('button', { name }));
         });
 
-        it('should render disabled link as button', () => {
-            const name = 'Link';
-            const { link } = setup({ href: 'https://google.com', isDisabled: true, children: name });
-            expect(link).toBe(screen.queryByRole('button', { name }));
-        });
-
         it('should render with icons', () => {
             const { link } = setup({
                 leftIcon: mdiCheck,
@@ -78,6 +73,50 @@ describe(`<${Link.displayName}>`, () => {
         });
     });
 
+    describe('Disabled state', () => {
+        it('should render disabled button', async () => {
+            const onClick = jest.fn();
+            const { link } = setup({ children: 'Label', isDisabled: true, onClick });
+            expect(link).toHaveAttribute('disabled');
+            await userEvent.click(link);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should render disabled link', async () => {
+            const onClick = jest.fn();
+            const { link } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(link).toHaveAttribute('disabled');
+            await userEvent.click(link);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should render aria-disabled button', async () => {
+            const onClick = jest.fn();
+            const { link } = setup({ children: 'Label', 'aria-disabled': true, onClick });
+            expect(link).toHaveAttribute('aria-disabled');
+            await userEvent.click(link);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should render aria-disabled link', async () => {
+            const onClick = jest.fn();
+            const { link } = setup({
+                children: 'Label',
+                'aria-disabled': true,
+                href: 'https://example.com',
+                onClick,
+            });
+            expect(link).toHaveAccessibleName('Label');
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(link).toHaveAttribute('aria-disabled', 'true');
+            await userEvent.click(link);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

package/src/components/link/Link.tsx

@@ -12,13 +12,15 @@ import {
 } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.
  */
-export interface LinkProps extends GenericProps {
+export interface LinkProps extends GenericProps, HasAriaDisabled {
     /** Color variant. */
     color?: ColorWithVariants;
     /** Lightened or darkened variant of the selected icon color. */
@@ -65,13 +67,12 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         children,
         className,
         color: propColor,
         colorVariant: propColorVariant,
-        disabled,
-        isDisabled = disabled,
         href,
         leftIcon,
         linkAs,
@@ -79,15 +80,15 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
         target,
         typography,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
     const isLink = linkAs || href;
-    const Component = isLink && !isDisabled ? linkAs || 'a' : 'button';
+    const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
     const baseProps: React.ComponentProps<typeof Component> = {};
     if (Component === 'button') {
         baseProps.type = 'button';
-        baseProps.disabled = isDisabled;
+        Object.assign(baseProps, disabledStateProps);
     } else if (isLink) {
         baseProps.href = href;
         baseProps.target = target;

package/src/components/list/ListItem.stories.tsx

@@ -4,6 +4,7 @@ import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { isEqual } from '@lumx/react/utils/object/isEqual';
 import { ListItem } from './ListItem';
 
 const sizes: ListItemSize[] = [Size.tiny, Size.regular, Size.big];
@@ -21,53 +22,10 @@ export default {
 /**
  * Default list item with text
  */
-export const NonClickable = {
+export const Default = {
     args: { children: 'List item' },
 };
 
-/**
- * Button list item (onClick)
- */
-export const Button = {
-    args: {
-        children: 'List item button',
-    },
-    argTypes: {
-        onItemSelected: { action: true },
-    },
-};
-
-/**
- * Disabled button
- */
-export const ButtonDisabled = {
-    ...Button,
-    args: {
-        ...Button.args,
-        isDisabled: true,
-    },
-};
-
-/**
- * Link list item (href)
- */
-export const Link = {
-    args: {
-        linkProps: { href: '#' },
-        children: 'List item link',
-    },
-};
-
-/**
- * Disabled link
- */
-export const LinkDisabled = {
-    args: {
-        ...Link.args,
-        isDisabled: true,
-    },
-};
-
 /**
  * Inject a custom link component
  */
@@ -79,22 +37,30 @@ export const CustomLink_ = {
 };
 
 /**
- * Combination of size and states
+ * Combination of all states (size, clickable and non-clickable states)
  */
-export const SizeAndStates = {
-    ...Button,
+export const AllStates = {
+    args: { children: 'List item' },
     decorators: [
-        withWrapper({}, List),
         withCombinations({
             combinations: {
                 rows: { key: 'size', options: sizes },
                 cols: {
                     Default: {},
                     Disabled: { isDisabled: true },
+                    'ARIA Disabled': { 'aria-disabled': true },
                     Selected: { isSelected: true },
                     Highlighted: { isHighlighted: true },
                 },
+                sections: {
+                    Default: {},
+                    'As button': { onItemSelected: () => {} },
+                    'As link': { linkProps: { href: '#' } },
+                },
             },
+            // Only keep size variants for non clickable list items
+            excludeCombination: (props) =>
+                !props.onItemSelected && !props.linkProps?.href && !isEqual(Object.keys(props), ['size', 'children']),
         }),
     ],
 };

package/src/components/list/ListItem.test.tsx

@@ -1,20 +1,91 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { render, screen } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import userEvent from '@testing-library/user-event';
 
-import { render } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { ListItem, ListItemProps } from './ListItem';
 
 const CLASSNAME = ListItem.className as string;
 
-const setup = (props: Partial<ListItemProps> = {}) => {
-    render(<ListItem {...(props as any)} />);
-    const listItem = queryByClassName(document.body, CLASSNAME);
-    return { props, listItem };
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<ListItemProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<ListItem {...(props as any)} />, { wrapper });
+    const listItem = getByClassName(document.body, CLASSNAME);
+    const link = queryByClassName(listItem, `${CLASSNAME}__link`);
+    return { props, listItem, link };
 };
 
 describe(`<${ListItem.displayName}>`, () => {
+    describe('Props', () => {
+        it('should render default', () => {
+            const { listItem, link } = setup({ children: 'Label' });
+            expect(listItem).toBeInTheDocument();
+            expect(link).not.toBeInTheDocument();
+            expect(listItem).toHaveTextContent('Label');
+        });
+
+        it('should render as a button', () => {
+            setup({ children: 'Label', onItemSelected: jest.fn() });
+            expect(screen.getByRole('button', { name: 'Label' })).toBeInTheDocument();
+        });
+
+        it('should render as a link', () => {
+            setup({ children: 'Label', linkProps: { href: '#' } });
+            expect(screen.getByRole('link', { name: 'Label' })).toBeInTheDocument();
+        });
+    });
+
+    describe('Disabled state', () => {
+        it('should render disabled list item button', async () => {
+            const onItemSelected = jest.fn();
+            const { link } = setup({ children: 'Label', isDisabled: true, onItemSelected });
+            expect(link).toHaveAttribute('aria-disabled', 'true');
+            // The `renderLink` util removes the onClick handler but `user-event` will also not fire events on disabled elements.
+            if (link) await userEvent.click(link);
+            expect(onItemSelected).not.toHaveBeenCalled();
+        });
+
+        it('should render disabled list item link', async () => {
+            const onItemSelected = jest.fn();
+            const { link } = setup({
+                children: 'Label',
+                isDisabled: true,
+                linkProps: { href: 'https://example.com' },
+                onItemSelected,
+            });
+            expect(link).not.toHaveAttribute('href');
+            expect(link).toHaveAttribute('aria-disabled', 'true');
+            if (link) await userEvent.click(link);
+            expect(onItemSelected).not.toHaveBeenCalled();
+        });
+
+        it('should render aria-disabled list item button', async () => {
+            const onItemSelected = jest.fn();
+            const { link } = setup({ children: 'Label', 'aria-disabled': true, onItemSelected });
+            expect(link).toHaveAttribute('aria-disabled', 'true');
+            if (link) await userEvent.click(link);
+            expect(onItemSelected).not.toHaveBeenCalled();
+        });
+
+        it('should render aria-disabled list item link', async () => {
+            const onItemSelected = jest.fn();
+            const { link } = setup({
+                children: 'Label',
+                'aria-disabled': true,
+                linkProps: { href: 'https://example.com' },
+                onItemSelected,
+            });
+            expect(link).not.toHaveAttribute('href');
+            expect(link).toHaveAttribute('aria-disabled', 'true');
+            if (link) await userEvent.click(link);
+            expect(onItemSelected).not.toHaveBeenCalled();
+        });
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

package/src/components/list/ListItem.tsx

@@ -9,13 +9,15 @@ import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/browser/event
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/react/renderLink';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 
 /**
  * Defines the props of the component.
  */
-export interface ListItemProps extends GenericProps {
+export interface ListItemProps extends GenericProps, HasAriaDisabled {
     /** A component to be rendered after the content. */
     after?: ReactNode;
     /** A component to be rendered before the content. */
@@ -76,6 +78,7 @@ export function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps
  * @return React element.
  */
 export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         after,
         before,
@@ -83,14 +86,13 @@ export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) =>
         className,
         isHighlighted,
         isSelected,
-        isDisabled,
         linkAs,
         linkProps = {},
         linkRef,
         onItemSelected,
         size = DEFAULT_PROPS.size,
         ...forwardedProps
-    } = props;
+    } = otherProps;
 
     const role = linkAs || linkProps.href ? 'link' : 'button';
     const onKeyDown = useMemo(() => {
@@ -124,21 +126,21 @@ export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) =>
                 renderLink(
                     {
                         linkAs,
-                        tabIndex: !isDisabled && role === 'button' ? 0 : undefined,
+                        tabIndex: !disabledStateProps.disabled ? 0 : undefined,
                         role,
-                        'aria-disabled': isDisabled,
+                        'aria-disabled': isAnyDisabled,
                         ...linkProps,
-                        href: isDisabled ? undefined : linkProps.href,
+                        href: isAnyDisabled ? undefined : linkProps.href,
                         className: classNames(
                             handleBasicClasses({
                                 prefix: `${CLASSNAME}__link`,
                                 isHighlighted,
                                 isSelected,
-                                isDisabled,
+                                isDisabled: isAnyDisabled,
                             }),
                         ),
-                        onClick: isDisabled ? undefined : onItemSelected,
-                        onKeyDown,
+                        onClick: isAnyDisabled ? undefined : onItemSelected,
+                        onKeyDown: isAnyDisabled ? undefined : onKeyDown,
                         ref: linkRef,
                     },
                     content,

package/src/components/progress-tracker/ProgressTrackerStep.tsx

@@ -8,6 +8,7 @@ import { GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 import { useTabProviderContext } from '../tabs/state';
 
 /**
@@ -57,30 +58,29 @@ const DEFAULT_PROPS: Partial<ProgressTrackerStepProps> = {};
  * @return React element.
  */
 export const ProgressTrackerStep = forwardRef<ProgressTrackerStepProps, HTMLButtonElement>((props, ref) => {
+    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
     const {
         className,
-        disabled,
         hasError,
         helper,
         id,
         isActive: propIsActive,
         isComplete,
-        isDisabled = disabled,
         label,
         onFocus,
         onKeyPress,
         tabIndex = -1,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const state = useTabProviderContext('tab', id);
     const isActive = propIsActive || state?.isActive;
 
     const changeToCurrentTab = useCallback(() => {
-        if (isDisabled) {
+        if (isAnyDisabled) {
             return;
         }
         state?.changeToTab();
-    }, [isDisabled, state]);
+    }, [isAnyDisabled, state]);
 
     const handleFocus: FocusEventHandler = useCallback(
         (event) => {
@@ -127,7 +127,7 @@ export const ProgressTrackerStep = forwardRef<ProgressTrackerStepProps, HTMLButt
                     prefix: CLASSNAME,
                     hasError,
                     isActive,
-                    isClickable: state && !isDisabled,
+                    isClickable: state && !isAnyDisabled,
                     isComplete,
                 }),
             )}
@@ -136,7 +136,7 @@ export const ProgressTrackerStep = forwardRef<ProgressTrackerStepProps, HTMLButt
             onFocus={handleFocus}
             role="tab"
             tabIndex={isActive ? 0 : tabIndex}
-            aria-disabled={isDisabled}
+            aria-disabled={isAnyDisabled}
             aria-selected={isActive}
             aria-controls={state?.tabPanelId}
         >

package/src/components/radio-button/RadioButton.stories.tsx

@@ -1,6 +1,8 @@
 import { RadioButton } from '@lumx/react';
 import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import uniqueId from 'lodash/uniqueId';
 
 export default {
     title: 'LumX components/radio-button/Radio button',
@@ -37,3 +39,33 @@ export const LabelAndHelper = {
         helper: loremIpsum('tiny'),
     },
 };
+
+/**
+ * All state combinations
+ */
+export const AllStates = {
+    args: { ...LabelAndHelper.args, helper: 'Radio button helper' },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: {
+                    Default: {},
+                    Checked: { isChecked: true },
+                },
+                cols: {
+                    Default: {},
+                    Disabled: { isDisabled: true },
+                    'ARIA Disabled': { 'aria-disabled': true },
+                },
+            },
+            combinator(a, b) {
+                return Object.assign(a, b, {
+                    // Injecting a unique name for each radio buttons to make sure they can be individually focused
+                    name: uniqueId('name'),
+                    // Disabling
+                    onChange: undefined,
+                });
+            },
+        }),
+    ],
+};

package/src/components/radio-button/RadioButton.test.tsx

@@ -100,6 +100,36 @@ describe(`<${RadioButton.displayName}>`, () => {
         });
     });
 
+    describe('Disabled state', () => {
+        it('should be disabled with isDisabled', async () => {
+            const onChange = jest.fn();
+            const { radioButton, input } = setup({ isDisabled: true, onChange });
+
+            expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
+            expect(input).toBeDisabled();
+            expect(input).toHaveAttribute('readOnly');
+
+            // Should not trigger onChange.
+            await userEvent.click(input);
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('should be disabled with aria-disabled', async () => {
+            const onChange = jest.fn();
+            const { radioButton, input } = setup({ 'aria-disabled': true, onChange });
+
+            expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
+            // Note: input is not disabled (so it can be focused) but it's readOnly.
+            expect(input).not.toBeDisabled();
+            expect(input).toHaveAttribute('aria-disabled', 'true');
+            expect(input).toHaveAttribute('readOnly');
+
+            // Should not trigger onChange.
+            await userEvent.click(input);
+            expect(onChange).not.toHaveBeenCalled();
+        });
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

package/src/components/radio-button/RadioButton.tsx

@@ -8,11 +8,13 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
 
 /**
  * Defines the props of the component.
  */
-export interface RadioButtonProps extends GenericProps, HasTheme {
+export interface RadioButtonProps extends GenericProps, HasTheme, HasAriaDisabled {
     /** Helper text. */
     helper?: string;
     /** Native input id property. */
@@ -58,16 +60,15 @@ const DEFAULT_PROPS: Partial<RadioButtonProps> = {};
  * @return React element.
  */
 export const RadioButton = forwardRef<RadioButtonProps, HTMLDivElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         checked,
         className,
-        disabled,
         helper,
         id,
         inputRef,
         isChecked = checked,
-        isDisabled = disabled,
         label,
         name,
         onChange,
@@ -75,7 +76,7 @@ export const RadioButton = forwardRef<RadioButtonProps, HTMLDivElement>((props,
         value,
         inputProps,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const generatedInputId = useId();
     const inputId = id || generatedInputId;
 
@@ -93,7 +94,7 @@ export const RadioButton = forwardRef<RadioButtonProps, HTMLDivElement>((props,
                 className,
                 handleBasicClasses({
                     isChecked,
-                    isDisabled,
+                    isDisabled: isAnyDisabled,
                     isUnchecked: !isChecked,
                     prefix: CLASSNAME,
                     theme,
@@ -104,14 +105,14 @@ export const RadioButton = forwardRef<RadioButtonProps, HTMLDivElement>((props,
                 <input
                     ref={inputRef}
                     className={`${CLASSNAME}__input-native`}
-                    disabled={isDisabled}
+                    {...disabledStateProps}
                     id={inputId}
-                    tabIndex={isDisabled ? -1 : 0}
                     type="radio"
                     name={name}
                     value={value}
                     checked={isChecked}
                     onChange={handleChange}
+                    readOnly={inputProps?.readOnly || isAnyDisabled}
                     aria-describedby={helper ? `${inputId}-helper` : undefined}
                     {...inputProps}
                 />

package/src/components/slider/Slider.tsx

@@ -11,6 +11,7 @@ import { clamp } from '@lumx/react/utils/number/clamp';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 
 /**
  * Defines the props of the component.
@@ -91,14 +92,13 @@ const computePercentFromValue = (value: number, min: number, max: number): numbe
  * @return React element.
  */
 export const Slider = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         className,
-        disabled,
         helper,
         hideMinMaxLabel,
         id,
-        isDisabled = disabled,
         label,
         max,
         min,
@@ -110,7 +110,7 @@ export const Slider = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {
         theme = defaultTheme,
         value,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const generatedId = useId();
     const sliderId = id || generatedId;
     const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
@@ -222,7 +222,7 @@ export const Slider = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {
         onMouseDown?.(event);
 
         const { current: slider } = sliderRef;
-        if (isDisabled || !slider) return;
+        if (isAnyDisabled || !slider) return;
         const newValue = getPercentValue(event, slider);
         if (onChange) {
             onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
@@ -242,7 +242,6 @@ export const Slider = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {
                 handleBasicClasses({ prefix: CLASSNAME, theme, hasLabel: Boolean(label) }),
             )}
             onMouseDown={handleMouseDown}
-            aria-disabled={isDisabled}
         >
             {label && (
                 <InputLabel id={sliderLabelId} htmlFor={sliderId} className={`${CLASSNAME}__label`} theme={theme}>
@@ -284,8 +283,8 @@ export const Slider = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {
                         id={sliderId}
                         className={`${CLASSNAME}__handle`}
                         style={{ left: percentString }}
-                        onKeyDown={handleKeyDown}
-                        disabled={isDisabled}
+                        onKeyDown={isAnyDisabled ? undefined : handleKeyDown}
+                        {...disabledStateProps}
                     />
                 </div>
                 {!hideMinMaxLabel && (