From 11ffb530be22b2a58e7ea9ba550a2c0426114762 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Apr 2026 14:14:27 +0200
Subject: [PATCH] feat(a11y): add accessible names to icon-only buttons

Adds aria-label to sidebar toggle, mobile overlay, banner close,
modal close, quick actions close, task detail close, and dropdown
trigger buttons. Adds triggerLabel prop to Dropdown component.

Fixes WCAG 4.1.2 (Name, Role, Value).
---
 frontend/src/components/home/AddToHomeScreen.vue        | 1 +
 frontend/src/components/home/ContentAuth.vue            | 2 ++
 frontend/src/components/home/DemoMode.vue               | 1 +
 frontend/src/components/misc/Dropdown.vue               | 3 +++
 frontend/src/components/misc/Modal.vue                  | 1 +
 frontend/src/components/project/views/ProjectKanban.vue | 1 +
 frontend/src/components/quick-actions/QuickActions.vue  | 1 +
 frontend/src/components/tasks/partials/Heading.vue      | 2 ++
 8 files changed, 12 insertions(+)

diff --git a/frontend/src/components/home/AddToHomeScreen.vue b/frontend/src/components/home/AddToHomeScreen.vue
index 337bd8276..13c6e89e0 100644
--- a/frontend/src/components/home/AddToHomeScreen.vue
+++ b/frontend/src/components/home/AddToHomeScreen.vue
@@ -12,6 +12,7 @@
 			{{ $t('home.addToHomeScreen') }}
 		</p>
 		<BaseButton
+			:aria-label="$t('misc.closeBanner')"
 			class="hide-button"
 			@click="() => hideMessage = true"
 		>
diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index e42f464d7..b87eab7ca 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -2,6 +2,7 @@
 	<div class="content-auth">
 		<BaseButton
 			v-show="menuActive"
+			:aria-label="$t('navigation.closeSidebar')"
 			class="menu-hide-button d-print-none"
 			@click="baseStore.setMenuActive(false)"
 		>
@@ -32,6 +33,7 @@
 			>
 				<BaseButton
 					v-show="menuActive"
+					:aria-label="$t('navigation.closeSidebar')"
 					class="mobile-overlay d-print-none"
 					@click="baseStore.setMenuActive(false)"
 				/>
diff --git a/frontend/src/components/home/DemoMode.vue b/frontend/src/components/home/DemoMode.vue
index b8ab9139e..75c546e8e 100644
--- a/frontend/src/components/home/DemoMode.vue
+++ b/frontend/src/components/home/DemoMode.vue
@@ -18,6 +18,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
 			<strong class="is-uppercase">{{ $t('demo.everythingWillBeDeleted') }}</strong>
 		</p>
 		<BaseButton
+			:aria-label="$t('misc.closeBanner')"
 			class="hide-button"
 			@click="() => hide = true"
 		>
diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index f87227b89..94a79cd32 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -13,6 +13,7 @@
 		>
 			<BaseButton
 				class="dropdown-trigger is-flex"
+				:aria-label="triggerLabel"
 				@click="toggleOpen"
 			>
 				<Icon
@@ -49,8 +50,10 @@ import BaseButton from '@/components/base/BaseButton.vue'
 
 withDefaults(defineProps<{
 	triggerIcon?: IconProp
+	triggerLabel?: string
 }>(), {
 	triggerIcon: 'ellipsis-h',
+	triggerLabel: undefined,
 })
 
 const emit = defineEmits<{
diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index bedd49efb..356774f9b 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -16,6 +16,7 @@
 				@mousedown.self.prevent.stop="$emit('close')"
 			>
 				<BaseButton
+					:aria-label="$t('misc.closeDialog')"
 					class="close"
 					@click="$emit('close')"
 				>
diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index 0f6c5c5b6..325b3d7c3 100644
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@@ -74,6 +74,7 @@
 										v-if="canWrite && !collapsedBuckets[bucket.id]"
 										class="is-right options"
 										trigger-icon="ellipsis-v"
+										:trigger-label="$t('project.kanban.bucketOptions')"
 										@close="() => showSetLimitInput = false"
 									>
 										<div
diff --git a/frontend/src/components/quick-actions/QuickActions.vue b/frontend/src/components/quick-actions/QuickActions.vue
index f9d488243..fe39b45de 100644
--- a/frontend/src/components/quick-actions/QuickActions.vue
+++ b/frontend/src/components/quick-actions/QuickActions.vue
@@ -37,6 +37,7 @@
 					v-if="isNewTaskCommand"
 				/>
 				<BaseButton
+					:aria-label="$t('misc.closeQuickActions')"
 					class="close"
 					@click="closeQuickActions"
 				>
diff --git a/frontend/src/components/tasks/partials/Heading.vue b/frontend/src/components/tasks/partials/Heading.vue
index 822409071..8bab24e30 100644
--- a/frontend/src/components/tasks/partials/Heading.vue
+++ b/frontend/src/components/tasks/partials/Heading.vue
@@ -17,6 +17,7 @@
 			/>
 			<BaseButton
 				v-if="hasClose"
+				:aria-label="$t('task.detail.closeTaskDetail')"
 				class="close"
 				@click="$emit('close')"
 			>
@@ -37,6 +38,7 @@
 		</h1>
 		<BaseButton
 			v-if="hasClose"
+			:aria-label="$t('task.detail.closeTaskDetail')"
 			class="close"
 			@click="$emit('close')"
 		>