From c0c2e5663c2c0baef4a6c1426a2144f44b83de73 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 22 Jan 2025 10:30:38 +0100
Subject: [PATCH] fix(a11y): add labels menu items

---
 frontend/src/components/home/AppHeader.vue                  | 1 +
 frontend/src/components/home/ProjectsNavigationItem.vue     | 3 +++
 frontend/src/components/misc/Dropdown.vue                   | 1 +
 frontend/src/components/project/ProjectSettingsDropdown.vue | 1 +
 frontend/src/i18n/lang/en.json                              | 3 +++
 5 files changed, 9 insertions(+)

diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue
index 5eb6ee7d3..c71216ee2 100644
--- a/frontend/src/components/home/AppHeader.vue
+++ b/frontend/src/components/home/AppHeader.vue
@@ -43,6 +43,7 @@
 						class="project-title-button"
 						@click="toggleOpen"
 					>
+						<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
 						<Icon
 							icon="ellipsis-h"
 							class="icon"
diff --git a/frontend/src/components/home/ProjectsNavigationItem.vue b/frontend/src/components/home/ProjectsNavigationItem.vue
index 68d0757cb..d91dc03e4 100644
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@@ -30,6 +30,7 @@
 					<ColorBubble
 						v-if="project.hexColor !== ''"
 						:color="project.hexColor"
+						:aria-label="$t('project.color')"
 					/>
 					<span
 						v-else-if="project.id < -1"
@@ -53,6 +54,7 @@
 				:class="{'is-favorite': project.isFavorite}"
 				@click="projectStore.toggleProjectFavorite(project)"
 			>
+				<span class="tw-sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
 				<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
 			</BaseButton>
 			<ProjectSettingsDropdown
@@ -65,6 +67,7 @@
 						class="menu-list-dropdown-trigger"
 						@click="toggleOpen"
 					>
+						<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
 						<Icon
 							icon="ellipsis-h"
 							class="icon"
diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index fd6db2611..07c5a9f04 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -2,6 +2,7 @@
 	<div
 		ref="dropdown"
 		class="dropdown"
+		role="menu"
 		@pointerenter="initialMount = true"
 	>
 		<slot
diff --git a/frontend/src/components/project/ProjectSettingsDropdown.vue b/frontend/src/components/project/ProjectSettingsDropdown.vue
index c25e28932..84ff722c8 100644
--- a/frontend/src/components/project/ProjectSettingsDropdown.vue
+++ b/frontend/src/components/project/ProjectSettingsDropdown.vue
@@ -9,6 +9,7 @@
 					class="dropdown-trigger"
 					@click="triggerProps.toggleOpen"
 				>
+					<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
 					<Icon
 						icon="ellipsis-h"
 						class="icon"
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index d42a7f32e..a6b58d75c 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -220,6 +220,9 @@
     "shared": "Shared Projects",
     "noDescriptionAvailable": "No project description is available.",
     "inboxTitle": "Inbox",
+    "favorite": "Mark this project as favorite",
+    "unfavorite": "Remove this project from favorites",
+    "openSettingsMenu": "Open project settings menu",
     "create": {
       "header": "New project",
       "titlePlaceholder": "The project's title goes here…",