From 309d06c53b4d128ce64766488af02a826cdc1c46 Mon Sep 17 00:00:00 2001
From: Tor Idland <tor.idland@nav.no>
Date: Tue, 28 May 2024 09:09:38 +0200
Subject: [PATCH] :children_crossing: ErrorSummary i UtenlandsPeriodeVelger

---
 .../MonthPickerWrapper/MonthPickerWrapper.tsx     |  2 +-
 .../input/countryselector/CountrySelector.tsx     |  4 ++--
 .../UtenlandsPeriode.module.css                   |  3 +++
 .../UtenlandsPeriodeVelger.tsx                    | 15 +++++++++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/components/input/MonthPickerWrapper/MonthPickerWrapper.tsx b/components/input/MonthPickerWrapper/MonthPickerWrapper.tsx
index 7020836c..44e9529e 100644
--- 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
index b693daf9..7ddbcf1f 100644
--- 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
index 7d9b87d3..b285b03b 100644
--- 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
index e4080500..88ddbdf6 100644
--- 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'}