fix: Add a11y label for forms list

Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Apr 16, 2024 · 4dcbf0c · 4dcbf0c
1 parent 1c90500
commit 4dcbf0c
Showing 1 changed file with 29 additions and 24 deletions.
diff --git a/src/Forms.vue b/src/Forms.vue
@@ -24,33 +24,38 @@
 <template>
 	<NcContent app-name="forms">
 		<NcAppNavigation v-if="canCreateForms || hasForms">
-			<NcAppNavigationNew v-if="canCreateForms"
-				:text="t('forms', 'New form')"
-				@click="onNewForm">
-				<template #icon>
-					<IconPlus :size="20" decorative />
-				</template>
-			</NcAppNavigationNew>
-			<template #list>
+			<template #default>
+				<NcAppNavigationNew v-if="canCreateForms"
+					:text="t('forms', 'New form')"
+					@click="onNewForm">
+					<template #icon>
+						<IconPlus :size="20" decorative />
+					</template>
+				</NcAppNavigationNew>
+
 				<!-- Form-Owner-->
-				<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" />
+				<ul v-if="ownedForms.length > 0" aria-labelledby="forms-navigation-your-forms">
+					<NcAppNavigationCaption id="forms-navigation-your-forms" :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" />
+				</ul>
 
 				<!-- Shared Forms-->
-				<NcAppNavigationCaption v-if="sharedForms.length > 0" :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 v-if="sharedForms.length > 0" aria-labelledby="forms-navigation-shared-forms">
+					<NcAppNavigationCaption 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>
 			</template>
 			<template #footer>
 				<div v-if="archivedForms.length > 0" class="forms-navigation-footer">