Add a prop to read the numbers of results

Add a prop to read the numbers of results on InputSearch component

Author: Kubit

src/components/inputCounter/__tests__/counter.utils.test.tsx

@@ -1,25 +1,38 @@
 import { render } from '@testing-library/react';
-import React, { MutableRefObject, createRef } from 'react';
+import React, { MutableRefObject } from 'react';
 
-import { getCharactersLength } from '../utils';
+import { buildScreenReaderText, getCharactersLength } from '../utils';
 
+const input = document.createElement('input');
+const maxLength = 10;
+const inputRef = { current: input };
 describe('Counter Utils', () => {
-  const ref = { current: null };
   it('Should have value', async () => {
     const value = 'test';
-    expect(getCharactersLength(value, ref)).toBe(value.length);
+    expect(getCharactersLength(value, inputRef)).toBe(value.length);
   });
 
   it('Should have inputRef', async () => {
     const refValue = 'test';
-    const ref = createRef<HTMLInputElement>();
-    render(<input ref={ref} value={refValue} onChange={jest.fn()} />);
-    expect(getCharactersLength(undefined, ref as MutableRefObject<HTMLInputElement>)).toBe(
+    render(<input ref={inputRef} value={refValue} onChange={jest.fn()} />);
+    expect(getCharactersLength(undefined, inputRef as MutableRefObject<HTMLInputElement>)).toBe(
       refValue.length
     );
   });
 
   it('Should return 0', async () => {
-    expect(getCharactersLength(undefined, ref)).toBe(0);
+    expect(getCharactersLength(undefined, inputRef)).toBe(0);
+  });
+  it('returns undefined when screenReaderText is undefined', () => {
+    const input = document.createElement('input');
+    const inputRef = { current: input };
+    expect(buildScreenReaderText('test', inputRef, maxLength)).toBeUndefined();
+  });
+
+  it('replaces current characters and max length keys correctly', () => {
+    const screenReaderText =
+      'You have typed {{currentCharacters}} out of {{maxLength}} characters.';
+    const expectedText = 'You have typed 4 out of 10 characters.';
+    expect(buildScreenReaderText('test', inputRef, maxLength, screenReaderText)).toBe(expectedText);
   });
 });

src/components/inputCounter/inputCounter.tsx

@@ -7,6 +7,7 @@ import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { INTERNAL_ERROR_EXECUTION, InputTypeType } from '../input/types';
 import { InputCounterStandAlone } from './inputCounterStandAlone';
 import { IInputCounter, IInputCounterStandAlone, InputCounterStylesProps } from './types';
+import { buildScreenReaderText } from './utils';
 
 const InputCounterComponent = React.forwardRef(
   <V extends string | unknown>(
@@ -41,13 +42,14 @@ const InputCounterComponent = React.forwardRef(
     }: IInputCounter<V>,
     ref: React.ForwardedRef<HTMLInputElement | undefined>
   ): JSX.Element => {
+    const uniqueId = useId('inputCounter');
+    const inputId = props.id ?? uniqueId;
+
     const styles = useStyles<InputCounterStylesProps, V>(
       STYLES_NAME.INPUT_COUNTER,
       props.variant,
       ctv
     );
-    const uniqueId = useId('inputCounter');
-    const inputId = props.id ?? uniqueId;
 
     const {
       value,
@@ -87,6 +89,18 @@ const InputCounterComponent = React.forwardRef(
       onPaste,
     });
 
+    const [showMessage, setShowMessage] = React.useState(false);
+
+    const handleChange = e => {
+      handleChangeInternal?.(e);
+      setShowMessage(false);
+    };
+
+    const handleBlur = e => {
+      handleBlurInternal?.(e);
+      setShowMessage(true);
+    };
+
     return (
       <InputCounterStandAlone
         {...props}
@@ -97,13 +111,20 @@ const InputCounterComponent = React.forwardRef(
         maxLength={maxLength}
         min={min}
         minLength={minLength}
+        screenReaderCurrentCharacters={buildScreenReaderText(
+          value,
+          ref as React.MutableRefObject<HTMLInputElement>,
+          maxLength,
+          props.screenReaderCurrentCharacters
+        )}
+        showMessage={showMessage}
         state={state}
         styles={styles}
         truncate={truncate}
         type={type}
         value={value}
-        onBlur={handleBlurInternal}
-        onChange={handleChangeInternal}
+        onBlur={handleBlur}
+        onChange={handleChange}
         onFocus={handleFocusInternal}
         onKeyDown={handleKeyDownInternal}
         onPaste={handlePasteInternal}

src/components/inputCounter/inputCounterStandAlone.tsx

@@ -3,17 +3,20 @@ import * as React from 'react';
 import { TextCount } from '@/components/textCount/textCount';
 
 import { InputControlled as Input } from '../input';
+import { ScreenReaderOnly } from '../screenReaderOnly';
 import { IInputCounterStandAlone } from './types';
 import { getCharactersLength } from './utils';
 
 export const InputCounterStandAloneComponent = <V extends string | unknown>(
   props: IInputCounterStandAlone<V>,
   ref: React.ForwardedRef<HTMLInputElement | undefined | null>
 ): JSX.Element => {
+  const screenReaderCurrentCharactersId = 'screenReaderCurrentCharactersId';
   const renderTextCounter = (): React.ReactNode => {
     if (!props.styles?.[props.state]?.textCountVariant) {
       return null;
     }
+
     return (
       <TextCount
         currentCharacters={getCharactersLength(
@@ -36,14 +39,20 @@ export const InputCounterStandAloneComponent = <V extends string | unknown>(
   };
 
   return (
-    <Input
-      {...props}
-      ref={ref}
-      id={props.id}
-      overrideStyles={props.styles}
-      textCounter={renderTextCounter()}
-      variant={props.inputVariant ?? props.styles?.[props.state]?.inputVariant}
-    />
+    <>
+      <Input
+        {...props}
+        ref={ref}
+        aria-describedby={props.showMessage ? screenReaderCurrentCharactersId : undefined}
+        id={props.id}
+        overrideStyles={props.styles}
+        textCounter={renderTextCounter()}
+        variant={props.inputVariant ?? props.styles?.[props.state]?.inputVariant}
+      />
+      <ScreenReaderOnly id={screenReaderCurrentCharactersId}>
+        {props.screenReaderCurrentCharacters}
+      </ScreenReaderOnly>
+    </>
   );
 };
 

src/components/inputCounter/stories/argtypes.ts

@@ -37,6 +37,18 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    screenReaderCurrentCharacters: {
+      type: { name: 'string' },
+      description:
+        'The counter information has to be announce to screen reader users when the input receives the focus',
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
     maxLength: {
       type: { name: 'string', required: true },
       description:

src/components/inputCounter/stories/inputCounter.stories.tsx

@@ -37,7 +37,8 @@ const commonArgs: IInputCounter = {
   placeholder: 'Counter',
   secondaryLabel: labelSecondary(themeSelected),
   additionalInfo: additionalInfoAction(themeSelected),
-  screenReaderTextCount: 'screenReaderTextCount',
+  screenReaderTextCount: 'screen reader text min / max reached',
+  screenReaderCurrentCharacters: '{{currentCharacters}} of {{maxLength}} characters filled',
 };
 
 export const Inputcounter: Story = {

src/components/inputCounter/types/inputCounter.ts

@@ -8,6 +8,9 @@ export type InputCounterTextCountType = Omit<ITextCountControlled, 'variant' | '
   variant?: string;
 };
 
+export const INPUT_COUNTER_BUILD_SCREEN_READER_CURRENT_CHARACTERS_KEY = '{{currentCharacters}}';
+export const INPUT_COUNTER_BUILD_SCREEN_READER_MAX_LENGTH_KEY = '{{maxLength}}';
+
 type propsToOmitInputBasic =
   | 'styles'
   | 'inputId'
@@ -24,11 +27,13 @@ export interface IInputCounterStandAlone<V = undefined extends string ? unknown
   variant: V;
   inputVariant?: string;
   screenReaderTextCount: string;
+  screenReaderCurrentCharacters?: string;
   maxLength: number;
+  showMessage?: boolean;
   textCount?: InputCounterTextCountType;
 }
 
-type propsToOmit = 'styles' | 'state';
+type propsToOmit = 'styles' | 'state' | 'showMessage';
 
 export interface IInputCounter<V = undefined extends string ? unknown : string>
   extends Omit<IInputCounterStandAlone<V>, propsToOmit>,

src/components/inputCounter/utils/counter.utils.ts

@@ -1,5 +1,10 @@
 import { ForwardedRef, MutableRefObject } from 'react';
 
+import {
+  INPUT_COUNTER_BUILD_SCREEN_READER_CURRENT_CHARACTERS_KEY,
+  INPUT_COUNTER_BUILD_SCREEN_READER_MAX_LENGTH_KEY,
+} from '../types/inputCounter';
+
 export const getCharactersLength = (
   value: string | number | undefined,
   ref: ForwardedRef<HTMLInputElement | undefined>
@@ -11,3 +16,28 @@ export const getCharactersLength = (
     (ref as MutableRefObject<HTMLInputElement | null | undefined>)?.current?.value?.length || 0
   );
 };
+
+export const buildScreenReaderText = (
+  value: string | number | undefined,
+  ref: MutableRefObject<HTMLInputElement>,
+  maxLength: number,
+  screenReaderText?: string
+): string | undefined => {
+  if (!screenReaderText) {
+    return screenReaderText;
+  }
+
+  const currentCharacters = getCharactersLength(
+    value,
+    ref as React.MutableRefObject<HTMLInputElement>
+  );
+  const currentCharactersRegExp = new RegExp(
+    INPUT_COUNTER_BUILD_SCREEN_READER_CURRENT_CHARACTERS_KEY,
+    'g'
+  );
+  const maxlengthRegExp = new RegExp(INPUT_COUNTER_BUILD_SCREEN_READER_MAX_LENGTH_KEY, 'g');
+
+  return screenReaderText
+    .replace(currentCharactersRegExp, String(currentCharacters))
+    .replace(maxlengthRegExp, String(maxLength));
+};

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

@@ -1,4 +1,11 @@
-import { filterOptions, getAriaControls, getLength, hasMatchWithOptions } from '../helpers';
+import {
+  buildOptionsScreenReaderText,
+  filterOptions,
+  getAriaControls,
+  getLength,
+  hasMatchWithOptions,
+  shouldOpenPopover,
+} from '../helpers';
 
 const optionsToFilter = [
   {
@@ -65,3 +72,55 @@ describe('Input Search Helpers', () => {
     expect(hasMatchWithOptions(wrongValue, options)).toBeFalsy();
   });
 });
+
+describe('shouldOpenPopover', () => {
+  it('returns false when open is false', () => {
+    expect(shouldOpenPopover({ open: false, options: [] })).toBe(false);
+  });
+
+  it('returns true when useActionBottomSheet is true', () => {
+    expect(shouldOpenPopover({ open: true, useActionBottomSheet: true, options: [] })).toBe(true);
+  });
+
+  it('returns true when options array length is greater than 0', () => {
+    expect(shouldOpenPopover({ open: true, options: [{ options: ['Option 1'] }] })).toBe(true);
+  });
+
+  it('returns true when loadingList is true', () => {
+    expect(shouldOpenPopover({ open: true, options: [], loadingList: true })).toBe(true);
+  });
+
+  it('returns true when noResultText has content', () => {
+    expect(
+      shouldOpenPopover({ open: true, options: [], noResultText: { content: 'No results found' } })
+    ).toBe(true);
+  });
+
+  it('returns true when hasHighlightedOption is true', () => {
+    expect(shouldOpenPopover({ open: true, options: [], hasHighlightedOption: true })).toBe(true);
+  });
+
+  it('returns false when none of the conditions are met', () => {
+    expect(shouldOpenPopover({ open: true, options: [] })).toBe(false);
+  });
+});
+
+describe('screenReader', () => {
+  it('buildOptionsScreenReaderText - should return falsy if optionsScreenReaderText does not exist', () => {
+    const result = buildOptionsScreenReaderText({
+      numOptions: 1,
+      numOptionsFiltered: 1,
+      optionsScreenReaderText: undefined,
+    });
+    expect(result).toBeFalsy();
+  });
+
+  it('buildOptionsScreenReaderText - should return optionsScreenReaderText with replaced values', () => {
+    const result = buildOptionsScreenReaderText({
+      numOptions: 1,
+      numOptionsFiltered: 1,
+      optionsScreenReaderText: '{{numOptionsFiltered}} of {{numOptions}}',
+    });
+    expect(result).toBe('1 of 1');
+  });
+});

src/components/inputSearch/components/optionsList.tsx

@@ -2,8 +2,11 @@ import * as React from 'react';
 import { ForwardedRef, forwardRef, useCallback, useMemo } from 'react';
 
 import { ListOptions } from '@/components/listOptions/listOptions';
+import { ROLES } from '@/types';
 
+import { buildOptionsScreenReaderText } from '../helpers';
 import { MultipleRef } from '../hooks/useInputSearch';
+import { NumMatchesScreenReader } from '../inputSearch.styled';
 import { IOptionsListSearchList } from '../types';
 import { LoadingIcon } from './loadingIcon';
 
@@ -69,6 +72,15 @@ export const OptionsListComponent = (
           }}
         />
       )}
+      <NumMatchesScreenReader role={ROLES.STATUS}>
+        {buildOptionsScreenReaderText({
+          numOptions: props.hightlightedOption
+            ? props.initialOptionsLength + 1
+            : props.initialOptionsLength,
+          numOptionsFiltered: _options.length,
+          optionsScreenReaderText: props.optionsScreenReaderText,
+        })}
+      </NumMatchesScreenReader>
       <LoadingIcon
         expanded={_options.length === 0}
         loader={props.loader}

src/components/inputSearch/components/popoverSearchList.tsx

@@ -3,11 +3,11 @@ import { ForwardedRef, forwardRef, useMemo } from 'react';
 
 import { Input } from '@/components/input';
 //  components
-import { PopoverControlled as Popover } from '@/components/popover';
+import { PopoverControlled as Popover, PopoverComponentType } from '@/components/popover';
 import { ScreenReaderOnly } from '@/components/screenReaderOnly';
 import { Text } from '@/components/text';
 import { useId } from '@/hooks';
-import { AriaLiveOptionType } from '@/types';
+import { AriaLiveOptionType, ROLES } from '@/types';
 
 import { ActionBottomSheetControlledStructure as ActionBottomSheet } from '../../actionBottomSheet/actionBottomSheetControlled';
 // helpers
@@ -73,12 +73,14 @@ export const PopoverSearchListComponent = (
       dataTestId={`${props.dataTestId}OptionsList${index}`}
       hightlightedOption={showTextWritten || showHighlightedOption}
       index={index}
+      initialOptionsLength={props.initialOptionsLength}
       loader={props.loader}
       loading={props.loading}
       loadingText={props.loadingText}
       optionCheckedIcon={props.optionCheckedIcon}
       optionVariant={section?.optionVariant}
       options={section?.options || []}
+      optionsScreenReaderText={props.optionsScreenReaderText}
       searchText={labelInResultTextWrittenByUser}
       stylesListOption={props.styles.listOptions}
       stylesState={props.styles?.[props.state]}
@@ -156,12 +158,15 @@ export const PopoverSearchListComponent = (
   return (
     <Popover
       hasBackDrop
+      aria-modal={useActionBottomSheet ? true : undefined}
       blockBack={props.blockBackPopover}
+      component={useActionBottomSheet ? PopoverComponentType.DIV : undefined}
       dataTestId={`${props.dataTestId}Popover`}
       focusFirstDescendantAutomatically={false}
       focusLastElementFocusedAfterClose={false}
       open={props.open}
       preventCloseOnClickElements={props.preventCloseOnClickElements}
+      role={useActionBottomSheet ? ROLES.DIALOG : undefined}
       trapFocusInsideModal={useActionBottomSheet}
       variant={props.styles?.[props.state]?.popoverVariant?.[props.device]}
       onCloseInternally={() => {