From a77cd56ca918781faf384e6a4631cc1c638a98c1 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 12 Aug 2022 21:32:10 +0200
Subject: [PATCH] Use a native button element instead

---
 com.woltlab.wcf/templates/notificationSettings.tpl |  4 ++--
 ts/WoltLabSuite/Core/Ui/User/Menu/View.ts          | 13 ++++++++-----
 .../js/WoltLabSuite/Core/Ui/User/Menu/View.js      | 14 ++++++++------
 wcfsetup/install/files/style/ui/userMenu.scss      |  5 +++++
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/com.woltlab.wcf/templates/notificationSettings.tpl b/com.woltlab.wcf/templates/notificationSettings.tpl
index 30357d5aef..606394b75e 100644
--- a/com.woltlab.wcf/templates/notificationSettings.tpl
+++ b/com.woltlab.wcf/templates/notificationSettings.tpl
@@ -36,7 +36,7 @@
 						<div class="notificationSettingsEmail">
 							{if $event->supportsEmailNotification()}
 								<input type="hidden" id="settings_{$event->eventID}_mailNotificationType" name="settings[{@$event->eventID}][mailNotificationType]" value="{$settings[$event->eventID][mailNotificationType]}">
-								<a href="#" class="notificationSettingsEmailType jsTooltip{if $settings[$event->eventID][enabled]|empty} disabled{/if}" role="button" title="{lang}wcf.user.notification.mailNotificationType.{@$settings[$event->eventID][mailNotificationType]}{/lang}" data-object-id="{@$event->eventID}">
+								<button class="notificationSettingsEmailType jsTooltip{if $settings[$event->eventID][enabled]|empty} disabled{/if}" title="{lang}wcf.user.notification.mailNotificationType.{@$settings[$event->eventID][mailNotificationType]}{/lang}" data-object-id="{@$event->eventID}">
 									<span class="jsIconNotificationSettingsEmailType">
 										{if $settings[$event->eventID][mailNotificationType] === 'none'}
 											{icon size=24 name='xmark' type='solid'}
@@ -47,7 +47,7 @@
 										{/if}
 									</span>
 									{icon size=16 name='caret-down' type='solid'}
-								</a>
+								</button>
 							{/if}
 						</div>
 					</div>
diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
index ef47b47c42..84e520e83c 100644
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
@@ -251,21 +251,24 @@ export class UserMenuView {
   }
 
   private buildButton(button: UserMenuButton): HTMLElement {
-    const link = document.createElement("a");
-    link.setAttribute("role", "button");
+    let link: HTMLAnchorElement | HTMLButtonElement;
+    if (button.link === "#") {
+      link = document.createElement("button");
+    } else {
+      link = document.createElement("a");
+      link.href = button.link;
+    }
+
     link.classList.add("userMenuButton", "jsTooltip");
     link.title = button.title;
     link.innerHTML = button.icon;
 
     if (button.name === "markAllAsRead") {
-      link.href = "#";
       link.addEventListener("click", (event) => {
         event.preventDefault();
 
         void this.markAllAsRead();
       });
-    } else {
-      link.href = button.link;
     }
 
     return link;
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js
index c27c8af7d2..9774ce04b1 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js
@@ -201,21 +201,23 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti
             }
         }
         buildButton(button) {
-            const link = document.createElement("a");
-            link.setAttribute("role", "button");
+            let link;
+            if (button.link === "#") {
+                link = document.createElement("button");
+            }
+            else {
+                link = document.createElement("a");
+                link.href = button.link;
+            }
             link.classList.add("userMenuButton", "jsTooltip");
             link.title = button.title;
             link.innerHTML = button.icon;
             if (button.name === "markAllAsRead") {
-                link.href = "#";
                 link.addEventListener("click", (event) => {
                     event.preventDefault();
                     void this.markAllAsRead();
                 });
             }
-            else {
-                link.href = button.link;
-            }
             return link;
         }
         async markAllAsRead() {
diff --git a/wcfsetup/install/files/style/ui/userMenu.scss b/wcfsetup/install/files/style/ui/userMenu.scss
index 838d37b58f..155b8da66f 100644
--- a/wcfsetup/install/files/style/ui/userMenu.scss
+++ b/wcfsetup/install/files/style/ui/userMenu.scss
@@ -77,10 +77,15 @@
 
 .userMenuButton {
 	align-items: center;
+	color: inherit;
 	display: flex;
 	height: 44px;
 	justify-content: center;
 	width: 44px;
+
+	&:hover {
+		color: inherit;
+	}
 }
 
 html:not(.touch) .userMenuButton {
-- 
2.20.1