From 8c211455d535e129c73b6c1e5ff1567237551c5f Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 12 Jun 2024 23:58:47 +0200
Subject: [PATCH] fix: Correctly label forms lists in the app navigation

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/Forms.vue | 68 ++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/Forms.vue b/src/Forms.vue
index 661a23c09..1d8f9da61 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -34,33 +34,45 @@
 					<IconPlus :size="20" decorative />
 				</template>
 			</NcAppNavigationNew>
-			<template #list>
-				<!-- Form-Owner-->
+
+			<!-- Form-Owner-->
+			<template v-if="ownedForms.length > 0">
 				<NcAppNavigationCaption
-					v-if="ownedForms.length > 0"
-					:name="t('forms', 'Your Forms')" />
-				<AppNavigationForm
-					v-for="form in ownedForms"
-					:key="form.id"
-					:form="form"
-					:read-only="false"
-					@open-sharing="openSharing"
-					@mobile-close-navigation="mobileCloseNavigation"
-					@clone="onCloneForm"
-					@delete="onDeleteForm" />
-
-				<!-- Shared Forms-->
+					is-heading
+					class="forms-navigation__list-heading"
+					heading-id="forms-navigation-your-forms"
+					:name="t('forms', 'Your forms')" />
+				<ul aria-labelledby="forms-navigation-your-forms">
+					<AppNavigationForm
+						v-for="form in ownedForms"
+						:key="form.id"
+						:form="form"
+						:read-only="false"
+						@open-sharing="openSharing"
+						@mobile-close-navigation="mobileCloseNavigation"
+						@clone="onCloneForm"
+						@delete="onDeleteForm" />
+				</ul>
+			</template>
+
+			<!-- Shared Forms-->
+			<template v-if="sharedForms.length > 0">
 				<NcAppNavigationCaption
-					v-if="sharedForms.length > 0"
+					is-heading
+					class="forms-navigation__list-heading"
+					heading-id="forms-navigation-shared-forms"
 					:name="t('forms', 'Shared with you')" />
-				<AppNavigationForm
-					v-for="form in sharedForms"
-					:key="form.id"
-					:form="form"
-					:read-only="true"
-					@open-sharing="openSharing"
-					@mobile-close-navigation="mobileCloseNavigation" />
+				<ul aria-labelledby="forms-navigation-shared-forms">
+					<AppNavigationForm
+						v-for="form in sharedForms"
+						:key="form.id"
+						:form="form"
+						:read-only="true"
+						@open-sharing="openSharing"
+						@mobile-close-navigation="mobileCloseNavigation" />
+				</ul>
 			</template>
+
 			<template #footer>
 				<div v-if="archivedForms.length > 0" class="forms-navigation-footer">
 					<NcButton
@@ -509,6 +521,16 @@ export default {
 	padding: var(--app-navigation-padding);
 }
 
+// Fix the margin of the lists
+.forms-navigation__list-heading {
+	margin-block: calc(var(--default-grid-baseline) * 2) 0 !important;
+
+	:deep(h2) {
+		// Make the list more condensed
+		margin-block: 0;
+	}
+}
+
 .forms-emptycontent {
 	height: 100%;
 }