From 65a6671248482add61c607ab3cbb6448d94a8e1b Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 8 Jun 2022 19:10:14 +0200 Subject: [PATCH] Make use of the native `button` element --- ts/WoltLabSuite/Core/Bbcode/Code.ts | 15 ++------ ts/WoltLabSuite/Core/Date/Picker.ts | 34 +++++-------------- ts/WoltLabSuite/Core/Ui/Dialog.ts | 15 ++++---- ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts | 17 ++-------- ts/WoltLabSuite/Core/Ui/Password.ts | 10 +----- ts/WoltLabSuite/Core/Ui/Poll/Editor.ts | 15 +++----- ts/WoltLabSuite/Core/Ui/Reaction/Handler.ts | 2 +- ts/WoltLabSuite/Core/Ui/User/Menu/View.ts | 8 ++--- .../files/js/WoltLabSuite/Core/Bbcode/Code.js | 12 ++----- .../files/js/WoltLabSuite/Core/Date/Picker.js | 27 ++++----------- .../files/js/WoltLabSuite/Core/Ui/Dialog.js | 13 +++---- .../js/WoltLabSuite/Core/Ui/Page/Menu/Main.js | 13 ++----- .../files/js/WoltLabSuite/Core/Ui/Password.js | 10 +----- .../js/WoltLabSuite/Core/Ui/Poll/Editor.js | 14 +++----- .../WoltLabSuite/Core/Ui/Reaction/Handler.js | 2 +- .../js/WoltLabSuite/Core/Ui/User/Menu/View.js | 7 ++-- 16 files changed, 55 insertions(+), 159 deletions(-) diff --git a/ts/WoltLabSuite/Core/Bbcode/Code.ts b/ts/WoltLabSuite/Core/Bbcode/Code.ts index f8d1547942..72c4877fa9 100644 --- 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 1fb42456cd..fbe365626f 100644 --- 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 = ''; - _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 = ''; - _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 6b548b888e..824cae472f 100644 --- 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 ffd827d66b..8c38f4ff1c 100644 --- 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 = ''; @@ -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 84b8760207..bb1bf8e36e 100644 --- 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 5a98a71c34..1bf67b01da 100644 --- 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 2d233c05d3..7fb725d352 100644 --- 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 00e04d2c37..be9b9b6285 100644 --- 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 {
- +
`; @@ -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 b42f4b792a..e34724427a 100644 --- 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 aea1cfea30..f07e22ce58 100644 --- 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 = ''; - _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 = ''; - _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 3944bbc6a5..70317f3da6 100644 --- 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 3e050ab660..ae04195364 100644 --- 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 = ''; @@ -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 b25ebd24fc..9cf9a622a9 100644 --- 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 31fad3b654..a0615545e4 100644 --- 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 547e51f9bd..8db2d1ef63 100644 --- 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 b15f0265c5..76a5be6b27 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 @@ -132,16 +132,15 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti
- +
`; 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); }); -- 2.20.1