From b3a640b943a6014b06e9e44e65b5e8f984ad1982 Mon Sep 17 00:00:00 2001
From: LasseStaus <l.stausgaard@gmail.com>
Date: Tue, 11 Jun 2024 11:06:00 +0200
Subject: [PATCH] Refactor mobile menu toggler to button

non chromium browsers did not indicate that the the mobile menu button was in focus, unlike the other menu buttons. This was because the other buttons are either link or button elements. This should align that approach which the other buttons and ensure the mobile-menu button is visually indicatin that it is in focus.
---
 src/stories/Blocks/header/Header.tsx  | 26 +++++++++++++-------------
 src/stories/Blocks/header/header.scss |  7 +++++++
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx
index 1514774ef..c1b2d31d4 100644
--- a/src/stories/Blocks/header/Header.tsx
+++ b/src/stories/Blocks/header/Header.tsx
@@ -54,21 +54,21 @@ export const Header = (props: HeaderProps) => {
           >
             <div>
               <div className="header__menu-navigation-mobile">
-                <Pagefold
-                  isInheriting={false}
-                  isAContainer={false}
-                  size="small"
+                <button
+                  id="header-sidebar-nav__toggle"
                   className="header__menu-navigation-button header__button"
-                  compProps={{
-                    id: "header-sidebar-nav__toggle",
-                    "aria-controls": "sidebarNav",
-                    "aria-expanded": "false",
-                    role: "button",
-                    tabIndex: 0,
-                  }}
+                  aria-controls="sidebarNav"
+                  aria-expanded="false"
                 >
-                  <MenuIcon />
-                </Pagefold>
+                  <Pagefold
+                    isInheriting={false}
+                    isAContainer={false}
+                    size="small"
+                    className="header__menu-navigation-pagefold"
+                  >
+                    <MenuIcon />
+                  </Pagefold>
+                </button>
                 <div className="header__menu-navigation-logo">
                   <Logo
                     hasImage
diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss
index 981b2a9e0..bf26fdb48 100644
--- a/src/stories/Blocks/header/header.scss
+++ b/src/stories/Blocks/header/header.scss
@@ -55,6 +55,13 @@
   align-items: center;
   border-right: 1px solid $color__global-tertiary-1;
 }
+.header__menu-navigation-pagefold {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 .header__menu-profile,
 .header__menu-bookmarked {