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.
danskernesdigitalebibliotek · Jun 11, 2024 · b3a640b · b3a640b
1 parent d048bca
commit b3a640b
Show file tree

Hide file tree

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