Enable setting labels for listbox in InputSearch and InputDropdown components

This commit allows for setting labels to the listbox in the InputSearch and InputDropdown components, enhancing accessibility. For InputSearch, labels can be set for all lists using optionsListDefaultArias or for individual lists using aria-label or aria-labelledby in each IOptionGroup of the optionList. For InputDropdown, labels can be set using aria-label or aria-labelledby in the optionList prop.

Author: Hector Arce De Las Heras

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

@@ -25,8 +25,9 @@ const mockProps = {
         value: 'string',
       },
     ],
+    ['aria-label']: 'input dropdown',
   },
-  label: { content: 'input search' },
+  label: { content: 'input dropdown' },
   closeIcon: { icon: 'CLOSE_ICON', ['aria-label']: 'Close icon' },
   dataTestId: 'testid',
   handleOpenOptions: jest.fn(),

src/components/inputDropdown/components/optionsList.tsx

@@ -40,6 +40,10 @@ export const OptionsListComponent = (
           id={props['aria-controls']}
           optionVariant={props.stylesListOption.optionVariant}
           options={props.optionList.options}
+          optionsContainerArias={{
+            ['aria-label']: props.optionList['aria-label'],
+            ['aria-labelledby']: props.optionList['aria-labelledby'],
+          }}
           roveFocus={roveFocusProps}
           selectedValue={props.value}
           variant={props.stylesListOption.variant}

src/components/inputSearch/__tests__/helpers.test.tsx

@@ -56,12 +56,6 @@ describe('Input Search Helpers', () => {
     expect(result.optionsFiltered).toEqual([{ options: ['test1'] }]);
   });
 
-  test('should return original options when no match is found', () => {
-    const options = [{ options: ['test1', 'test2', 'test3'] }];
-    const result = filterOptions('test4', options);
-    expect(result.optionsFiltered).toEqual(options);
-  });
-
   test('check match', () => {
     const options = ['first', 'second', 'thrid'];
     const correctValue = 'first';

src/components/inputSearch/__tests__/inputSearch.test.tsx

@@ -21,6 +21,7 @@ const mockProps = {
   optionList: [
     {
       options: ['string'],
+      ['aria-label']: 'input search',
     },
   ],
   rightIcon: {

src/components/inputSearch/components/optionsList.tsx

@@ -53,6 +53,10 @@ export const OptionsListComponent = (
           id={props['aria-controls']}
           optionVariant={props.optionVariant ?? props.stylesListOption?.optionVariant}
           options={_options}
+          optionsContainerArias={{
+            ['aria-label']: props['aria-label'],
+            ['aria-labelledby']: props['aria-labelledby'],
+          }}
           roveFocus={roveFocusProps}
           selectedValue={props.value}
           title={props.title}

src/components/inputSearch/components/popoverSearchList.tsx

@@ -64,7 +64,11 @@ export const PopoverSearchListComponent = (
     <OptionsList
       key={index}
       ref={ref}
-      aria-controls={`${props['aria-controls']}${index}`}
+      aria-controls={props['aria-controls']}
+      aria-label={section?.['aria-label'] ?? props.optionsListDefaultArias?.['aria-label']}
+      aria-labelledby={
+        section?.['aria-labelledby'] ?? props.optionsListDefaultArias?.['aria-labelledby']
+      }
       caseSensitive={props.caseSensitive}
       dataTestId={`${props.dataTestId}OptionsList${index}`}
       hightlightedOption={showTextWritten || showHighlightedOption}
@@ -161,7 +165,6 @@ export const PopoverSearchListComponent = (
       variant={props.styles?.[props.state]?.popoverVariant?.[props.device]}
       onCloseInternally={() => {
         props.onOpenOptions(false);
-        refInput?.current?.focus();
       }}
     >
       {useActionBottomSheet ? (
@@ -172,6 +175,7 @@ export const PopoverSearchListComponent = (
             onClick: event => {
               props.onOpenOptions(false);
               props.closeIcon?.onClick?.(event);
+              refInput?.current?.focus();
             },
           }}
           dataTestId={`${props.dataTestId}ActionBottomSheet`}

src/components/inputSearch/helpers/filterOptions.ts

@@ -2,7 +2,6 @@ import { structuredClone } from '@/utils';
 
 import { IOptionGroup, InputSearchFilterOptionReturnValue } from '../types';
 
-// eslint-disable-next-line complexity
 export const filterOptions = (
   value: string | number | undefined,
   options: IOptionGroup[],
@@ -35,11 +34,7 @@ export const filterOptions = (
     optionsFiltered[i].options = optionsAvailable;
   }
 
-  const hasValue = optionsFiltered.some(option => option.options.length > 0);
-
-  return {
-    optionsFiltered: hasValue ? optionsFiltered : options,
-  };
+  return { optionsFiltered };
 };
 
 export const hasMatchWithOptions = (

src/components/inputSearch/stories/argtypes.ts

@@ -60,6 +60,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    optionsListDefaultArias: {
+      description: 'Arias for the options list',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'OptionGroupAriasTypes',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     elementsToShow: {
       description: 'Number of elements to show in the list',
       control: { type: 'text' },

src/components/inputSearch/stories/inputSearch.stories.tsx

@@ -49,6 +49,7 @@ const commonArgs: IInputSearch = {
   inputPopoverIcon: { icon: 'CLOSE' },
   titleActionBottomSheet: 'Title List',
   optionList: options,
+  optionsListDefaultArias: { ['aria-label']: 'Label' },
   errorMessage: { content: 'Error message' },
   errorIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'error' },
   loadingText: { content: 'Loading results' },

src/components/inputSearch/types/inputSearch.ts

@@ -24,7 +24,10 @@ export type InputSearchOptionType = ListOptionsOptionType;
 export type InputSearchTitleType = Omit<IText<string>, 'children'> & {
   content?: string | number;
 };
-export interface IOptionGroup {
+
+export type OptionGroupAriasTypes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+
+export interface IOptionGroup extends OptionGroupAriasTypes {
   options: string[];
   title?: InputSearchTitleType;
   optionVariant?: string;
@@ -75,6 +78,7 @@ export interface IPopoverSearchList {
   loadingText?: InputSearchLoadingTextType;
   open: boolean;
   optionList: IOptionGroup[];
+  optionsListDefaultArias?: OptionGroupAriasTypes;
   preventCloseOnClickElements?: (HTMLElement | null | undefined)[];
   searchText?: string;
   hasResultTextWrittenByUser?: boolean;
@@ -90,7 +94,7 @@ export interface IPopoverSearchList {
   onOptionsListKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
-export interface IOptionsListSearchList {
+export interface IOptionsListSearchList extends OptionGroupAriasTypes {
   caseSensitive?: boolean;
   index?: number;
   stylesListOption?: InputSearchListOptionsProps;
@@ -155,6 +159,7 @@ export interface IInputSearchStandAlone extends Omit<IInputStandAlone, propsToOm
   caseSensitive?: boolean;
   listOptionsHeight: string;
   optionList: IOptionGroup[];
+  optionsListDefaultArias?: OptionGroupAriasTypes;
   loadingList?: boolean;
   loadingText?: InputSearchLoadingTextType;
   elementsToShow?: number;