From d8b42d9b3ff97c3d2e527988dffd51783aa57963 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 23 Aug 2022 16:53:05 +0200
Subject: [PATCH] Use actual icons instead of pseudo elements

---
 com.woltlab.wcf/templates/__menu.tpl          |  3 ++
 .../templates/pageHeaderSearch.tpl            |  9 +++--
 ts/WoltLabSuite/Core/Ui/Search.ts             |  3 ++
 .../files/acp/templates/pageHeaderSearch.tpl  |  4 +--
 .../files/js/WoltLabSuite/Core/Ui/Search.js   |  3 ++
 .../files/style/layout/pageHeader.scss        | 33 +------------------
 6 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/com.woltlab.wcf/templates/__menu.tpl b/com.woltlab.wcf/templates/__menu.tpl
index 5bdd92d00d..0a7af0f291 100644
--- a/com.woltlab.wcf/templates/__menu.tpl
+++ b/com.woltlab.wcf/templates/__menu.tpl
@@ -9,6 +9,9 @@
 					{if $menuItemNode->getOutstandingItems() > 0}
 						<span class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="{lang}wcf.page.menu.outstandingItems{/lang}">{#$menuItemNode->getOutstandingItems()}</span>
 					{/if}
+					{if $menuItemNode->hasChildren()}
+						{icon size=16 name='caret-down' type='solid'}
+					{/if}
 				</a>
 				
 				{if $menuItemNode->hasChildren()}<ol class="boxMenuDepth{@$menuItemNode->getDepth()}">{else}</li>{/if}
diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
index 232db6834e..872c572850 100644
--- a/com.woltlab.wcf/templates/pageHeaderSearch.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
@@ -19,15 +19,18 @@
 
 {event name='settings'}
 
-<a href="#" id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" role="button" tabindex="0" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
+<button id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
 	{icon size=32 name='magnifying-glass'}
-</a>
+</button>
 
 <div id="pageHeaderSearch" class="pageHeaderSearch">
 	<form method="post" action="{link controller='Search'}{/link}">
 		<div id="pageHeaderSearchInputContainer" class="pageHeaderSearchInputContainer">
 			<div class="pageHeaderSearchType dropdown">
-				<a href="#" class="button dropdownToggle" id="pageHeaderSearchTypeSelect"><span class="pageHeaderSearchTypeLabel">{@$__searchTypeLabel}</span></a>
+				<a href="#" class="button dropdownToggle" id="pageHeaderSearchTypeSelect">
+					<span class="pageHeaderSearchTypeLabel">{@$__searchTypeLabel}</span>
+					{icon size=16 name='caret-down' type='solid'}
+				</a>
 				<ul class="dropdownMenu">
 					<li><a href="#" data-extended-link="{link controller='Search'}extended=1{/link}" data-object-type="everywhere">{lang}wcf.search.type.everywhere{/lang}</a></li>
 					<li class="dropdownDivider"></li>
diff --git a/ts/WoltLabSuite/Core/Ui/Search.ts b/ts/WoltLabSuite/Core/Ui/Search.ts
index 0c705bca0d..8552eb5954 100644
--- a/ts/WoltLabSuite/Core/Ui/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search.ts
@@ -89,6 +89,7 @@ function initMobileSearch(): void {
       closeSearch();
 
       searchButton.setAttribute("aria-expanded", "false");
+      searchButton.querySelector("fa-icon")!.setIcon("magnifying-glass");
     } else {
       // iOS Safari behaves unpredictable when the keyboard focus
       // is moved into a HTML element that is inside a parent with
@@ -109,6 +110,7 @@ function initMobileSearch(): void {
       }
 
       searchButton.setAttribute("aria-expanded", "true");
+      searchButton.querySelector("fa-icon")!.setIcon("xmark");
     }
   });
 
@@ -121,6 +123,7 @@ function initMobileSearch(): void {
       closeSearch();
 
       searchButton.setAttribute("aria-expanded", "false");
+      searchButton.querySelector("fa-icon")!.setIcon("magnifying-glass");
     }
   });
 }
diff --git a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
index e132e52e73..8126246e69 100644
--- a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
@@ -1,6 +1,6 @@
-<a href="#" id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" role="button" tabindex="0" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
+<button id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
 	{icon size=32 name='magnifying-glass'}
-</a>
+</button>
 
 <div id="pageHeaderSearch" class="pageHeaderSearch" data-disable-auto-focus="true">
 	<div class="pageHeaderSearchInputContainer">
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
index bd561ab55a..56b03ee12c 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
@@ -78,6 +78,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             if (searchButton.getAttribute("aria-expanded") === "true") {
                 closeSearch();
                 searchButton.setAttribute("aria-expanded", "false");
+                searchButton.querySelector("fa-icon").setIcon("magnifying-glass");
             }
             else {
                 // iOS Safari behaves unpredictable when the keyboard focus
@@ -95,6 +96,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
                     document.body.scrollTop = 0;
                 }
                 searchButton.setAttribute("aria-expanded", "true");
+                searchButton.querySelector("fa-icon").setIcon("xmark");
             }
         });
         _pageHeaderSearch.addEventListener("click", (event) => {
@@ -103,6 +105,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
                 event.preventDefault();
                 closeSearch();
                 searchButton.setAttribute("aria-expanded", "false");
+                searchButton.querySelector("fa-icon").setIcon("magnifying-glass");
             }
         });
     }
diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index a946cbd84c..e92b5db1e7 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -101,19 +101,6 @@
 			> a[aria-expanded="true"] ~ .boxMenuDepth1 {
 				visibility: visible;
 			}
-
-			> a {
-				&::after {
-					content: $fa-var-angle-down;
-					display: block;
-					font-family: "FontAwesome";
-					font-size: 14px;
-					height: 24px;
-					line-height: 24px;
-					margin-left: 5px;
-					width: 10px;
-				}
-			}
 		}
 
 		.boxMenuDepth1 {
@@ -351,20 +338,11 @@
 			color: $wcfHeaderMenuLink;
 			display: flex;
 			max-width: 200px;
-			min-width: 140px;
+			min-width: 130px;
 			padding: 4px 8px;
 			position: relative;
 			text-align: left;
 
-			&::after {
-				color: inherit;
-				content: $fa-var-caret-down;
-				flex: 1;
-				font-family: FontAwesome;
-				margin-left: 10px;
-				text-align: right;
-			}
-
 			> .pageHeaderSearchTypeLabel {
 				flex: 0 auto;
 				overflow: hidden;
@@ -493,15 +471,6 @@
 
 	.pageHeaderSearchMobile {
 		grid-area: search;
-
-		.icon::before {
-			color: $wcfHeaderLink;
-		}
-
-		&[aria-expanded="true"] .icon::before {
-			color: $wcfHeaderLinkActive;
-			content: $fa-var-times;
-		}
 	}
 
 	.userPanel {
-- 
2.20.1