Merge pull request #6626 from WoltLab/63-color-picker-button

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;

wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js

@@ -27,11 +27,12 @@
 }
 
 .colorPickerButton {
-	height: 32px;
+	border-radius: var(--wcfBorderRadius);
+	height: 50px;
 	width: 50px;
 
 	> span {
-		height: 32px;
+		height: 50px;
 	}
 }