fix: Correctly label forms lists in the app navigation

Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Jun 12, 2024 · 02ff661 · 02ff661
1 parent 2ad8d6d
commit 02ff661
Showing 1 changed file with 32 additions and 23 deletions.
diff --git a/src/Forms.vue b/src/Forms.vue
@@ -34,33 +34,42 @@
 					<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
+					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>
+
+			<template v-if="sharedForms.length > 0">
 				<NcAppNavigationCaption
-					v-if="sharedForms.length > 0"
+					is-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