Enhance Accessibility, Readability, and Loading State Handling

This commit introduces several changes to improve the accessibility and readability of the codebase, and to enhance the handling of the loading state of components.

Changes include:

Test suite structure in button.test.tsx has been refactored using describe and test blocks for improved readability and organization.
Styling for the disabled state of the button in button.styled.ts has been updated to handle loading state.
A disabled variable has been added to buttonStandAlone.tsx to handle the button's disabled state when it's loading.
LoaderStandAlone component in loader.tsx has been modified to always return a JSX element and a visible prop has been added to control the visibility of the loader.
LoaderStandaloneComponent in loaderStandAlone.tsx and ILoaderStandAlone interface in loader.ts have been updated to include a visible prop that controls the visibility of the loader.
A visible field has been added to the story args for the Loader and LoaderWithCtv stories in loader.stories.tsx to control the visibility of the loader in the storybook.
These changes improve the readability of the code, the accessibility of the components, and the handling of the loading state.

Author: Hector Arce De Las Heras

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

@@ -49,6 +49,8 @@ const commonArgs: IInputUnControlled = {
   informationAssociatedValue: { content: 'Lorem ipsum dolor sit. Lorem ipsum dolor sit amet' },
   iconPosition: InputIconPosition.RIGHT,
   icon: { icon: ICONS.ICON_PLACEHOLDER },
+  leftIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'icon alt text' },
+  rightIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'icon alt text' },
   secondaryLabel: labelSecondary(themeSelected),
   additionalInfo: additionalInfoAction(themeSelected),
   loader: {

src/components/input/types/input.ts

@@ -156,8 +156,13 @@ export interface IInputIcon {
   loading?: boolean;
   disabled?: boolean;
   // icons
-  icon?: IElementOrIcon;
+  rightIcon?: IElementOrIcon;
+  leftIcon?: IElementOrIcon;
   iconPosition?: InputIconPosition;
+  /**
+   * @deprecated `icon` will be removed. Use `rightIcon` or `leftIcon` instead
+   */
+  icon?: IElementOrIcon;
 }
 
 export interface IInputLoader {
@@ -294,6 +299,8 @@ type componentPropsToOmit =
   | 'placeholder'
   | 'leftExtraStyles'
   | 'topExtraStyles'
+  // uncomment when icon prop is removed
+  // | 'iconPosition'
   | 'id';
 export interface IInputComponents
   extends InputAriaAttributes,
@@ -304,6 +311,7 @@ export interface IInputComponents
     Omit<ILabel, componentPropsToOmit>,
     Omit<ITitle, componentPropsToOmit>,
     Omit<IInputLoader, componentPropsToOmit>,
+    // remove interface extension when icon prop is removed
     Omit<IInputIcon, componentPropsToOmit> {}
 
 type AriaHasPopupType =
@@ -319,7 +327,10 @@ type AriaHasPopupType =
 
 export interface MultipleRef {
   refInput?: React.MutableRefObject<HTMLInputElement>;
+  // remove `refIcon` when icon prop is removed
   refIcon: React.MutableRefObject<HTMLSpanElement | undefined>;
+  refRightIcon: React.MutableRefObject<HTMLSpanElement | undefined>;
+  refLeftIcon: React.MutableRefObject<HTMLSpanElement | undefined>;
 }
 
 export type FormatNumber = Intl.NumberFormatOptions & {

src/components/input/types/inputStyledPropsType.ts

@@ -1,3 +1,5 @@
+import { IElementOrIcon } from '@/components/elementOrIcon';
+
 import { InputStateProps, InputStylesProps } from './input';
 import { InputIconPosition, InputState, LABEL_TYPE } from './inputTheme';
 
@@ -52,8 +54,16 @@ export type InputStyledProps = {
   state: InputState;
   styles?: InputStylesProps;
   cursorPointer?: string;
+  /**
+   * @deprecated `icon` will be removed. Use 'leftIcon` or 'rightIcon' instead
+   */
   icon?: JSX.Element | HTMLElement | React.ReactNode | string;
+  /**
+   * @deprecated `iconPosition` will be removed. Use 'leftIcon` or 'rightIcon' instead
+   */
   iconPosition?: InputIconPosition;
+  leftIcon?: IElementOrIcon;
+  rightIcon?: IElementOrIcon;
   labelType?: LABEL_TYPE;
   placeholder?: string;
 };

src/components/inputDate/inputDate.tsx

@@ -128,6 +128,13 @@ const InputDateComponent = React.forwardRef(
         minDate={minDate}
         minLength={minLength}
         placeholder={getPlaceholder(placeholder, state, styles[state]?.label?.type)}
+        rightIcon={{
+          ...props.rightIcon,
+          onClick: event => {
+            handleShowCalendar();
+            props.rightIcon?.onClick?.(event);
+          },
+        }}
         state={state}
         styles={styles}
         truncate={truncate}

src/components/inputDate/inputDateStandAlone.tsx

@@ -34,6 +34,12 @@ export const InputDateStandAloneComponent = (
         }}
         id={inputId}
         overrideStyles={props.styles}
+        rightIcon={{
+          ...props.rightIcon,
+          altText: props.calendarOpen
+            ? props.configAccesibility?.closeInputIconAriaLabel
+            : props.configAccesibility?.openInputIconAriaLabel,
+        }}
         role={ROLES.COMBOBOX}
         variant={props.inputVariant ?? props.styles?.[props.state]?.inputVariant}
       />

src/components/inputDate/stories/argtypes.ts

@@ -273,9 +273,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         disable: true,
       },
     },
-    icon: {
+    rightIcon: {
+      description:
+        'Icon to show on the right side of the input. `altText` are not allowed here. You can set in configAccesibility prop in `iconInputOpenAriaLabel` and `iconInputCloseAriaLabel`',
+      type: { name: 'object' },
+      control: { type: 'object' },
       table: {
-        disable: true,
+        type: {
+          summary: 'object',
+          detail: 'IElementOrIcon',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
   };

src/components/inputDate/stories/inputDate.stories.tsx

@@ -58,6 +58,7 @@ const commonArgs: IInputDate = {
   // initialDate: normalizeDate(new Date('01-01-2000')),
   // initialSecondDate: normalizeDate(new Date('05-01-2000')),
   defaultDate: new Date(),
+  rightIcon: { icon: ICONS.ICON_PLACEHOLDER },
   closeIcon: { icon: ICONS.ICON_CLOSE },
   type: InputTypeType.TEXT,
   today: 'Today, ',

src/components/inputDate/types/inputDate.ts

@@ -11,6 +11,8 @@ import { CustomTokenTypes, POSITIONS } from '@/types';
 
 import { InputDateStylesProps } from './inputDateTheme';
 
+type InputRightIconType = Omit<IElementOrIcon, 'altText'>;
+
 export type SelectedDate = {
   startDate: Date;
   endDate: Date;
@@ -67,13 +69,15 @@ type propsToOmitInputBasic =
   | 'aria-expanded'
   | 'aria-haspopup'
   | 'formatNumber'
-  | 'locale';
+  | 'locale'
+  | 'rightIcon';
 
 export interface IInputDateStandAlone extends Omit<IInputStandAlone, propsToOmitInputBasic> {
   styles: InputDateStylesProps;
   // modifiers
   locale: string;
   inputVariant?: string;
+  rightIcon?: InputRightIconType;
   // actionBottomSheet
   closeIcon?: IElementOrIcon;
   labelComponentType?: TextComponentType;

src/components/inputDropdown/__tests__/inputDropdown.test.tsx

@@ -317,7 +317,6 @@ describe('New Input Dropdown Component', () => {
     const { container, getByRole } = renderProvider(
       <InputDropdown
         {...mockProps}
-        icon={{ icon: 'UNICORN', altText: 'Open Info', onClick: onIconClick }}
         optionList={{
           options: [
             {
@@ -327,10 +326,16 @@ describe('New Input Dropdown Component', () => {
           ],
         }}
         placeholder={'placeholder'}
+        rightIcon={{
+          icon: 'UNICORN',
+          altText: 'Open Info',
+          onClick: onIconClick,
+        }}
       />
     );
 
     const triggerButton = getByRole('button', { name: 'Open Info' });
+
     fireEvent.click(triggerButton);
     expect(onIconClick).toHaveBeenCalled();
 

src/components/inputDropdown/components/popoverSearchList.tsx

@@ -130,6 +130,13 @@ export const PopoverSearchListComponent = (
                   },
                 }}
                 id={inputPopoverId}
+                rightIcon={{
+                  ...props.inputPopoverRightIcon,
+                  onClick: event => {
+                    props.onInputPopoverIconClick();
+                    props.inputPopoverRightIcon?.onClick?.(event);
+                  },
+                }}
                 value={props.inputPopoverValue}
                 // The variant is the same for all the states
                 variant={props.styles?.[props.state]?.inputVariant as string}