From d266b86e12d100c8ca45e7116c2f8bb56b10a691 Mon Sep 17 00:00:00 2001
From: Sampo Tawast <5328394+sirtawast@users.noreply.github.com>
Date: Fri, 6 Sep 2024 14:51:33 +0300
Subject: [PATCH] fix: change outer <a> to <button> to avoid having <a> inside
 <a> (#3287)

---
 .../handler/src/components/header/Header.sc.ts     | 12 ++++++++++--
 .../src/components/header/HeaderNotifier.tsx       | 14 +++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/benefit/handler/src/components/header/Header.sc.ts b/frontend/benefit/handler/src/components/header/Header.sc.ts
index c61dede622..6ae582a8d8 100644
--- a/frontend/benefit/handler/src/components/header/Header.sc.ts
+++ b/frontend/benefit/handler/src/components/header/Header.sc.ts
@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import BaseHeader from 'shared/components/header/Header';
 import { respondAbovePx } from 'shared/styles/mediaQueries';
 import styled from 'styled-components';
@@ -147,18 +146,27 @@ export const $Box = styled.div<$BoxProps>`
   }
 `;
 
-export const $ApplicationWithMessages = styled(Link)`
+export const $ApplicationWithMessages = styled.button`
   text-decoration: none;
   color: #222;
   display: flex;
   align-items: center;
   padding: 0.75rem 1rem 0.75rem 1rem;
   cursor: pointer;
+  appearance: none;
+  line-height: normal;
+  border: 0;
+  text-align: left;
+  width: 100%;
+  background: transparent;
 
   div {
     margin-right: 1rem;
     hyphens: auto;
     max-width: 130px;
+    &:hover {
+      background: ${(props) => props.theme.colors.black10};
+    }
 
     &:first-child {
       width: 90px;
diff --git a/frontend/benefit/handler/src/components/header/HeaderNotifier.tsx b/frontend/benefit/handler/src/components/header/HeaderNotifier.tsx
index 87c62bc5f4..27f7d009e8 100644
--- a/frontend/benefit/handler/src/components/header/HeaderNotifier.tsx
+++ b/frontend/benefit/handler/src/components/header/HeaderNotifier.tsx
@@ -1,5 +1,7 @@
+import { ROUTES } from 'benefit/handler/constants';
 import useApplicationMessagesQuery from 'benefit/handler/hooks/useApplicationsWithMessagesQuery';
 import { IconAngleRight, IconBell } from 'hds-react';
+import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import * as React from 'react';
 
@@ -20,6 +22,13 @@ const Header: React.FC = () => {
     setMessageCenterActive(!messageCenterActive);
   };
 
+  const router = useRouter();
+
+  const handleMessageItemClick = (id: string): void => {
+    setMessageCenterActive(false);
+    void router.push(`${ROUTES.APPLICATION}?id=${String(id)}&openDrawer=1`);
+  };
+
   return (
     <$HeaderNotifier
       $enabled={applicationsWithMessages?.length > 0}
@@ -35,10 +44,9 @@ const Header: React.FC = () => {
         <h2>{t('common:header.messages')}</h2>
         <ul>
           {applicationsWithMessages.map((application) => (
-            <li>
+            <li key={application.id}>
               <$ApplicationWithMessages
-                onClick={() => setMessageCenterActive(false)}
-                href={`/application?id=${String(application.id)}&openDrawer=1`}
+                onClick={() => handleMessageItemClick(application.id)}
               >
                 <div>
                   <strong>Hakemus {application.application_number}</strong>