chore: fiks todo

helsenorge · Apr 8, 2024 · 9407404 · 9407404
1 parent 871b59f
commit 9407404
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 2 deletions.
diff --git a/npm/packages/autosuggest/src/components/autosuggest/__tests__/autosuggest.test.tsx b/npm/packages/autosuggest/src/components/autosuggest/__tests__/autosuggest.test.tsx
@@ -55,4 +55,56 @@ describe('Gitt at Autosuggest skal vises', () => {
       expect(onChangeMock).toHaveBeenCalled();
     });
   });
+
+  describe('Når Autosuggest har en feilmelding', (): void => {
+    test('Så er feilmelding knyttet sammen med inputfeltet', (): void => {
+      render(
+        <Autosuggest
+          label={'Søk'}
+          suggestions={[]}
+          inputProps={{
+            value: '',
+            onChange: onChangeMock,
+          }}
+          onSuggestionsFetchRequested={onSuggestionsFetchRequestedMock}
+          onSuggestionsClearRequested={onSuggestionsClearRequestedMock}
+          onSuggestionSelected={onSuggestionsSelectedMock}
+          errorText="Du må skrive mer enn 3 tegn"
+          errorTextId="errorTextId"
+        />
+      );
+
+      const input = screen.getByLabelText('Søk');
+
+      expect(input).toHaveAccessibleDescription('Du må skrive mer enn 3 tegn');
+    });
+  });
+
+  describe('Når Autosuggest har en feilmelding og aria-describedby', (): void => {
+    test('Så har inputfeltet begge to som description', (): void => {
+      render(
+        <>
+          <div id="customDescription">{'Egen beskrivelse'}</div>
+          <Autosuggest
+            label={'Søk'}
+            suggestions={[]}
+            inputProps={{
+              value: '',
+              onChange: onChangeMock,
+              'aria-describedby': 'customDescription',
+            }}
+            onSuggestionsFetchRequested={onSuggestionsFetchRequestedMock}
+            onSuggestionsClearRequested={onSuggestionsClearRequestedMock}
+            onSuggestionSelected={onSuggestionsSelectedMock}
+            errorText="Du må skrive mer enn 3 tegn"
+            errorTextId="errorTextId"
+          />
+        </>
+      );
+
+      const input = screen.getByLabelText('Søk');
+
+      expect(input).toHaveAccessibleDescription('Egen beskrivelse Du må skrive mer enn 3 tegn');
+    });
+  });
 });
diff --git a/npm/packages/autosuggest/src/components/autosuggest/index.tsx b/npm/packages/autosuggest/src/components/autosuggest/index.tsx
@@ -32,6 +32,8 @@ interface Props<T>
   error?: boolean;
   /** Error text to show above the component */
   errorText?: string;
+  /** Error text to show above the component */
+  errorTextId?: string;
   /** Tilpasset funksjon for å definere markup'en som rendres for en suggestion i suggestionslisten */
   renderSuggestion?: RenderSuggestion<T>;
 }
@@ -52,16 +54,17 @@ const getSuggestionValue = (suggestion: Suggestion): string => (suggestion.label
 
 const Autosuggest: React.FC<Props<Suggestion>> = props => {
   const inputId = useUuid(props.inputProps.id);
+  const errorTextUuid = useUuid(props.errorTextId);
 
   const inputProps: InputProps<Suggestion> = {
     ...props.inputProps,
     id: inputId,
     'aria-invalid': props.error,
-    // @todo inputProps må bruke aria-labeledby error-en slik som i PR i designsystemet
+    'aria-describedby': [props.inputProps['aria-describedby'], errorTextUuid].join(' '),
   };
 
   return (
-    <ErrorWrapper errorText={props.errorText}>
+    <ErrorWrapper errorText={props.errorText} errorTextId={errorTextUuid}>
       <div className={props.className}>
         {renderLabel(props.label, inputId, props.error ? FormMode.oninvalid : FormMode.onwhite)}
         <ReactAutosuggest