Improve a11y of the color picker button

Author: BurntimeX

com.woltlab.wcf/templates/shared_colorFormField.tpl

@@ -3,9 +3,15 @@
 		<span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
 	</span>
 {else}
-	<a href="#" class="colorPickerButton jsTooltip" id="{$field->getPrefixedId()}_colorPickerButton" title="{lang}wcf.style.colorPicker.button.changeColor{/lang}" data-store="{$field->getPrefixedId()}">
+	<button
+		type="button"
+		class="colorPickerButton jsTooltip"
+		id="{$field->getPrefixedId()}_colorPickerButton"
+		title="{lang}wcf.style.colorPicker.button.changeColor{/lang}"
+		data-store="{$field->getPrefixedId()}"
+	>
 		<span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
-	</a>
+	</button>
 	<input type="hidden" {*
 		*}id="{$field->getPrefixedId()}" {*
 		*}name="{$field->getPrefixedId()}" {*

ts/WoltLabSuite/Core/Ui/Color/Picker.ts

@@ -401,7 +401,7 @@ class UiColorPicker implements DialogCallbackObject {
     this.oldColor!.style.backgroundColor = colorString;
     this.input.value = colorString;
 
-    if (!(this.element instanceof HTMLButtonElement)) {
+    if (!(this.element instanceof HTMLButtonElement) || this.element.classList.contains("colorPickerButton")) {
       const span = this.element.querySelector("span");
       if (span) {
         span.style.backgroundColor = colorString;