Merge pull request #2208 from nextcloud/fix/label-navigation

fix: Correctly label forms lists in the app navigation
nextcloud · Jun 13, 2024 · 1d503c4 · 1d503c4
2 parents 35a04a0 + 8c21145
commit 1d503c4
Showing 1 changed file with 45 additions and 23 deletions.
diff --git 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%;
 }