🚸 ErrorSummary i UtenlandsPeriodeVelger

navikt · May 28, 2024 · 309d06c · 309d06c
1 parent ec0ca1c
commit 309d06c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/components/input/MonthPickerWrapper/MonthPickerWrapper.tsx b/components/input/MonthPickerWrapper/MonthPickerWrapper.tsx
@@ -35,7 +35,7 @@ export const MonthPickerWrapper = ({
       dropdownCaption={dropdownCaption}
       defaultSelected={selectedDate}
     >
-      <MonthPicker.Input {...inputProps} label={label} error={error} />
+      <MonthPicker.Input {...inputProps} id={id} label={label} error={error} />
     </MonthPicker>
   );
 };
diff --git a/components/input/countryselector/CountrySelector.tsx b/components/input/countryselector/CountrySelector.tsx
@@ -19,13 +19,13 @@ const CountrySelector = ({ name, label, className, onChange, value, error }: Pro
     return Object.entries(countries.getNames('nb', { select: 'official' }))
       .filter((country) => country[0] !== 'NO' && country[0] !== 'SJ')
       .sort(
-        (a, b) => (a[1] > b[1] ? 1 : -1) // Sorterer alfabetisk på navn i stedet for landkode
+        (a, b) => (a[1] > b[1] ? 1 : -1), // Sorterer alfabetisk på navn i stedet for landkode
       );
   }, [countries]);
 
   return (
     <div className={className}>
-      <Select name={name} label={label} onChange={onChange} value={value} error={error}>
+      <Select id={name} name={name} label={label} onChange={onChange} value={value} error={error}>
         {[
           <option key="none" value="none">
             Velg land

diff --git a/components/pageComponents/standard/UtenlandsPeriodeVelger/UtenlandsPeriode.module.css b/components/pageComponents/standard/UtenlandsPeriodeVelger/UtenlandsPeriode.module.css
@@ -19,3 +19,6 @@
 .pidInput input {
   max-width: 8rem;
 }
+.visuallyHidden {
+  composes: visuallyHidden from '/styles/visibility.module.css';
+}
diff --git a/components/pageComponents/standard/UtenlandsPeriodeVelger/UtenlandsPeriodeVelger.tsx b/components/pageComponents/standard/UtenlandsPeriodeVelger/UtenlandsPeriodeVelger.tsx
@@ -5,6 +5,7 @@ import {
   BodyLong,
   BodyShort,
   Button,
+  ErrorSummary,
   Heading,
   HGrid,
   Label,
@@ -160,6 +161,20 @@ const UtenlandsPeriodeVelger = ({
               }
             }}
           >
+            <ErrorSummary
+              heading={formatMessage({ id: 'errorSummary.title' })}
+              aria-hidden={!errors?.length}
+              className={errors?.length ? '' : classes?.visuallyHidden}
+              tabIndex={0}
+            >
+              {errors?.length
+                ? errors.map((error) => (
+                  <ErrorSummary.Item key={error.path} href={`#${error.path}`}>
+                    {error.message}
+                  </ErrorSummary.Item>
+                  ))
+                : 'hidden'}
+            </ErrorSummary>
             <CountrySelector
               className={classes.countrySelector}
               name={'land'}