Switch SearchInput to AutoId.

vrk-kpa · Jan 27, 2021 · 4345119 · 4345119
1 parent 6e9f06e
commit 4345119
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 37 deletions.
diff --git 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<SearchInputProps> = {
-    id: 'test-id',
-  },
-) => {
+const TestSearchInput = (props: Partial<SearchInputProps> = {}) => {
   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
@@ -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<SearchInputProps> {
 
   private inputRef = createRef<HTMLInputElement>();
 
-  private id: string;
-
-  private statusTextId: string;
-
   static getDerivedStateFromProps(
     nextProps: SearchInputProps,
     prevState: SearchInputState,
@@ -121,12 +117,6 @@ class BaseSearchInput extends Component<SearchInputProps> {
     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<SearchInputProps> {
       ...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<SearchInputProps> {
         : { tabIndex: -1, 'aria-hidden': true }),
     };
 
-    const getDescribedBy = () => {
-      if (statusText || ariaDescribedBy) {
-        return {
-          'aria-describedby': [
-            ...(statusText ? [this.statusTextId] : []),
-            ariaDescribedBy,
-          ].join(' '),
-        };
-      }
-      return {};
-    };
-
     return (
       <HtmlDiv
         {...inputContainerProps}
@@ -228,7 +208,7 @@ class BaseSearchInput extends Component<SearchInputProps> {
           [searchInputClassNames.fullWidth]: fullWidth,
         })}
       >
-        <LabelText htmlFor={this.id} labelMode={labelMode} as="label">
+        <LabelText htmlFor={id} labelMode={labelMode} as="label">
           {labelText}
         </LabelText>
         <Debounce waitFor={this.props.debounce}>
@@ -237,10 +217,13 @@ class BaseSearchInput extends Component<SearchInputProps> {
               <HtmlDiv className={searchInputClassNames.inputElementContainer}>
                 <HtmlInputWithRef
                   {...passProps}
-                  {...getDescribedBy()}
+                  {...getConditionalAriaProp('aria-describedby', [
+                    !!statusText ? statusTextId : undefined,
+                    ariaDescribedBy,
+                  ])}
                   forwardRef={this.inputRef}
                   aria-invalid={status === 'error'}
-                  id={this.id}
+                  id={id}
                   className={searchInputClassNames.inputElement}
                   type="search"
                   role="searchbox"
@@ -282,7 +265,7 @@ class BaseSearchInput extends Component<SearchInputProps> {
             </HtmlDiv>
           )}
         </Debounce>
-        <StatusText id={this.statusTextId} status={status}>
+        <StatusText id={statusTextId} status={status}>
           {statusText}
         </StatusText>
       </HtmlDiv>
@@ -305,6 +288,14 @@ const StyledSearchInput = styled(
  */
 export class SearchInput extends Component<SearchInputProps> {
   render() {
-    return <StyledSearchInput {...withSuomifiDefaultProps(this.props)} />;
+    const { id: propId, ...passProps } = this.props;
+
+    return (
+      <AutoId id={propId}>
+        {(id) => (
+          <StyledSearchInput id={id} {...withSuomifiDefaultProps(passProps)} />
+        )}
+      </AutoId>
+    );
   }
 }
diff --git 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`] = `
 >
   <label
     class="c0 c2 fi-label-text"
-    for="test-id"
+    for="1"
   >
     <span
       class="c3 fi-label-text_label-span"
@@ -480,7 +480,7 @@ exports[`snapshot should have matching default structure 1`] = `
         aria-invalid="false"
         class="c4 fi-search-input_input"
         data-testid="searchinput"
-        id="test-id"
+        id="1"
         role="searchbox"
         type="search"
         value=""