Enhance Icon Interactivity in Input and InputDropdown Components

This commit enhances the user experience by updating the icon behavior in both Input and InputDropdown components to ensure icons are interactive only when they have an associated action. A new test confirms the correct rendering of decorative icons without actions. Changes include the introduction of a hasAction variable for icon components and a $pointerEvents prop for controlling CSS pointer events, improving accessibility and usability.

Author: Hector Arce De Las Heras

src/components/input/__tests__/input.test.tsx

@@ -56,7 +56,6 @@ function backspace(element) {
 
 const writeText = jest.fn();
 
-// eslint-disable-next-line n/no-unsupported-features/node-builtins
 Object.assign(navigator, {
   clipboard: {
     writeText,
@@ -192,6 +191,24 @@ describe('New Input Component', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('Should render a decorative icon, when onClick callback is not set', async () => {
+    const iconDataTestId = 'IconTestId';
+    const { container, getByTestId } = renderProvider(
+      <Input
+        {...commonProps}
+        placeholder={'placeholder'}
+        rightIcon={{ icon: 'UNICORN', dataTestId: iconDataTestId }}
+      />
+    );
+
+    const triggerButton = getByTestId(iconDataTestId);
+    expect(triggerButton).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
   it('Should be autoformated the text with mask', async () => {
     const onChange = jest.fn();
     const { container, getByRole } = renderProvider(

src/components/input/components/inputIcon.tsx

@@ -15,19 +15,26 @@ const InputIconStandAloneComponent = (
     return null;
   }
 
+  const hasAction = !!props.rightIcon?.onClick || !!props.leftIcon?.onClick;
+
   const onClick: React.MouseEventHandler<HTMLButtonElement> = event => {
     props.rightIcon?.onClick?.(event);
     props.leftIcon?.onClick?.(event);
   };
 
   return (
-    <InputIconStyled ref={ref} iconPosition={props.iconPosition} styles={props.styles}>
+    <InputIconStyled
+      ref={ref}
+      $pointerEvents={hasAction}
+      iconPosition={props.iconPosition}
+      styles={props.styles}
+    >
       <ElementOrIcon
         customIconStyles={props.styles?.inputIcon}
         disabled={props.disabled}
         {...props.rightIcon}
         {...props.leftIcon}
-        onClick={onClick}
+        onClick={hasAction ? onClick : undefined}
       />
     </InputIconStyled>
   );
@@ -43,17 +50,25 @@ const InputIconStandAloneDeprecatedComponent = (
   if (!props.icon || props.loading) {
     return null;
   }
+
+  const hasAction = !!props.icon.onClick;
+
   const onClick: React.MouseEventHandler<HTMLButtonElement> = event => {
     props.icon?.onClick?.(event);
   };
 
   return (
-    <InputIconStyled ref={ref} iconPosition={props.iconPosition} styles={props.styles}>
+    <InputIconStyled
+      ref={ref}
+      $pointerEvents={hasAction}
+      iconPosition={props.iconPosition}
+      styles={props.styles}
+    >
       <ElementOrIcon
         customIconStyles={props.styles?.inputIcon}
         disabled={props.disabled}
         {...props.icon}
-        onClick={onClick}
+        onClick={hasAction ? onClick : undefined}
       />
     </InputIconStyled>
   );

src/components/input/components/stories/stories.tsx

@@ -3,7 +3,17 @@ import * as React from 'react';
 import { ICONS } from '@/assets';
 import { ReplaceContent } from '@/components/storybook/replaceContent/replaceContent';
 
-const themeWithAdditionalInfo = ['kubit'];
+const themeWithAdditionalInfo = [
+  'kubit',
+  'flameLightAlt',
+  'modelBankLightAlt',
+  'horizonLightAlt',
+  'novaLightAlt',
+  'flameLightRegular',
+  'modelBankLightRegular',
+  'horizonLightRegular',
+  'novaLightRegular',
+];
 
 const themeWithoutIcon = themeWithAdditionalInfo.filter(theme => theme !== 'kubit');
 

src/components/input/input.styled.ts

@@ -87,6 +87,7 @@ export const LoaderWrapperStyled = styled.div<LoaderStyledProps>`
 `;
 
 export const InputIconStyled = styled.div<InputIconStyledProps>`
+  pointer-events: ${({ $pointerEvents }) => ($pointerEvents ? 'auto' : 'none')};
   ${({ iconPosition, styles }) => css`
     ${getStyles(
       iconPosition === InputIconPosition.RIGHT

src/components/input/types/inputStyledPropsType.ts

@@ -47,6 +47,7 @@ export type LoaderStyledProps = {
 export type InputIconStyledProps = {
   iconPosition?: InputIconPosition;
   styles?: InputStateProps;
+  $pointerEvents?: boolean;
 };
 
 // Input

src/components/inputDropdown/inputDropdown.tsx

@@ -43,6 +43,7 @@ const InputDropdownComponent = React.forwardRef(
       ctv
     );
     const device = useMediaDevice();
+    const hasIconAction = !!icon?.onClick || !!props.rightIcon?.onClick;
 
     const {
       openOptions,
@@ -93,15 +94,15 @@ const InputDropdownComponent = React.forwardRef(
         {...props}
         ref={innerRef as unknown as React.Ref<unknown> | undefined}
         device={device}
-        icon={{ ...icon, onClick: handleClickIconInputDropdown }}
+        icon={{ ...icon, onClick: hasIconAction ? handleClickIconInputDropdown : undefined }}
         informationAssociatedValue={informationAssociatedValue}
         inputPopoverValue={inputPopoverText}
         listOptionsHeight={listOptionsHeight}
         open={openOptions}
         optionList={optionsFiltered}
         rightIcon={{
           ...props.rightIcon,
-          onClick: handleClickIconInputDropdown,
+          onClick: hasIconAction ? handleClickIconInputDropdown : undefined,
         }}
         searchText={searchText}
         state={state}

src/components/inputDropdown/stories/inputDropdown.stories.tsx

@@ -46,7 +46,7 @@ const commonArgs: IInputDropdown = {
   loader: {
     altText: 'loading',
   },
-  icon: { icon: ICONS.ICON_CHEVRON_DOWN, tabIndex: -1 },
+  icon: { icon: ICONS.ICON_CHEVRON_DOWN },
   optionList: {
     options: [
       {