From 8d8eda0cd4d2039abc06c20c0cdff2b35abd8c7a Mon Sep 17 00:00:00 2001
From: Peter Hellstrand <peter.hellstrand@sparebank1.no>
Date: Tue, 6 Aug 2024 11:42:49 +0200
Subject: [PATCH 1/3] docs(component-overview): fixed outdated DatePicker
 examples

---
 .../datepicker/Datepicker-birthdate.jsx       | 13 ++++---
 .../datepicker/Datepicker-calendarAbove.jsx   | 23 +++++------
 .../examples/datepicker/Datepicker-en.jsx     | 21 +++++-----
 .../datepicker/Datepicker-fullWidth.jsx       | 23 +++++------
 .../datepicker/Datepicker-invalid.jsx         | 23 +++++------
 .../examples/datepicker/Datepicker-nn.jsx     | 21 +++++-----
 .../examples/datepicker/Datepicker-two.jsx    | 39 ++++++++++---------
 .../examples/datepicker/Datepicker.jsx        | 27 ++++++-------
 8 files changed, 99 insertions(+), 91 deletions(-)

diff --git a/component-overview/examples/datepicker/Datepicker-birthdate.jsx b/component-overview/examples/datepicker/Datepicker-birthdate.jsx
index f8310e456f..d033e82e33 100644
--- a/component-overview/examples/datepicker/Datepicker-birthdate.jsx
+++ b/component-overview/examples/datepicker/Datepicker-birthdate.jsx
@@ -1,23 +1,24 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('');
     const now = new Date();
 
-    const maxDate = `${now.getDate()}.${now.getMonth()+1}.${now.getFullYear()}`;
+    const maxDate = `${now.getDate()}.${now.getMonth() + 1}.${now.getFullYear()}`;
 
     return (
-        <>
-            <p>Skriv inn et fødselsdato med tosifret årstal og se om det blir tolket riktig.</p>
+        <InputGroup
+            label="Fødselsdato"
+            description="Skriv inn et fødselsdato med tosifret årstal og se om det blir tolket riktig."
+        >
             <Datepicker
-                inputProps={{ id: 'datepicker-birthday-example' }}
-                label="Fødelsedato"
                 locale="nb"
                 maxDate={maxDate}
                 onChange={setDate}
                 value={date}
             />
-        </>
+        </InputGroup>
     );
 };
diff --git a/component-overview/examples/datepicker/Datepicker-calendarAbove.jsx b/component-overview/examples/datepicker/Datepicker-calendarAbove.jsx
index 32803fbb21..0e3c51a13b 100644
--- a/component-overview/examples/datepicker/Datepicker-calendarAbove.jsx
+++ b/component-overview/examples/datepicker/Datepicker-calendarAbove.jsx
@@ -1,19 +1,20 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            calendarAbove={true}
-            inputProps={{ id: 'datepicker-example-calendar-above' }}
-            label="Velg dato"
-            locale="nb"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Velg dato">
+            <Datepicker
+                calendarAbove={true}
+                locale="nb"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-en.jsx b/component-overview/examples/datepicker/Datepicker-en.jsx
index c431398b69..4dfed9c7c7 100644
--- a/component-overview/examples/datepicker/Datepicker-en.jsx
+++ b/component-overview/examples/datepicker/Datepicker-en.jsx
@@ -1,18 +1,19 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            inputProps={{ id: 'datepicker-example' }}
-            label="Velg dato"
-            locale="en"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Pick date">
+            <Datepicker
+                locale="en"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-fullWidth.jsx b/component-overview/examples/datepicker/Datepicker-fullWidth.jsx
index 9d0c498b85..b6226e531c 100644
--- a/component-overview/examples/datepicker/Datepicker-fullWidth.jsx
+++ b/component-overview/examples/datepicker/Datepicker-fullWidth.jsx
@@ -1,19 +1,20 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            fullWidth={true}
-            inputProps={{ id: 'datepicker-example-full-width' }}
-            label="Velg dato"
-            locale="nb"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Velg dato">
+            <Datepicker
+                fullWidth={true}
+                locale="nb"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-invalid.jsx b/component-overview/examples/datepicker/Datepicker-invalid.jsx
index b1b22d05eb..e766a9d5d9 100644
--- a/component-overview/examples/datepicker/Datepicker-invalid.jsx
+++ b/component-overview/examples/datepicker/Datepicker-invalid.jsx
@@ -1,19 +1,20 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            aria-invalid="true"
-            inputProps={{ id: 'datepicker-example-aria-invalid' }}
-            label="Velg dato"
-            locale="nn"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Velg dato">
+            <Datepicker
+                aria-invalid="true"
+                locale="nn"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-nn.jsx b/component-overview/examples/datepicker/Datepicker-nn.jsx
index f64eeed3da..4fba0d31ec 100644
--- a/component-overview/examples/datepicker/Datepicker-nn.jsx
+++ b/component-overview/examples/datepicker/Datepicker-nn.jsx
@@ -1,18 +1,19 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            inputProps={{ id: 'datepicker-example' }}
-            label="Velg dato"
-            locale="nn"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Velg dato">
+            <Datepicker
+                locale="nn"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-two.jsx b/component-overview/examples/datepicker/Datepicker-two.jsx
index 4ae80b45ad..cb90cf965c 100644
--- a/component-overview/examples/datepicker/Datepicker-two.jsx
+++ b/component-overview/examples/datepicker/Datepicker-two.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
 import { Grid, GridRow, GridCol } from '@sb1/ffe-grid-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date1, setDate1] = useState('01.01.2016');
@@ -10,28 +11,28 @@ import { Grid, GridRow, GridCol } from '@sb1/ffe-grid-react';
         <Grid>
             <GridRow>
                 <GridCol sm="5">
-                    <Datepicker
-                        inputProps={{ id: 'datepicker-1' }}
-                        label="Velg dato"
-                        locale="en"
-                        maxDate="31.12.2016"
-                        minDate="01.01.2016"
-                        onChange={setDate1}
-                        value={date1}
-                    />
+                    <InputGroup label="Velg dato 1">
+                        <Datepicker
+                            locale="en"
+                            maxDate="31.12.2016"
+                            minDate="01.01.2016"
+                            onChange={setDate1}
+                            value={date1}
+                        />
+                    </InputGroup>
                 </GridCol>
                 <GridCol sm="5">
-                    <Datepicker
-                        inputProps={{ id: 'datepicker-2' }}
-                        label="Velg dato"
-                        locale="en"
-                        maxDate="31.12.2016"
-                        minDate="01.01.2016"
-                        onChange={setDate2}
-                        value={date2}
-                    />
+                    <InputGroup label="Velg dato 2">
+                        <Datepicker
+                            locale="en"
+                            maxDate="31.12.2016"
+                            minDate="01.01.2016"
+                            onChange={setDate2}
+                            value={date2}
+                        />
+                    </InputGroup>
                 </GridCol>
             </GridRow>
         </Grid>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker.jsx b/component-overview/examples/datepicker/Datepicker.jsx
index 372f2c99e5..19bde52156 100644
--- a/component-overview/examples/datepicker/Datepicker.jsx
+++ b/component-overview/examples/datepicker/Datepicker.jsx
@@ -1,20 +1,21 @@
-import { useState, useRef } from 'react';
+import { useState, useId } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
-    const innerRef = useRef(date); //Optional ref to the input element
+    const inputId = useId();
 
     return (
-        <Datepicker
-            inputProps={{ id: 'datepicker-example' }}
-            label="Velg dato"
-            locale="nb"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-            innerRef={innerRef}
-        />
+        <InputGroup label="Dato" inputId={inputId}>
+            <Datepicker
+                inputProps={{ id: inputId }}
+                locale="nb"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};

From 9510a9d6e3decf029d1be36975032a496ea5a686 Mon Sep 17 00:00:00 2001
From: Peter Hellstrand <peter.hellstrand@sparebank1.no>
Date: Tue, 6 Aug 2024 11:43:39 +0200
Subject: [PATCH 2/3] fix(ffe-datepicker-react): a11y

---
 .../src/calendar/Calendar.tsx                 |  7 +++--
 .../src/calendar/ClickableDate.spec.tsx       | 28 ++++++++++++-------
 .../src/calendar/Header.tsx                   |  7 ++---
 .../src/calendar/NonClickableDate.tsx         |  3 +-
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/ffe-datepicker-react/src/calendar/Calendar.tsx b/packages/ffe-datepicker-react/src/calendar/Calendar.tsx
index f694685494..22038b18b1 100644
--- a/packages/ffe-datepicker-react/src/calendar/Calendar.tsx
+++ b/packages/ffe-datepicker-react/src/calendar/Calendar.tsx
@@ -261,9 +261,12 @@ export class Calendar extends Component<CalendarProps, State> {
 
         /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
         return (
-            <div role="dialog" aria-modal={true}>
+            <div
+                role="dialog"
+                aria-modal={true}
+                aria-labelledby={`${this.datepickerId}-title`}
+            >
                 <div
-                    aria-labelledby={`${this.datepickerId}-title`}
                     className={this.props.calendarClassName || 'ffe-calendar'}
                     role="application"
                     onKeyDown={this.focusTrap}
diff --git a/packages/ffe-datepicker-react/src/calendar/ClickableDate.spec.tsx b/packages/ffe-datepicker-react/src/calendar/ClickableDate.spec.tsx
index 841cab759f..6eaa629f49 100644
--- a/packages/ffe-datepicker-react/src/calendar/ClickableDate.spec.tsx
+++ b/packages/ffe-datepicker-react/src/calendar/ClickableDate.spec.tsx
@@ -9,16 +9,24 @@ describe('<ClickableDate />', () => {
 
     const dateButtonRef = React.createRef<HTMLTableCellElement>();
     const activeDate = (
-        <ClickableDate
-            calendarButtonState={date as unknown as CalendarButtonState}
-            onClick={() => true}
-            headers="id-to-th-element"
-            locale="nn"
-            month="Mai"
-            year={2016}
-            isFocusingHeader={false}
-            dateButtonRef={dateButtonRef}
-        />
+        <table>
+            <tbody>
+                <tr>
+                    <ClickableDate
+                        calendarButtonState={
+                            date as unknown as CalendarButtonState
+                        }
+                        onClick={() => true}
+                        headers="id-to-th-element"
+                        locale="nn"
+                        month="Mai"
+                        year={2016}
+                        isFocusingHeader={false}
+                        dateButtonRef={dateButtonRef}
+                    />
+                </tr>
+            </tbody>
+        </table>
     );
 
     it('should render an button with active date', () => {
diff --git a/packages/ffe-datepicker-react/src/calendar/Header.tsx b/packages/ffe-datepicker-react/src/calendar/Header.tsx
index b38112cc73..4b525f5ee3 100644
--- a/packages/ffe-datepicker-react/src/calendar/Header.tsx
+++ b/packages/ffe-datepicker-react/src/calendar/Header.tsx
@@ -25,10 +25,7 @@ export const Header: React.FC<HeaderProps> = ({
     nextMonthButtonElement,
 }) => {
     const arrowBackIosIcon =
-        'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0xMjcuMzg0LTQ4MCAzMDEuMzA4IDMwMS4zMDhxMTEuOTIzIDExLjkyMyAxMS42MTUgMjguMDc3LS4zMDggMTYuMTUzLTEyLjIzMSAyOC4wNzYtMTEuOTIyIDExLjkyMy0yOC4wNzYgMTEuOTIzdC0yOC4wNzYtMTEuOTIzTDY1LjA3OC00MjguNzdRNTQuMjMtNDM5LjYxNiA0OS00NTMuMDc3IDQzLjc3LTQ2Ni41MzkgNDMuNzctNDgwcTAtMTMuNDYxIDUuMjMtMjYuOTIzIDUuMjMxLTEzLjQ2MSAxNi4wNzgtMjQuMzA3bDMwNi44NDYtMzA2Ljg0NnExMS45MjItMTEuOTIzIDI4LjM4NC0xMS42MTYgMTYuNDYxLjMwOCAyOC4zODQgMTIuMjMxIDExLjkyMyAxMS45MjMgMTEuOTIzIDI4LjA3NiAwIDE2LjE1NC0xMS45MjMgMjguMDc3TDEyNy4zODQtNDgwWiIvPjwvc3ZnPg==';
-
-    const arrowForwardIosIcon =
-        'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik01OTMuMjMyLTQ4MCAyOTEuOTI0LTc4MS4zMDhxLTExLjkyMy0xMS45MjMtMTEuNjE2LTI4LjM4NC4zMDgtMTYuNDYyIDEyLjIzMS0yOC4zODQgMTEuOTIzLTExLjkyMyAyOC4zODQtMTEuOTIzdDI4LjM4NCAxMS45MjNMNjU1LjUzOC01MzEuMjNxMTAuODQ2IDEwLjg0NiAxNi4wNzcgMjQuMzA3IDUuMjMgMTMuNDYyIDUuMjMgMjYuOTIzIDAgMTMuNDYxLTUuMjMgMjYuOTIzLTUuMjMxIDEzLjQ2MS0xNi4wNzcgMjQuMzA3TDM0OC42OTItMTIxLjkyNHEtMTEuOTIzIDExLjkyMy0yOC4wNzcgMTEuNjE2LTE2LjE1My0uMzA4LTI4LjA3Ni0xMi4yMzEtMTEuOTIzLTExLjkyMy0xMS45MjMtMjguMzg0dDExLjkyMy0yOC4zODRMNTkzLjIzMi00ODBaIi8+PC9zdmc+';
+        'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0zNjcuMzg0LTQ4MCAzMDEuMzA4IDMwMS4zMDhxMTEuOTIzIDExLjkyMyAxMS42MTUgMjguMDc3LS4zMDggMTYuMTUzLTEyLjIzMSAyOC4wNzYtMTEuOTIyIDExLjkyMy0yOC4wNzYgMTEuOTIzdC0yOC4wNzYtMTEuOTIzTDMwNS4wNzgtNDI4Ljc3cS0xMC44NDctMTAuODQ2LTE2LjA3Ny0yNC4zMDctNS4yMzEtMTMuNDYyLTUuMjMxLTI2LjkyMyAwLTEzLjQ2MSA1LjIzMS0yNi45MjMgNS4yMy0xMy40NjEgMTYuMDc3LTI0LjMwN2wzMDYuODQ2LTMwNi44NDZxMTEuOTIyLTExLjkyMyAyOC4zODQtMTEuNjE2IDE2LjQ2MS4zMDggMjguMzg0IDEyLjIzMSAxMS45MjMgMTEuOTIzIDExLjkyMyAyOC4wNzYgMCAxNi4xNTQtMTEuOTIzIDI4LjA3N0wzNjcuMzg0LTQ4MFoiLz48L3N2Zz4=';
 
     return (
         <div className="ffe-calendar__header">
@@ -66,7 +63,7 @@ export const Header: React.FC<HeaderProps> = ({
                     tabIndex={-1}
                 >
                     <Icon
-                        fileUrl={arrowForwardIosIcon}
+                        fileUrl={arrowBackIosIcon}
                         size="md"
                         className="ffe-calendar__icon-next"
                     />
diff --git a/packages/ffe-datepicker-react/src/calendar/NonClickableDate.tsx b/packages/ffe-datepicker-react/src/calendar/NonClickableDate.tsx
index 145958d1b1..054682a620 100644
--- a/packages/ffe-datepicker-react/src/calendar/NonClickableDate.tsx
+++ b/packages/ffe-datepicker-react/src/calendar/NonClickableDate.tsx
@@ -9,8 +9,7 @@ interface Props {
 export const NonClickableDate: React.FC<Props> = ({ date }) => {
     return (
         <td
-            aria-disabled="true"
-            aria-current="false"
+            aria-hidden={true}
             className="ffe-calendar__day"
             key={date.timestamp}
             role="button"

From 61aa94276b21ccfa811f59156a8cc48d3de4b207 Mon Sep 17 00:00:00 2001
From: Peter Hellstrand <peter.hellstrand@sparebank1.no>
Date: Tue, 6 Aug 2024 11:44:04 +0200
Subject: [PATCH 3/3] fix(ffe-datepicker): icons colors and text contrast

---
 packages/ffe-datepicker/less/calendar.less  | 34 +++++++++++----------
 packages/ffe-datepicker/less/dateinput.less | 17 +++++++----
 packages/ffe-datepicker/less/theme.less     |  2 +-
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/packages/ffe-datepicker/less/calendar.less b/packages/ffe-datepicker/less/calendar.less
index b9ab47f20a..36bb6986e3 100644
--- a/packages/ffe-datepicker/less/calendar.less
+++ b/packages/ffe-datepicker/less/calendar.less
@@ -31,6 +31,12 @@
         width: 100%;
     }
 
+    &__header-inner-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
     &__month {
         padding-right: var(--ffe-spacing-xs);
     }
@@ -41,37 +47,32 @@
         cursor: pointer;
         outline: none;
         border-radius: 4px;
+        display: grid;
+        place-items: center;
 
         &:focus,
         &:active {
-            box-shadow: 0 0 0 2px var(--ffe-v-datepicker-bg-color),
+            box-shadow:
+                0 0 0 2px var(--ffe-v-datepicker-bg-color),
                 0 0 0 4px var(--ffe-v-datepicker-border-hover-color);
         }
 
         @media (hover: hover) and (pointer: fine) {
             &:hover {
-                box-shadow: 0 0 0 2px var(--ffe-v-datepicker-bg-color),
+                box-shadow:
+                    0 0 0 2px var(--ffe-v-datepicker-bg-color),
                     0 0 0 4px var(--ffe-v-datepicker-border-hover-color);
             }
         }
     }
 
-    &__icon-prev,
-    &__icon-next {
+    &__icon-prev.ffe-icons,
+    &__icon-next.ffe-icons {
         color: var(--ffe-v-datepicker-icon-color);
     }
 
-    &__next,
-    &__previous {
-        height: 1.5625rem;
-        aspect-ratio: 1;
-    }
-
-    &__month-nav-icon {
-        display: block;
-        height: 2em;
-        width: 2em;
-        fill: var(--ffe-v-datepicker-icon-color);
+    &__icon-next {
+        transform: rotate(180deg);
     }
 
     &__title {
@@ -162,7 +163,8 @@
         }
 
         &--focus&--selected {
-            box-shadow: 0 0 0 2px var(--ffe-v-datepicker-bg-color),
+            box-shadow:
+                0 0 0 2px var(--ffe-v-datepicker-bg-color),
                 0 0 0 4px var(--ffe-v-datepicker-border-hover-color);
         }
 
diff --git a/packages/ffe-datepicker/less/dateinput.less b/packages/ffe-datepicker/less/dateinput.less
index 16efc5400a..3ed4e73ed3 100644
--- a/packages/ffe-datepicker/less/dateinput.less
+++ b/packages/ffe-datepicker/less/dateinput.less
@@ -24,6 +24,15 @@
             border-color: var(--ffe-g-error-color);
             border-style: solid;
         }
+
+        @media (hover: hover) and (pointer: fine) {
+            /* stylelint-disable selector-max-specificity */
+            &:focus + .ffe-datepicker__button:hover {
+                border-color: transparent;
+                box-shadow: 0 0 0 2px var(--ffe-v-datepicker-border-hover-color);
+            }
+            /* stylelint-enable selector-max-specificity */
+        }
     }
 }
 
@@ -61,20 +70,16 @@
             &:hover {
                 border-color: var(--ffe-v-datepicker-border-hover-color);
             }
-            .ffe-dateinput__field:focus + &:hover {
-                border-color: transparent;
-                box-shadow: 0 0 0 2px var(--ffe-v-datepicker-border-hover-color);
-            }
         }
     }
 
-    &__icon {
+    &__icon.ffe-icons {
         vertical-align: middle;
         color: var(--ffe-v-datepicker-icon-color);
         transition: color var(--ffe-transition-duration) var(--ffe-ease);
 
         @media (hover: hover) and (pointer: fine) {
-            .ffe-datepicker__button:hover & {
+            &:hover {
                 color: var(--ffe-v-datepicker-icon-color-hover);
             }
         }
diff --git a/packages/ffe-datepicker/less/theme.less b/packages/ffe-datepicker/less/theme.less
index e820032142..aaf7617f0b 100644
--- a/packages/ffe-datepicker/less/theme.less
+++ b/packages/ffe-datepicker/less/theme.less
@@ -5,7 +5,7 @@
     --ffe-v-datepicker-icon-color: var(--ffe-g-primary-color);
     --ffe-v-datepicker-icon-color-hover: var(--ffe-g-secondary-color);
     --ffe-v-datepicker-title-color: var(--ffe-farge-svart);
-    --ffe-v-datepicker-weekday-color: var(--ffe-farge-varmgraa);
+    --ffe-v-datepicker-weekday-color: var(--ffe-farge-moerkgraa);
     --ffe-v-datepicker-weekday-border-color: var(--ffe-farge-lysgraa);
     --ffe-v-datepicker-date-color: var(--ffe-g-text-color);
     --ffe-v-datepicker-date-color-today: var(--ffe-farge-varmgraa);