fix: change outer <a> to <button> to avoid having <a> inside <a> (#3287)

City-of-Helsinki · Sep 6, 2024 · d266b86 · d266b86
1 parent 6a6100d
commit d266b86
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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>