diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx index 8855831f..ed985d20 100644 --- a/sample-app/src/components/InputDropdown.tsx +++ b/sample-app/src/components/InputDropdown.tsx @@ -1,13 +1,14 @@ import { useReducer, KeyboardEvent, useRef, useEffect, useState } from "react" import Dropdown, { Option } from './Dropdown'; import ScreenReader from "./ScreenReader"; +import { processTranslation } from './utils/processTranslation'; interface Props { inputValue?: string, placeholder?: string, screenReaderInstructions?: string, screenReaderInstructionsId?: string, - hasAutocompleteCount: boolean, + shouldAutocompleteCount: boolean, options: Option[], optionIdPrefix: string, onSubmit?: (value: string) => void, @@ -54,7 +55,7 @@ export default function InputDropdown({ placeholder, screenReaderInstructions, screenReaderInstructionsId, - hasAutocompleteCount, + shouldAutocompleteCount, options, optionIdPrefix, onSubmit = () => {}, @@ -148,15 +149,22 @@ export default function InputDropdown({ /> {renderButtons()} - {(screenReaderInstructionsId || hasAutocompleteCount) && + {(screenReaderInstructionsId || shouldAutocompleteCount) && { + return processTranslation({ + phrase: `${numOptions} autocomplete option found.`, + pluralForm: `${numOptions} autocomplete options found.`, + count: numOptions + }); + }} cssClasses={cssClasses} /> } diff --git a/sample-app/src/components/ScreenReader.tsx b/sample-app/src/components/ScreenReader.tsx index 2063d36c..42090533 100644 --- a/sample-app/src/components/ScreenReader.tsx +++ b/sample-app/src/components/ScreenReader.tsx @@ -1,15 +1,15 @@ import { useRef } from "react"; -import { processTranslation } from './utils/processTranslation'; import '../sass/ScreenReader.scss'; interface Props { instructionsId?: string, instructions?: string, - hasCount: boolean, + shouldCount: boolean, + shouldDisplayOptions?: boolean, hasInput?: boolean, optionsLength?: number, - shouldDisplayOptions?: boolean, countKey?: number, + generateCountText?: (numOptions: number) => string, cssClasses: { screenReaderInstructions?: string, screenReaderCount?: string @@ -19,11 +19,12 @@ interface Props { export default function ScreenReader({ instructionsId, instructions, - hasCount, - hasInput, - optionsLength, + shouldCount, shouldDisplayOptions, + hasInput, + optionsLength = 0, countKey, + generateCountText = () => '', cssClasses } : Props): JSX.Element | null { @@ -35,7 +36,7 @@ export default function ScreenReader({ } function removeAutocompleteCountText() { - if (hasCount && countRef.current.innerText !== '') { + if (shouldCount && countRef.current.innerText !== '') { countRef.current.innerText = ''; } } @@ -50,18 +51,14 @@ export default function ScreenReader({ {instructions} } - {hasCount && + {shouldCount &&
- {processTranslation({ - phrase: `${optionsLength} autocomplete option found.`, - pluralForm: `${optionsLength} autocomplete options found.`, - count: optionsLength - })} + {generateCountText(optionsLength)}
} diff --git a/sample-app/src/components/SearchBar.tsx b/sample-app/src/components/SearchBar.tsx index 2840a971..ca5ef3e4 100644 --- a/sample-app/src/components/SearchBar.tsx +++ b/sample-app/src/components/SearchBar.tsx @@ -60,7 +60,7 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro placeholder={placeholder} screenReaderInstructions={screenReaderInstructions} screenReaderInstructionsId='SearchBar__srInstructions' - hasAutocompleteCount={true} + shouldAutocompleteCount={true} options={autocompleteResults.map(result => { return { value: result.value,