@lumx/react 3.19.1-alpha.0 → 3.19.1-alpha.10

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.19.1-alpha.0",
-        "@lumx/icons": "^3.19.1-alpha.0",
+        "@lumx/core": "^3.19.1-alpha.10",
+        "@lumx/icons": "^3.19.1-alpha.10",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -30,6 +30,7 @@
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-commonjs": "^19.0.2",
         "@rollup/plugin-node-resolve": "16.0.0",
+        "@rollup/pluginutils": "5.2.0",
         "@storybook/addon-a11y": "^9.1.4",
         "@storybook/addon-docs": "^9.1.4",
         "@storybook/react-vite": "^9.1.4",
@@ -74,8 +75,8 @@
     },
     "peerDependencies": {
         "lodash": "4.17.21",
-        "react": ">= 16.13.0",
-        "react-dom": ">= 16.13.0"
+        "react": ">= 17.0.0",
+        "react-dom": ">= 17.0.0"
     },
     "description": "The official LumApps Design System (LumX) for React applications",
     "homepage": "https://github.com/lumapps/design-system",
@@ -105,5 +106,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.19.1-alpha.0"
+    "version": "3.19.1-alpha.10"
 }

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

@@ -78,10 +78,9 @@ describe(`<${Button.displayName}>`, () => {
         it('should render disabled link', async () => {
             const onClick = jest.fn();
             const { button } = setup({ children: 'Label', disabled: true, href: 'https://example.com', onClick });
-            expect(screen.queryByRole('link')).toBeInTheDocument();
-            expect(button).toHaveAttribute('aria-disabled', 'true');
-            // Simulate standard disabled state (not focusable)
-            expect(button).toHaveAttribute('tabindex', '-1');
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(button).toHaveAttribute('disabled');
             await userEvent.click(button);
             expect(onClick).not.toHaveBeenCalled();
         });
@@ -103,7 +102,8 @@ describe(`<${Button.displayName}>`, () => {
                 onClick,
             });
             expect(button).toHaveAccessibleName('Label');
-            expect(screen.queryByRole('link')).toBeInTheDocument();
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
             expect(button).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(button);
             expect(onClick).not.toHaveBeenCalled();

package/src/components/button/ButtonRoot.tsx

@@ -1,15 +1,17 @@
 import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
 
+import isEmpty from 'lodash/isEmpty';
+
 import classNames from 'classnames';
 
 import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/core/js/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';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
-import { useDisableStateProps } from '@lumx/react/utils/disabled';
 
 type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 
@@ -105,14 +107,18 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         color,
         emphasis,
         hasBackground,
+        href,
         isSelected,
         isActive,
         isFocused,
         isHovered,
         linkAs,
+        name,
         size,
+        target,
         theme,
         variant,
+        type = 'button',
         fullWidth,
         ...forwardedProps
     } = otherProps;
@@ -133,7 +139,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
             color: adaptedColor,
             emphasis,
             isSelected,
-            isDisabled: props.isDisabled || props['aria-disabled'],
+            isDisabled: isAnyDisabled,
             isActive,
             isFocused,
             isHovered,
@@ -145,18 +151,42 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         }),
     );
 
+    /**
+     * If the linkAs prop is used, we use the linkAs component instead of a <button>.
+     * If there is an href attribute, we display an <a> instead of a <button>.
+     *
+     * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.
+     */
+    if ((linkAs || !isEmpty(props.href)) && !isAnyDisabled) {
+        return renderLink(
+            {
+                linkAs,
+                ...forwardedProps,
+                'aria-label': ariaLabel,
+                href,
+                target,
+                className: buttonClassName,
+                ref: ref as RefObject<HTMLAnchorElement>,
+            },
+            children,
+        );
+    }
     return (
-        <RawClickable
-            as={linkAs || forwardedProps.href ? 'a' : 'button'}
+        <button
             {...forwardedProps}
             {...disabledStateProps}
             aria-disabled={isAnyDisabled}
             aria-label={ariaLabel}
             ref={ref as RefObject<HTMLButtonElement>}
             className={buttonClassName}
+            name={name}
+            type={
+                // eslint-disable-next-line react/button-has-type
+                type
+            }
         >
             {children}
-        </RawClickable>
+        </button>
     );
 });
 ButtonRoot.displayName = COMPONENT_NAME;

package/src/components/icon/Icon.stories.tsx

@@ -1,47 +1,21 @@
+import DefaultStory, { SizeAndShape as DefaultSizeAndShape } from '@lumx/core/js/components/Icon/Stories';
 import { mdiEmail } from '@lumx/icons';
-import { ColorPalette, ColorVariant, GridColumn, Icon, IconSizes, Size } from '@lumx/react';
+import { ColorPalette, ColorVariant, GridColumn, Icon, Size } from '@lumx/react';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
 import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
-const iconSizes: Array<IconSizes> = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
-
 export default {
     title: 'LumX components/icon/Icon',
     component: Icon,
-    args: Icon.defaultProps,
-    argTypes: {
-        icon: iconArgType,
-        hasShape: { control: 'boolean' },
-        color: colorArgType,
-        colorVariant: colorVariantArgType,
-    },
+    ...DefaultStory,
 };
 
 /**
  * All combinations of size and shape
  */
 export const SizeAndShape = {
-    args: {
-        icon: mdiEmail,
-    },
-    argTypes: {
-        hasShape: { control: false },
-        size: { control: false },
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                cols: { key: 'size', options: withUndefined(iconSizes) },
-                rows: {
-                    Default: {},
-                    'Has shape': { hasShape: true },
-                },
-            },
-        }),
-    ],
+    ...DefaultSizeAndShape,
 };
 
 /**

package/src/components/icon/Icon.test.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
+import Tests from '@lumx/core/js/components/Icon/Tests';
 import { Icon, IconProps } from './Icon';
 
 const CLASSNAME = Icon.className as string;
@@ -29,89 +28,7 @@ const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions =
 };
 
 describe(`<${Icon.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { i, svg, path, props } = setup();
-
-            expect(i).toBeInTheDocument();
-            expect(i).toHaveClass(CLASSNAME);
-            expect(i?.className).toMatchInlineSnapshot('"lumx-icon lumx-icon--no-shape lumx-icon--path"');
-
-            expect(svg).toBeInTheDocument();
-            expect(svg).toHaveAttribute('aria-hidden', 'true');
-            expect(svg).not.toHaveAttribute('role');
-
-            expect(path).toBeInTheDocument();
-            expect(path).toHaveAttribute('d', props.icon);
-        });
-
-        it('should adapt svg with alternate text', () => {
-            const { svg, props } = setup({ alt: 'Alternate text' });
-            expect(svg).toHaveAttribute('aria-label', props.alt);
-            expect(svg).not.toHaveAttribute('aria-hidden');
-            expect(svg).toHaveAttribute('role');
-        });
-
-        describe('size', () => {
-            it('should render size', () => {
-                const { i } = setup({ size: Size.s });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xxs size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xxs });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xs size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xs });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xxl size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xxl });
-                expect(i).toHaveClass('lumx-icon--size-xl');
-            });
-
-            it('should add default size with hasShape', () => {
-                const { i } = setup({ hasShape: true });
-                expect(i).toHaveClass('lumx-icon--size-m');
-            });
-        });
-
-        describe('color', () => {
-            it('should render color and color variant', () => {
-                const { i } = setup({
-                    color: ColorPalette.primary,
-                    colorVariant: ColorVariant.D1,
-                });
-                expect(i).toHaveClass('lumx-icon--color-primary lumx-icon--color-variant-D1');
-            });
-
-            it('should improve yellow icon color contrast with alert circle icon', () => {
-                const { i } = setup({
-                    color: ColorPalette.yellow,
-                    icon: mdiAlertCircle,
-                });
-                expect(i).toHaveClass('lumx-icon--color-yellow lumx-icon--has-dark-layer');
-            });
-
-            it('should set a default color on dark theme', () => {
-                const { i } = setup({ theme: Theme.dark });
-                expect(i).toHaveClass('lumx-icon--color-light lumx-icon--theme-dark');
-            });
-
-            it('should set a default color on has shape', () => {
-                const { i } = setup({ hasShape: true });
-                expect(i).toHaveClass('lumx-icon--color-dark lumx-icon--has-shape');
-            });
-
-            it('should set a default color variant on has shape & dark color', () => {
-                const { i } = setup({ color: ColorPalette.dark, hasShape: true });
-                expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
-            });
-        });
-    });
+    Tests((props: IconProps, { wrapper }: any) => render(<Icon {...props} />, { wrapper }));
 
     // Common tests suite.
     commonTestsSuiteRTL(setup, {

package/src/components/icon/Icon.tsx

@@ -1,52 +1,11 @@
 import React from 'react';
 
-import classNames from 'classnames';
+import { Icon as UI, IconProps, IconSizes } from '@lumx/core/js/components/Icon';
 
-import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
-export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-
-/**
- * Defines the props of the component.
- */
-export interface IconProps extends GenericProps, HasTheme {
-    /** Color variant. */
-    color?: ColorWithVariants;
-    /** Lightened or darkened variant of the selected icon color. */
-    colorVariant?: ColorVariant;
-    /** Whether the icon has a shape. */
-    hasShape?: boolean;
-    /**
-     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
-     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
-     */
-    icon: string;
-    /** Size variant. */
-    size?: IconSizes;
-    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
-    alt?: string;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Icon';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<IconProps> = {};
-
+export type { IconProps, IconSizes };
 /**
  * Icon component.
  *
@@ -56,80 +15,10 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  */
 export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
     const defaultTheme = useTheme();
-    const {
-        className,
-        color: propColor,
-        colorVariant: propColorVariant,
-        hasShape,
-        icon,
-        size,
-        theme = defaultTheme,
-        alt,
-        ...forwardedProps
-    } = props;
-    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
-    // Color
-    let iconColor = color;
-    if (!iconColor && (hasShape || theme)) {
-        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-    }
-
-    // Color variant
-    let iconColorVariant = colorVariant;
-    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
-        iconColorVariant = 'L2';
-    }
-
-    // Size
-    let iconSize = size;
-    if (size && hasShape) {
-        if (size === Size.xxs || size === Size.xs) {
-            iconSize = Size.s;
-        } else if (size === Size.xxl) {
-            iconSize = Size.xl;
-        }
-    } else if (hasShape) {
-        iconSize = Size.m;
-    }
-
-    return (
-        <i
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    color: iconColor,
-                    colorVariant: iconColorVariant,
-                    hasShape,
-                    prefix: CLASSNAME,
-                    theme,
-                    size: iconSize,
-                }),
-                !hasShape && `${CLASSNAME}--no-shape`,
-                !hasShape &&
-                    iconColor === ColorPalette.yellow &&
-                    icon === mdiAlertCircle &&
-                    `${CLASSNAME}--has-dark-layer`,
-                `${CLASSNAME}--path`,
-            )}
-        >
-            <svg
-                aria-hidden={alt ? undefined : 'true'}
-                role={alt ? 'img' : undefined}
-                aria-label={alt}
-                height="1em"
-                preserveAspectRatio="xMidYMid meet"
-                style={{ verticalAlign: '-0.125em' }}
-                viewBox="0 0 24 24"
-                width="1em"
-            >
-                <path d={icon} fill="currentColor" />
-            </svg>
-        </i>
-    );
+    return <UI ref={ref} {...props} theme={props.theme || defaultTheme} />;
 });
-Icon.displayName = COMPONENT_NAME;
-Icon.className = CLASSNAME;
-Icon.defaultProps = DEFAULT_PROPS;
+
+Icon.displayName = UI.displayName;
+Icon.className = UI.className;
+Icon.defaultProps = UI.defaultProps;

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

@@ -85,10 +85,9 @@ describe(`<${Link.displayName}>`, () => {
         it('should render disabled link', async () => {
             const onClick = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
-            expect(screen.queryByRole('link')).toBeInTheDocument();
-            expect(link).toHaveAttribute('aria-disabled');
-            // Simulate standard disabled state (not focusable)
-            expect(link).toHaveAttribute('tabindex', '-1');
+            // 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();
         });
@@ -96,9 +95,7 @@ describe(`<${Link.displayName}>`, () => {
         it('should render aria-disabled button', async () => {
             const onClick = jest.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(screen.queryByRole('button')).toBeInTheDocument();
-            expect(link).toHaveAttribute('aria-disabled', 'true');
-            expect(link).not.toHaveAttribute('tabindex');
+            expect(link).toHaveAttribute('aria-disabled');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
@@ -112,7 +109,8 @@ describe(`<${Link.displayName}>`, () => {
                 onClick,
             });
             expect(link).toHaveAccessibleName('Label');
-            expect(screen.queryByRole('link')).toBeInTheDocument();
+            // 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();

package/src/components/link/Link.tsx

@@ -12,9 +12,8 @@ import {
 } from '@lumx/core/js/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';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
-import { useDisableStateProps } from '@lumx/react/utils/disabled';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
@@ -68,26 +67,38 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
-    const { disabledStateProps, otherProps } = useDisableStateProps(props);
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         children,
         className,
         color: propColor,
         colorVariant: propColorVariant,
+        href,
         leftIcon,
+        linkAs,
         rightIcon,
+        target,
         typography,
-        linkAs,
         ...forwardedProps
     } = otherProps;
     const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
+    const isLink = linkAs || href;
+    const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
+    const baseProps: React.ComponentProps<typeof Component> = {};
+    if (Component === 'button') {
+        baseProps.type = 'button';
+        Object.assign(baseProps, disabledStateProps);
+    } else if (isLink) {
+        baseProps.href = href;
+        baseProps.target = target;
+    }
+
     return (
-        <RawClickable
-            ref={ref as any}
-            as={linkAs || forwardedProps.href ? 'a' : 'button'}
+        <Component
+            ref={ref}
             {...forwardedProps}
-            {...disabledStateProps}
+            {...baseProps}
             className={classNames(
                 className,
                 handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),
@@ -101,7 +112,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
                     {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
                 </>,
             )}
-        </RawClickable>
+        </Component>
     );
 });
 Link.displayName = COMPONENT_NAME;

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

@@ -43,7 +43,7 @@ describe(`<${ListItem.displayName}>`, () => {
         it('should render disabled list item button', async () => {
             const onItemSelected = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onItemSelected });
-            expect(link).toBeDisabled();
+            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();
@@ -57,6 +57,7 @@ describe(`<${ListItem.displayName}>`, () => {
                 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();
@@ -78,6 +79,7 @@ describe(`<${ListItem.displayName}>`, () => {
                 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();

package/src/components/list/ListItem.tsx

@@ -1,15 +1,16 @@
-import React, { ReactNode, Ref, SyntheticEvent } from 'react';
+import React, { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
+import { onEnterPressed, onButtonPressed } from '@lumx/core/js/utils';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/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';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 
@@ -93,6 +94,13 @@ export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) =>
         ...forwardedProps
     } = otherProps;
 
+    const role = linkAs || linkProps.href ? 'link' : 'button';
+    const onKeyDown = useMemo(() => {
+        if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected as any);
+        if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected as any);
+        return undefined;
+    }, [role, onItemSelected]);
+
     const content = (
         <>
             {before && <div className={`${CLASSNAME}__before`}>{before}</div>}
@@ -115,23 +123,28 @@ export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) =>
         >
             {isClickable({ linkProps, onItemSelected }) ? (
                 /* Clickable list item */
-                <RawClickable
-                    as={linkAs || linkProps.href ? 'a' : 'button'}
-                    {...linkProps}
-                    {...disabledStateProps}
-                    className={classNames(
-                        handleBasicClasses({
-                            prefix: `${CLASSNAME}__link`,
-                            isHighlighted,
-                            isSelected,
-                            isDisabled: isAnyDisabled,
-                        }),
-                    )}
-                    onClick={onItemSelected}
-                    ref={linkRef}
-                >
-                    {content}
-                </RawClickable>
+                renderLink(
+                    {
+                        linkAs,
+                        tabIndex: !disabledStateProps.disabled ? 0 : undefined,
+                        role,
+                        'aria-disabled': isAnyDisabled,
+                        ...linkProps,
+                        href: isAnyDisabled ? undefined : linkProps.href,
+                        className: classNames(
+                            handleBasicClasses({
+                                prefix: `${CLASSNAME}__link`,
+                                isHighlighted,
+                                isSelected,
+                                isDisabled: isAnyDisabled,
+                            }),
+                        ),
+                        onClick: isAnyDisabled ? undefined : onItemSelected,
+                        onKeyDown: isAnyDisabled ? undefined : onKeyDown,
+                        ref: linkRef,
+                    },
+                    content,
+                )
             ) : (
                 /* Non clickable list item */
                 <div className={`${CLASSNAME}__wrapper`}>{content}</div>