Use a native button element instead

diff --git a/com.woltlab.wcf/templates/notificationSettings.tpl b/com.woltlab.wcf/templates/notificationSettings.tpl
index 30357d5aeffadd0e6d4c8dcf10f668112418f454..606394b75e40c4ef9aa711ef51bc5d791f3b0e4c 100644 (file)
--- 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 ef47b47c42ee4b9e9afdf31ad0ac2248d63662a5..84e520e83cef6d93d07f30bd3df78afe33173298 100644 (file)
--- 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 c27c8af7d264024811d757513a991e90730f702f..9774ce04b1272a6550cbeae816fe9b53ad9bf312 100644 (file)
--- 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 838d37b58f87dbf9284c5cea0d3f19ccab9a3a51..155b8da66f1801e6f7558e49956d153888dfe30f 100644 (file)
--- 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 {