revert list item button link

Author: gcornut

CHANGELOG.md

@@ -16,8 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     -   Import types and constants from `@lumx/core` and re-export
     -   Import `className` utilities from `@lumx/core`
     -   Migrate tests to `vitest`
-    -   Uniformize link and button handling in `Link`, `Button`, `SideNavigationItem`, `Thumbnail`, `NavigationItem`
-        and `ListItem`.
+    -   Uniformize link and button handling in `Link`, `Button`, `SideNavigationItem`, `Thumbnail` and `NavigationItem`.
     -   Render disabled link as link instead of disabled buttons.
 
 ## [3.19.0][] - 2025-11-07

packages/lumx-react/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>

packages/lumx-react/src/utils/react/renderLink.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+interface Props {
+    linkAs?: any;
+}
+
+/**
+ * Render link with default <a> HTML component or a custom one provided by `linkAs`.
+ *
+ * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
+ *
+ * @param linkAs    Custom link component.
+ * @param children  Link children.
+ * @return          A link.
+ */
+export const renderLink = <P extends Props>({ linkAs, ...forwardedProps }: P, ...children: ReactNode[]): ReactElement =>
+    React.createElement(linkAs || 'a', forwardedProps, ...children);