Set navigation role and aria label on app navigation

Makes it possible for screen readers to say the text of aria label
followed by the term "navigation" when entering that region.

Also added an optional arial label for the toggle.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

src/components/AppNavigation/AppNavigation.vue

@@ -57,8 +57,13 @@ emit('toggle-navigation', {
 	<div
 		id="app-navigation-vue"
 		class="app-navigation"
+		role="navigation"
+		:aria-label="ariaLabel || t('App navigation')"
 		:class="{'app-navigation--close':!open }">
-		<AppNavigationToggle :open="open" @update:open="toggleNavigation" />
+		<AppNavigationToggle
+			:aria-label="toggleAriaLabel || t('App navigation toggle')"
+			:open="open"
+			@update:open="toggleNavigation" />
 		<slot />
 
 		<!-- List for Navigation li-items -->
@@ -85,6 +90,23 @@ export default {
 
 	mixins: [isMobile],
 
+	props: {
+		/**
+		 * aria-label for the app navigation element
+		 */
+		ariaLabel: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * aria-label for the toggle button
+		 */
+		toggleAriaLabel: {
+			type: String,
+			default: '',
+		},
+	},
+
 	data() {
 		return {
 			open: true,