From 19c829c671fc04e88c001377fa20ef2e7c287ab5 Mon Sep 17 00:00:00 2001
From: Theo Hollweg <thollweg@mailbox.org>
Date: Thu, 11 Dec 2025 12:08:23 +0000
Subject: [PATCH] Fix: Make color picker keyboard-focusable

Signed-off-by: Theo Hollweg <thollweg@mailbox.org>
---
 src/components/navigation/AppNavigationAddBoard.vue | 5 +++--
 src/components/navigation/AppNavigationBoard.vue    | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index 8b262ccecd..51eb9c4799 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -10,7 +10,7 @@
 			@click.prevent.stop="startCreateBoard" />
 		<div v-else class="board-create">
 			<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper" :disabled="loading">
-				<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
+				<button :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 			</NcColorPicker>
 			<form @submit.prevent.stop="createBoard">
 				<NcTextField ref="inputField"
@@ -117,8 +117,9 @@ export default {
 		height: var(--default-clickable-area);
 		.color0 {
 			width: 24px !important;
-			margin: var(--default-grid-baseline);
 			height: 24px;
+			min-height: 0;
+			margin: var(--default-grid-baseline);
 			border-radius: 50%;
 			background-size: 14px;
 		}
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 85c13c4d1f..4c02e3cf62 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -131,7 +131,7 @@
 		</NcAppNavigationItem>
 		<div v-else-if="editing" class="board-edit">
 			<NcColorPicker v-model="editColor" class="app-navigation-entry-bullet-wrapper">
-				<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
+				<button :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 			</NcColorPicker>
 			<form @submit.prevent.stop="applyEdit">
 				<NcTextField ref="inputField"
@@ -472,8 +472,9 @@ export default {
 		height: var(--default-clickable-area);
 		.color0 {
 			width: 24px !important;
-			margin: var(--default-grid-baseline);
 			height: 24px;
+			min-height: 0;
+			margin: var(--default-grid-baseline);
 			border-radius: 50%;
 			background-size: 14px;
 		}