From 5aff0a51264ea29ed23e7b8ac85dc1e4b80fe60b Mon Sep 17 00:00:00 2001
From: 00hamza <291504006+hamza-agent@users.noreply.github.com>
Date: Sun, 7 Jun 2026 22:13:59 +0000
Subject: [PATCH] fix(contacts): label app content regions

Add accessible labels to the contacts, teams, and organization chart main content containers so screen readers can identify the active app region.

Fixes nextcloud/contacts#5046

Assisted-by: agent-hamza:gpt-5
Signed-off-by: 00hamza <291504006+hamza-agent@users.noreply.github.com>
---
 src/components/AppContent/ChartContent.vue    |  2 +-
 src/components/AppContent/CircleContent.vue   |  2 +-
 src/components/AppContent/ContactsContent.vue | 12 ++++++++----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/AppContent/ChartContent.vue b/src/components/AppContent/ChartContent.vue
index 796e28581..8d9d12936 100644
--- a/src/components/AppContent/ChartContent.vue
+++ b/src/components/AppContent/ChartContent.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<AppContent>
+	<AppContent :aria-label="t('contacts', 'Organization chart')">
 		<OrgChart :data="transformData" />
 	</AppContent>
 </template>
diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 67540d295..66c11eb06 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<AppContent>
+	<AppContent :aria-label="t('contacts', 'Teams')">
 		<EmptyContent v-if="!circle && !userGroup" :name="t('contacts', 'Please select a team')">
 			<template #icon>
 				<AccountGroup :size="20" />
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index ea7788e34..e3b3b1f18 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<AppContent v-if="loading">
+	<AppContent v-if="loading" :aria-label="t('contacts', 'Contacts')">
 		<EmptyContent class="empty-content" :name="t('contacts', 'Loading contacts …')">
 			<template #icon>
 				<IconLoading :size="20" />
@@ -12,7 +12,7 @@
 		</EmptyContent>
 	</AppContent>
 
-	<AppContent v-else-if="isEmptyGroup && !isRealGroup">
+	<AppContent v-else-if="isEmptyGroup && !isRealGroup" :aria-label="t('contacts', 'Contacts')">
 		<EmptyContent class="empty-content" :name="t('contacts', 'There are no contacts yet')">
 			<template #icon>
 				<IconContact :size="20" />
@@ -25,7 +25,7 @@
 		</EmptyContent>
 	</AppContent>
 
-	<AppContent v-else-if="isEmptyGroup && isRealGroup">
+	<AppContent v-else-if="isEmptyGroup && isRealGroup" :aria-label="t('contacts', 'Contacts')">
 		<EmptyContent class="empty-content" :name=" t('contacts', 'There are no contacts in this group')">
 			<template #icon>
 				<IconContact :size="20" />
@@ -41,7 +41,11 @@
 		</EmptyContent>
 	</AppContent>
 
-	<AppContent v-else :show-details="showDetails" @update:show-details="hideDetails">
+	<AppContent
+		v-else
+		:aria-label="t('contacts', 'Contacts')"
+		:show-details="showDetails"
+		@update:show-details="hideDetails">
 		<!-- contacts list -->
 		<template #list>
 			<ContactsList