From fd1a329f5da8d204395357babf2ad56dda5c506d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Apr 2026 14:23:31 +0200
Subject: [PATCH] feat(a11y): add descriptive labels to task checkboxes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds aria-label='Mark {task} as done' to task checkboxes so
screen readers can distinguish between them. Passes ariaLabel
prop through FancyCheckbox → BaseCheckbox → input.

Fixes WCAG 2.4.6 (Headings and Labels).
---
 frontend/src/components/base/BaseCheckbox.vue                | 3 +++
 frontend/src/components/input/FancyCheckbox.vue              | 5 ++++-
 .../src/components/tasks/partials/SingleTaskInProject.vue    | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/base/BaseCheckbox.vue b/frontend/src/components/base/BaseCheckbox.vue
index d75c22847..625944490 100644
--- a/frontend/src/components/base/BaseCheckbox.vue
+++ b/frontend/src/components/base/BaseCheckbox.vue
@@ -11,6 +11,7 @@
 				class="is-sr-only"
 				:checked="modelValue"
 				:disabled="disabled || undefined"
+				:aria-label="ariaLabel"
 				@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
 			>
 			<slot />
@@ -22,8 +23,10 @@
 withDefaults(defineProps<{
 	modelValue?: boolean,
 	disabled: boolean,
+	ariaLabel?: string,
 }>(), {
 	modelValue: false,
+	ariaLabel: undefined,
 })
 
 const emit = defineEmits<{
diff --git a/frontend/src/components/input/FancyCheckbox.vue b/frontend/src/components/input/FancyCheckbox.vue
index 9e847cf11..2316c439f 100644
--- a/frontend/src/components/input/FancyCheckbox.vue
+++ b/frontend/src/components/input/FancyCheckbox.vue
@@ -7,6 +7,7 @@
 		}"
 		:disabled="disabled"
 		:model-value="modelValue"
+		:aria-label="ariaLabel"
 		@update:modelValue="value => emit('update:modelValue', value)"
 	>
 		<CheckboxIcon class="fancy-checkbox__icon" />
@@ -26,10 +27,12 @@ import BaseCheckbox from '@/components/base/BaseCheckbox.vue'
 withDefaults(defineProps<{
 	modelValue: boolean,
 	disabled?: boolean,
-	isBlock?: boolean
+	isBlock?: boolean,
+	ariaLabel?: string,
 }>(), {
 	disabled: false,
 	isBlock: false,
+	ariaLabel: undefined,
 })
 
 const emit = defineEmits<{
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 0576416e6..ce1b5051f 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -19,6 +19,7 @@
 				<FancyCheckbox
 					v-model="task.done"
 					:disabled="isArchived || disabled || !canMarkAsDone"
+					:aria-label="$t('task.detail.markAsDone', {task: task.title})"
 					@update:modelValue="markAsDone"
 					@click.stop
 				/>