diff --git a/src/core/Form/SearchInput/SearchInput.test.tsx b/src/core/Form/SearchInput/SearchInput.test.tsx index 2cbbe50ba6..46e40a3f54 100644 --- a/src/core/Form/SearchInput/SearchInput.test.tsx +++ b/src/core/Form/SearchInput/SearchInput.test.tsx @@ -4,11 +4,7 @@ import { axeTest } from '../../../utils/test/axe'; import { SearchInput, SearchInputProps } from './SearchInput'; -const TestSearchInput = ( - props: Partial = { - id: 'test-id', - }, -) => { +const TestSearchInput = (props: Partial = {}) => { const { labelText, clearButtonLabel, @@ -49,7 +45,7 @@ describe('props', () => { }); it('should have label text with correct class and for id', () => { - const { getByText } = render(TestSearchInput()); + const { getByText } = render(TestSearchInput({ id: 'test-id' })); const label = getByText('Test search input').closest('label'); expect(label).toHaveClass('fi-label-text'); expect(label).toHaveAttribute('for', 'test-id'); diff --git a/src/core/Form/SearchInput/SearchInput.tsx b/src/core/Form/SearchInput/SearchInput.tsx index c72f2d5d0f..2c26b8bed7 100644 --- a/src/core/Form/SearchInput/SearchInput.tsx +++ b/src/core/Form/SearchInput/SearchInput.tsx @@ -9,8 +9,8 @@ import { HtmlButton, HtmlButtonProps, } from '../../../reset'; -import { Omit } from '../../../utils/typescript'; -import { idGenerator } from '../../../utils/uuid'; +import { AutoId } from '../../../utils/AutoId'; +import { getConditionalAriaProp } from '../../../utils/aria'; import { TokensProp, InternalTokensProp } from '../../theme'; import { withSuomifiDefaultProps } from '../../theme/utils'; import { VisuallyHidden } from '../../../components/Visually-hidden/Visually-hidden'; @@ -106,10 +106,6 @@ class BaseSearchInput extends Component { private inputRef = createRef(); - private id: string; - - private statusTextId: string; - static getDerivedStateFromProps( nextProps: SearchInputProps, prevState: SearchInputState, @@ -121,12 +117,6 @@ class BaseSearchInput extends Component { return null; } - constructor(props: SearchInputProps) { - super(props); - this.id = `${idGenerator(props.id)}`; - this.statusTextId = `${this.id}-statusText`; - } - render() { const { value, @@ -150,6 +140,8 @@ class BaseSearchInput extends Component { ...passProps } = this.props; + const statusTextId = `${id}-statusText`; + const conditionalSetState = (newValue: SearchInputValue) => { if (!('value' in this.props)) { this.setState({ value: newValue }); @@ -207,18 +199,6 @@ class BaseSearchInput extends Component { : { tabIndex: -1, 'aria-hidden': true }), }; - const getDescribedBy = () => { - if (statusText || ariaDescribedBy) { - return { - 'aria-describedby': [ - ...(statusText ? [this.statusTextId] : []), - ariaDescribedBy, - ].join(' '), - }; - } - return {}; - }; - return ( { [searchInputClassNames.fullWidth]: fullWidth, })} > - + {labelText} @@ -237,10 +217,13 @@ class BaseSearchInput extends Component { { )} - + {statusText} @@ -305,6 +288,14 @@ const StyledSearchInput = styled( */ export class SearchInput extends Component { render() { - return ; + const { id: propId, ...passProps } = this.props; + + return ( + + {(id) => ( + + )} + + ); } } diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap index 9ad29692af..f87d5a741d 100644 --- a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap +++ b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap @@ -462,7 +462,7 @@ exports[`snapshot should have matching default structure 1`] = ` >