Make use of the native `button` element

diff --git a/ts/WoltLabSuite/Core/Bbcode/Code.ts b/ts/WoltLabSuite/Core/Bbcode/Code.ts
index f8d15479429550a1caa4cc594c3adfb518cc8585..72c4877fa985dd94f1128d41febdc7fab3ed6428 100644 (file)
--- a/ts/WoltLabSuite/Core/Bbcode/Code.ts
+++ b/ts/WoltLabSuite/Core/Bbcode/Code.ts
@@ -60,9 +60,7 @@ class Code {
       return;
     }
 
-    const button = document.createElement("span");
-    button.tabIndex = 0;
-    button.setAttribute("role", "button");
+    const button = document.createElement("button");
     button.className = "icon icon24 fa-files-o pointer jsTooltip";
     button.setAttribute("title", Language.get("wcf.message.bbcode.code.copy"));
 
@@ -71,15 +69,8 @@ class Code {
 
       UiNotification.show(Language.get("wcf.message.bbcode.code.copy.success"));
     };
-    button.addEventListener("click", clickCallback);
-    button.addEventListener("keydown", (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-
-        void clickCallback();
-      }
-    });
-
+    button.addEventListener("click", () => clickCallback());
+    
     header.appendChild(button);
   }
 

diff --git a/ts/WoltLabSuite/Core/Date/Picker.ts b/ts/WoltLabSuite/Core/Date/Picker.ts
index 1fb42456cd51e5055bb9ac70d0f504efa3c9808a..fbe365626f630784dabbdb75166f928b8829935b 100644 (file)
--- a/ts/WoltLabSuite/Core/Date/Picker.ts
+++ b/ts/WoltLabSuite/Core/Date/Picker.ts
@@ -31,8 +31,8 @@ let _dateGrid: HTMLUListElement;
 let _dateHour: HTMLSelectElement;
 let _dateMinute: HTMLSelectElement;
 let _dateMonth: HTMLSelectElement;
-let _dateMonthNext: HTMLAnchorElement;
-let _dateMonthPrevious: HTMLAnchorElement;
+let _dateMonthNext: HTMLButtonElement;
+let _dateMonthPrevious: HTMLButtonElement;
 let _dateTime: HTMLElement;
 let _dateYear: HTMLSelectElement;
 let _datePicker: HTMLElement | null = null;
@@ -54,15 +54,12 @@ function createPicker() {
   const header = document.createElement("header");
   _datePicker.appendChild(header);
 
-  _dateMonthPrevious = document.createElement("a");
+  _dateMonthPrevious = document.createElement("button");
   _dateMonthPrevious.className = "previous jsTooltip";
-  _dateMonthPrevious.href = "#";
-  _dateMonthPrevious.setAttribute("role", "button");
-  _dateMonthPrevious.tabIndex = 0;
   _dateMonthPrevious.title = Language.get("wcf.date.datePicker.previousMonth");
   _dateMonthPrevious.setAttribute("aria-label", Language.get("wcf.date.datePicker.previousMonth"));
   _dateMonthPrevious.innerHTML = '<span class="icon icon16 fa-arrow-left"></span>';
-  _dateMonthPrevious.addEventListener("click", (ev) => DatePicker.previousMonth(ev));
+  _dateMonthPrevious.addEventListener("click", () => DatePicker.previousMonth());
   header.appendChild(_dateMonthPrevious);
 
   const monthYearContainer = document.createElement("span");
@@ -89,15 +86,12 @@ function createPicker() {
   _dateYear.addEventListener("change", changeYear);
   monthYearContainer.appendChild(_dateYear);
 
-  _dateMonthNext = document.createElement("a");
+  _dateMonthNext = document.createElement("button");
   _dateMonthNext.className = "next jsTooltip";
-  _dateMonthNext.href = "#";
-  _dateMonthNext.setAttribute("role", "button");
-  _dateMonthNext.tabIndex = 0;
   _dateMonthNext.title = Language.get("wcf.date.datePicker.nextMonth");
   _dateMonthNext.setAttribute("aria-label", Language.get("wcf.date.datePicker.nextMonth"));
   _dateMonthNext.innerHTML = '<span class="icon icon16 fa-arrow-right"></span>';
-  _dateMonthNext.addEventListener("click", (ev) => DatePicker.nextMonth(ev));
+  _dateMonthNext.addEventListener("click", () => DatePicker.nextMonth());
   header.appendChild(_dateMonthNext);
 
   _dateGrid = document.createElement("ul");
@@ -252,9 +246,6 @@ function getDateValue(attributeName: string): Date {
  * Opens the date picker.
  */
 function open(event: MouseEvent): void {
-  event.preventDefault();
-  event.stopPropagation();
-
   createPicker();
 
   const target = event.currentTarget as HTMLInputElement;
@@ -763,11 +754,8 @@ const DatePicker = {
         const container = document.createElement("div");
         container.className = "inputAddon";
 
-        const openButton = document.createElement("a");
+        const openButton = document.createElement("button");
         openButton.className = "inputSuffix button jsTooltip";
-        openButton.href = "#";
-        openButton.setAttribute("role", "button");
-        openButton.tabIndex = 0;
         openButton.title = Language.get("wcf.date.datePicker");
         openButton.setAttribute("aria-label", Language.get("wcf.date.datePicker"));
         openButton.setAttribute("aria-haspopup", "true");
@@ -857,9 +845,7 @@ const DatePicker = {
   /**
    * Shows the previous month.
    */
-  previousMonth(event: MouseEvent): void {
-    event.preventDefault();
-
+  previousMonth(): void {
     if (_dateMonth.value === "0") {
       _dateMonth.value = "11";
       _dateYear.value = (+_dateYear.value - 1).toString();
@@ -873,9 +859,7 @@ const DatePicker = {
   /**
    * Shows the next month.
    */
-  nextMonth(event: MouseEvent): void {
-    event.preventDefault();
-
+  nextMonth(): void {
     if (_dateMonth.value === "11") {
       _dateMonth.value = "0";
       _dateYear.value = (+_dateYear.value + 1).toString();

diff --git a/ts/WoltLabSuite/Core/Ui/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Dialog.ts
index 6b548b888e2951b75bcdcebaed32d28d3fb1f349..824cae472f50da58d237ce800176e32913ef8394 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Dialog.ts
+++ b/ts/WoltLabSuite/Core/Ui/Dialog.ts
@@ -388,14 +388,11 @@ const UiDialog = {
     header.appendChild(title);
 
     if (options.closable) {
-      const closeButton = document.createElement("a");
+      const closeButton = document.createElement("button");
       closeButton.className = "dialogCloseButton jsTooltip";
-      closeButton.href = "#";
-      closeButton.setAttribute("role", "button");
-      closeButton.tabIndex = 0;
       closeButton.title = options.closeButtonLabel;
       closeButton.setAttribute("aria-label", options.closeButtonLabel);
-      closeButton.addEventListener("click", (ev) => this._close(ev));
+      closeButton.addEventListener("click", () => this._close());
       header.appendChild(closeButton);
 
       const span = document.createElement("span");
@@ -724,9 +721,7 @@ const UiDialog = {
   /**
    * Handles clicks on the close button or the backdrop if enabled.
    */
-  _close(event: MouseEvent): boolean {
-    event.preventDefault();
-
+  _close(): boolean {
     const data = _dialogs.get(_activeDialog!);
     if (data === undefined) {
       // Closing the dialog while it is already being closed
@@ -760,7 +755,9 @@ const UiDialog = {
     }
 
     if (Core.stringToBool(_container.getAttribute("close-on-click"))) {
-      this._close(event);
+      event.preventDefault();
+
+      this._close();
     } else {
       event.preventDefault();
     }

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
index ffd827d66bf5526e429030604bcf92306dca183d..8c38f4ff1c607783002699cb2566df5576650bd3 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
@@ -221,10 +221,8 @@ export class PageMenuMain implements PageMenuProvider {
 
       const menuId = DomUtil.getUniqueId();
 
-      const button = document.createElement("a");
+      const button = document.createElement("button");
       button.classList.add("pageMenuMainItemToggle");
-      button.tabIndex = 0;
-      button.setAttribute("role", "button");
       button.setAttribute("aria-expanded", "false");
       button.setAttribute("aria-controls", menuId);
       button.innerHTML = '<span class="icon icon24 fa-angle-down" aria-hidden="true"></span>';
@@ -239,18 +237,9 @@ export class PageMenuMain implements PageMenuProvider {
       list.id = menuId;
       list.hidden = true;
 
-      button.addEventListener("click", (event) => {
-        event.preventDefault();
-
+      button.addEventListener("click", () => {
         this.toggleList(button, list);
       });
-      button.addEventListener("keydown", (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-
-          button.click();
-        }
-      });
 
       list.addEventListener("keydown", (event) => {
         if (event.key === "Escape") {
@@ -267,7 +256,7 @@ export class PageMenuMain implements PageMenuProvider {
     return listItem;
   }
 
-  private toggleList(button: HTMLAnchorElement, list: HTMLUListElement): void {
+  private toggleList(button: HTMLButtonElement, list: HTMLUListElement): void {
     if (list.hidden) {
       button.setAttribute("aria-expanded", "true");
       list.hidden = false;

diff --git a/ts/WoltLabSuite/Core/Ui/Password.ts b/ts/WoltLabSuite/Core/Ui/Password.ts
index 84b87602076eb6389812cd49825930d0a36df287..bb1bf8e36e7fc155d04692d058b02b6bf2b27730 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Password.ts
+++ b/ts/WoltLabSuite/Core/Ui/Password.ts
@@ -35,11 +35,9 @@ function initElement(input: HTMLInputElement): void {
   input.insertAdjacentElement("beforebegin", inputAddon);
   inputAddon.appendChild(input);
 
-  const button = document.createElement("span");
+  const button = document.createElement("button");
   button.title = Language.get("wcf.global.form.password.button.show");
   button.classList.add("button", "inputSuffix", "jsTooltip");
-  button.setAttribute("role", "button");
-  button.tabIndex = 0;
   button.setAttribute("aria-hidden", "true");
   inputAddon.appendChild(button);
 
@@ -50,12 +48,6 @@ function initElement(input: HTMLInputElement): void {
   button.addEventListener("click", () => {
     toggle(input, button, icon);
   });
-  button.addEventListener("keydown", (event) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      toggle(input, button, icon);
-    }
-  });
 
   // Hide the password when the form is being submitted to prevent
   // it from being stored within the web browser's autocomplete list.

diff --git a/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts b/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts
index 5a98a71c34fdb9a92f061b1cdfb41c0091f3803d..1bf67b01da8f1a97a2a16c94af2806629765fe47 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts
+++ b/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts
@@ -157,20 +157,16 @@ class UiPollEditor {
     pollOptionInput.appendChild(sortHandle);
 
     // buttons
-    const addButton = document.createElement("a");
-    listItem.setAttribute("role", "button");
-    listItem.setAttribute("href", "#");
+    const addButton = document.createElement("button");
     addButton.classList.add("icon", "icon16", "fa-plus", "jsTooltip", "jsAddOption", "pointer");
     addButton.setAttribute("title", Language.get("wcf.poll.button.addOption"));
     addButton.addEventListener("click", () => this.createOption());
     pollOptionInput.appendChild(addButton);
 
-    const deleteButton = document.createElement("a");
-    deleteButton.setAttribute("role", "button");
-    deleteButton.setAttribute("href", "#");
+    const deleteButton = document.createElement("button");
     deleteButton.classList.add("icon", "icon16", "fa-times", "jsTooltip", "jsDeleteOption", "pointer");
     deleteButton.setAttribute("title", Language.get("wcf.poll.button.removeOption"));
-    deleteButton.addEventListener("click", (ev) => this.removeOption(ev));
+    deleteButton.addEventListener("click", () => this.removeOption(deleteButton));
     pollOptionInput.appendChild(deleteButton);
 
     // input field
@@ -253,10 +249,7 @@ class UiPollEditor {
   /**
    * Removes a poll option after clicking on its deletion button.
    */
-  private removeOption(event: Event): void {
-    event.preventDefault();
-
-    const button = event.currentTarget as HTMLSpanElement;
+  private removeOption(button: HTMLButtonElement): void {
     button.closest("li")!.remove();
 
     this.optionCount--;

diff --git a/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts b/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts
index 2d233c05d32602d4471fff6257b85c99b18a52a4..7fb725d35277cea57f4fb1ca68b2e2a145f2b535 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts
+++ b/ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts
@@ -174,7 +174,7 @@ class UiReactionHandler {
       this._toggleReactPopover(elementData.objectId, elementData.reactButton!, ev);
     });
     elementData.reactButton.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
+      if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
 
         this._toggleReactPopover(elementData.objectId, elementData.reactButton!, null);

diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
index 00e04d2c37841ab9697c074253ec0e6151a9b070..be9b9b6285a8b43225693ef35ab95a2c42555e68 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
@@ -165,9 +165,9 @@ export class UserMenuView {
       </div>
       <div class="userMenuItemMeta"></div>
       <div class="userMenuItemUnread">
-        <a href="#" class="userMenuItemMarkAsRead" role="button">
+        <button class="userMenuItemMarkAsRead">
           <span class="icon icon24 fa-check jsTooltip" title="${Language.get("wcf.global.button.markAsRead")}"></span>
-        </a>
+        </button>
       </div>
     `;
 
@@ -175,9 +175,7 @@ export class UserMenuView {
     element.querySelector(".userMenuItemMeta")!.append(time);
 
     const markAsRead = element.querySelector(".userMenuItemMarkAsRead")!;
-    markAsRead.addEventListener("click", async (event) => {
-      event.preventDefault();
-
+    markAsRead.addEventListener("click", async () => {
       await this.provider.markAsRead(itemData.objectId);
 
       this.markAsRead(element);

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
index b42f4b792a5085fead356c36c589e4e41ab91aad..e34724427a0cd7b68d341e364621e22935beaf3e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
@@ -46,22 +46,14 @@ define(["require", "exports", "tslib", "../Language", "../Clipboard", "../Ui/Not
             if (!header) {
                 return;
             }
-            const button = document.createElement("span");
-            button.tabIndex = 0;
-            button.setAttribute("role", "button");
+            const button = document.createElement("button");
             button.className = "icon icon24 fa-files-o pointer jsTooltip";
             button.setAttribute("title", Language.get("wcf.message.bbcode.code.copy"));
             const clickCallback = async () => {
                 await Clipboard.copyElementTextToClipboard(this.codeContainer);
                 UiNotification.show(Language.get("wcf.message.bbcode.code.copy.success"));
             };
-            button.addEventListener("click", clickCallback);
-            button.addEventListener("keydown", (event) => {
-                if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    void clickCallback();
-                }
-            });
+            button.addEventListener("click", () => clickCallback());
             header.appendChild(button);
         }
         async highlight() {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
index aea1cfea30c168d02e2e1ee925eb6207c272df3d..f07e22ce58caaec5ce0a8a4fbd97c3267439e20c 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
@@ -47,15 +47,12 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
         });
         const header = document.createElement("header");
         _datePicker.appendChild(header);
-        _dateMonthPrevious = document.createElement("a");
+        _dateMonthPrevious = document.createElement("button");
         _dateMonthPrevious.className = "previous jsTooltip";
-        _dateMonthPrevious.href = "#";
-        _dateMonthPrevious.setAttribute("role", "button");
-        _dateMonthPrevious.tabIndex = 0;
         _dateMonthPrevious.title = Language.get("wcf.date.datePicker.previousMonth");
         _dateMonthPrevious.setAttribute("aria-label", Language.get("wcf.date.datePicker.previousMonth"));
         _dateMonthPrevious.innerHTML = '<span class="icon icon16 fa-arrow-left"></span>';
-        _dateMonthPrevious.addEventListener("click", (ev) => DatePicker.previousMonth(ev));
+        _dateMonthPrevious.addEventListener("click", () => DatePicker.previousMonth());
         header.appendChild(_dateMonthPrevious);
         const monthYearContainer = document.createElement("span");
         header.appendChild(monthYearContainer);
@@ -77,15 +74,12 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
         _dateYear.setAttribute("aria-label", Language.get("wcf.date.datePicker.year"));
         _dateYear.addEventListener("change", changeYear);
         monthYearContainer.appendChild(_dateYear);
-        _dateMonthNext = document.createElement("a");
+        _dateMonthNext = document.createElement("button");
         _dateMonthNext.className = "next jsTooltip";
-        _dateMonthNext.href = "#";
-        _dateMonthNext.setAttribute("role", "button");
-        _dateMonthNext.tabIndex = 0;
         _dateMonthNext.title = Language.get("wcf.date.datePicker.nextMonth");
         _dateMonthNext.setAttribute("aria-label", Language.get("wcf.date.datePicker.nextMonth"));
         _dateMonthNext.innerHTML = '<span class="icon icon16 fa-arrow-right"></span>';
-        _dateMonthNext.addEventListener("click", (ev) => DatePicker.nextMonth(ev));
+        _dateMonthNext.addEventListener("click", () => DatePicker.nextMonth());
         header.appendChild(_dateMonthNext);
         _dateGrid = document.createElement("ul");
         _datePicker.appendChild(_dateGrid);
@@ -213,8 +207,6 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
      * Opens the date picker.
      */
     function open(event) {
-        event.preventDefault();
-        event.stopPropagation();
         createPicker();
         const target = event.currentTarget;
         const input = target.nodeName === "INPUT" ? target : target.previousElementSibling;
@@ -632,11 +624,8 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
                 // create input addon
                 const container = document.createElement("div");
                 container.className = "inputAddon";
-                const openButton = document.createElement("a");
+                const openButton = document.createElement("button");
                 openButton.className = "inputSuffix button jsTooltip";
-                openButton.href = "#";
-                openButton.setAttribute("role", "button");
-                openButton.tabIndex = 0;
                 openButton.title = Language.get("wcf.date.datePicker");
                 openButton.setAttribute("aria-label", Language.get("wcf.date.datePicker"));
                 openButton.setAttribute("aria-haspopup", "true");
@@ -713,8 +702,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
         /**
          * Shows the previous month.
          */
-        previousMonth(event) {
-            event.preventDefault();
+        previousMonth() {
             if (_dateMonth.value === "0") {
                 _dateMonth.value = "11";
                 _dateYear.value = (+_dateYear.value - 1).toString();
@@ -727,8 +715,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
         /**
          * Shows the next month.
          */
-        nextMonth(event) {
-            event.preventDefault();
+        nextMonth() {
             if (_dateMonth.value === "11") {
                 _dateMonth.value = "0";
                 _dateYear.value = (+_dateYear.value + 1).toString();

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index 3944bbc6a54d6e8ce1ef85caf35f3a9a7bd944a0..70317f3da6dea4be0aefd8854702db8fe72a58b5 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -318,14 +318,11 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S
             title.id = titleId;
             header.appendChild(title);
             if (options.closable) {
-                const closeButton = document.createElement("a");
+                const closeButton = document.createElement("button");
                 closeButton.className = "dialogCloseButton jsTooltip";
-                closeButton.href = "#";
-                closeButton.setAttribute("role", "button");
-                closeButton.tabIndex = 0;
                 closeButton.title = options.closeButtonLabel;
                 closeButton.setAttribute("aria-label", options.closeButtonLabel);
-                closeButton.addEventListener("click", (ev) => this._close(ev));
+                closeButton.addEventListener("click", () => this._close());
                 header.appendChild(closeButton);
                 const span = document.createElement("span");
                 span.className = "icon icon24 fa-times";
@@ -596,8 +593,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S
         /**
          * Handles clicks on the close button or the backdrop if enabled.
          */
-        _close(event) {
-            event.preventDefault();
+        _close() {
             const data = _dialogs.get(_activeDialog);
             if (data === undefined) {
                 // Closing the dialog while it is already being closed
@@ -624,7 +620,8 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S
                 return;
             }
             if (Core.stringToBool(_container.getAttribute("close-on-click"))) {
-                this._close(event);
+                event.preventDefault();
+                this._close();
             }
             else {
                 event.preventDefault();

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
index 3e050ab6604f887978c3fa3ce4c713bc12238851..ae04195364ca8c9ebe1856225d67e52b1d470345 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
@@ -169,10 +169,8 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
             if (menuItem.children.length) {
                 listItem.classList.add("pageMenuMainItemExpandable");
                 const menuId = Util_1.default.getUniqueId();
-                const button = document.createElement("a");
+                const button = document.createElement("button");
                 button.classList.add("pageMenuMainItemToggle");
-                button.tabIndex = 0;
-                button.setAttribute("role", "button");
                 button.setAttribute("aria-expanded", "false");
                 button.setAttribute("aria-controls", menuId);
                 button.innerHTML = '<span class="icon icon24 fa-angle-down" aria-hidden="true"></span>';
@@ -184,16 +182,9 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
                 const list = this.buildMenuItemList(menuItem.children);
                 list.id = menuId;
                 list.hidden = true;
-                button.addEventListener("click", (event) => {
-                    event.preventDefault();
+                button.addEventListener("click", () => {
                     this.toggleList(button, list);
                 });
-                button.addEventListener("keydown", (event) => {
-                    if (event.key === "Enter" || event.key === " ") {
-                        event.preventDefault();
-                        button.click();
-                    }
-                });
                 list.addEventListener("keydown", (event) => {
                     if (event.key === "Escape") {
                         event.preventDefault();

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
index b25ebd24fc0b1cc01ca483425a8532788b91a027..9cf9a622a907c3d3cc3ce40a4472b0e3a6d3067c 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
@@ -33,11 +33,9 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"],
         inputAddon.classList.add("inputAddon");
         input.insertAdjacentElement("beforebegin", inputAddon);
         inputAddon.appendChild(input);
-        const button = document.createElement("span");
+        const button = document.createElement("button");
         button.title = Language.get("wcf.global.form.password.button.show");
         button.classList.add("button", "inputSuffix", "jsTooltip");
-        button.setAttribute("role", "button");
-        button.tabIndex = 0;
         button.setAttribute("aria-hidden", "true");
         inputAddon.appendChild(button);
         const icon = document.createElement("span");
@@ -46,12 +44,6 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"],
         button.addEventListener("click", () => {
             toggle(input, button, icon);
         });
-        button.addEventListener("keydown", (event) => {
-            if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                toggle(input, button, icon);
-            }
-        });
         // Hide the password when the form is being submitted to prevent
         // it from being stored within the web browser's autocomplete list.
         // see https://github.com/WoltLab/WCF/issues/4554

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js
index 31fad3b6544fab382e7b367f5e2f10d99b865b27..a0615545e42c99783824f908c3ddc1c23f842ff1 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js
@@ -88,19 +88,15 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../Sorta
             sortHandle.classList.add("icon", "icon16", "fa-arrows", "sortableNodeHandle");
             pollOptionInput.appendChild(sortHandle);
             // buttons
-            const addButton = document.createElement("a");
-            listItem.setAttribute("role", "button");
-            listItem.setAttribute("href", "#");
+            const addButton = document.createElement("button");
             addButton.classList.add("icon", "icon16", "fa-plus", "jsTooltip", "jsAddOption", "pointer");
             addButton.setAttribute("title", Language.get("wcf.poll.button.addOption"));
             addButton.addEventListener("click", () => this.createOption());
             pollOptionInput.appendChild(addButton);
-            const deleteButton = document.createElement("a");
-            deleteButton.setAttribute("role", "button");
-            deleteButton.setAttribute("href", "#");
+            const deleteButton = document.createElement("button");
             deleteButton.classList.add("icon", "icon16", "fa-times", "jsTooltip", "jsDeleteOption", "pointer");
             deleteButton.setAttribute("title", Language.get("wcf.poll.button.removeOption"));
-            deleteButton.addEventListener("click", (ev) => this.removeOption(ev));
+            deleteButton.addEventListener("click", () => this.removeOption(deleteButton));
             pollOptionInput.appendChild(deleteButton);
             // input field
             const optionInput = document.createElement("input");
@@ -170,9 +166,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../Sorta
         /**
          * Removes a poll option after clicking on its deletion button.
          */
-        removeOption(event) {
-            event.preventDefault();
-            const button = event.currentTarget;
+        removeOption(button) {
             button.closest("li").remove();
             this.optionCount--;
             if (this.optionList.childElementCount === 0) {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
index 547e51f9bd7a371187d397701af6845b28077e39..8db2d1ef63ee7973405c19d53e90d52b8338ccb4 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
@@ -107,7 +107,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Dom/Ch
                 this._toggleReactPopover(elementData.objectId, elementData.reactButton, ev);
             });
             elementData.reactButton.addEventListener("keydown", (event) => {
-                if (event.key === "Enter") {
+                if (event.key === "Enter" || event.key === " ") {
                     event.preventDefault();
                     this._toggleReactPopover(elementData.objectId, elementData.reactButton, null);
                 }

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 b15f0265c5ea8ce8efcdb7f14a301b11b8a41f89..76a5be6b27822b26222de932d573e6b067057f04 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
@@ -132,16 +132,15 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti
       </div>
       <div class="userMenuItemMeta"></div>
       <div class="userMenuItemUnread">
-        <a href="#" class="userMenuItemMarkAsRead" role="button">
+        <button class="userMenuItemMarkAsRead">
           <span class="icon icon24 fa-check jsTooltip" title="${Language.get("wcf.global.button.markAsRead")}"></span>
-        </a>
+        </button>
       </div>
     `;
             const time = (0, Util_1.getTimeElement)(new Date(itemData.time * 1000));
             element.querySelector(".userMenuItemMeta").append(time);
             const markAsRead = element.querySelector(".userMenuItemMarkAsRead");
-            markAsRead.addEventListener("click", async (event) => {
-                event.preventDefault();
+            markAsRead.addEventListener("click", async () => {
                 await this.provider.markAsRead(itemData.objectId);
                 this.markAsRead(element);
             });