Merge pull request #704 from danskernesdigitalebibliotek/revert-701-D…

…DFLSBP-637-add-aria-label-to-advanced-search-dropdown Revert "Added aria-label to the ExpandMoreIcon to reflect dpl-react changes."
danskernesdigitalebibliotek · Aug 13, 2024 · e658bc2 · e658bc2
2 parents 5fac2a5 + 8ef168e
commit e658bc2
Show file tree

Hide file tree

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