From 8ef168ef0d2c5bdf3a364b12de4ac337174194a8 Mon Sep 17 00:00:00 2001
From: Andreas Nielsen <dresse.nielsen@gmail.com>
Date: Mon, 12 Aug 2024 09:46:55 +0200
Subject: [PATCH] Revert "Added aria-label to the ExpandMoreIcon to reflect
 dpl-react changes."

---
 src/stories/Blocks/header/Header.tsx  | 32 ++++++++++-----------------
 src/stories/Blocks/header/header.scss |  7 ++++++
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx
index 0df33a7ca..c1b2d31d4 100644
--- a/src/stories/Blocks/header/Header.tsx
+++ b/src/stories/Blocks/header/Header.tsx
@@ -3,6 +3,8 @@ import clsx from "clsx";
 import Logo from "../../Library/logo/Logo";
 import MenuItemList from "../../Library/header-menu-list/HeaderMenuList";
 import { menuItems } from "../../Library/header-menu-list/HeaderMenuListData";
+import { ReactComponent as SearchIcon } from "../../../public/icons/basic/icon-search.svg";
+import { ReactComponent as ExpandMoreIcon } from "../../../public/icons/collection/ExpandMore.svg";
 import { ReactComponent as MenuIcon } from "../../../public/icons/basic/icon-menu.svg";
 import { ReactComponent as ProfileIcon } from "../../../public/icons/basic/icon-profile.svg";
 import { ReactComponent as HeartIcon } from "../../../public/icons/basic/icon-heart.svg";
@@ -99,30 +101,20 @@ export const Header = (props: HeaderProps) => {
           </nav>
           <div>
             <div className="header__menu-search">
-              <input
-                className="header__menu-search-input text-body-medium-regular"
-                type="text"
-                placeholder={inputPlaceholder}
-              />
-              <input
-                type="image"
-                src="icons/basic/icon-search.svg"
-                alt="search-button"
-                className="header__menu-search-icon"
-              />
-              <button
-                type="button"
+              <form className="header__menu-search-form">
+                <input
+                  className="header__menu-search-input text-body-medium-regular"
+                  type="text"
+                  placeholder={inputPlaceholder}
+                />
+                <SearchIcon className="header__menu-search-icon" />
+              </form>
+              <ExpandMoreIcon
                 className={clsx("header__menu-dropdown-icon", {
                   "header__menu-dropdown-icon--expanded": isDropdownOpen,
                 })}
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                tabIndex={0}
-                aria-label="dropdown with advanced search"
-                aria-expanded={isDropdownOpen}
-                aria-controls="search-header-dropdown"
-              >
-                <img src="icons/collection/ExpandMore.svg" alt="" />
-              </button>
+              />
               {isDropdownOpen && (
                 <div className="header__menu-dropdown">
                   <ul>
diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss
index 68d77ee5f..bf26fdb48 100644
--- a/src/stories/Blocks/header/header.scss
+++ b/src/stories/Blocks/header/header.scss
@@ -134,6 +134,13 @@
   }
 }
 
+.header__menu-search-form {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
 .header__menu-search-icon {
   position: absolute;
   right: $s-3xl;