Add aria-hidden attr to the whole navigation depending on a sidebar state

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

Author: JuliaKirschenheuter

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -59,15 +59,16 @@ emit('toggle-navigation', {
 		role="navigation"
 		:class="{'app-navigation--close':!open }">
 		<NcAppNavigationToggle :open="open" @update:open="toggleNavigation" />
-		<slot />
-
-		<!-- List for Navigation li-items -->
-		<ul class="app-navigation__list">
-			<slot name="list" />
-		</ul>
-
-		<!-- Footer for e.g. AppNavigationSettings -->
-		<slot name="footer" />
+		<div :aria-hidden="ariaHidden" class="app-navigation__content">
+			<slot />
+			<!-- List for Navigation li-items -->
+			<ul class="app-navigation__list">
+				<slot name="list" />
+			</ul>
+
+			<!-- Footer for e.g. AppNavigationSettings -->
+			<slot name="footer" />
+		</div>
 	</div>
 </template>
 
@@ -91,6 +92,11 @@ export default {
 			open: true,
 		}
 	},
+	computed: {
+		ariaHidden() {
+			return this.open ? 'false' : 'true'
+		},
+	},
 
 	watch: {
 		isMobile() {
@@ -156,10 +162,6 @@ export default {
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
-	display: flex;
-	flex-direction: column;
-	flex-grow: 0;
-	flex-shrink: 0;
 	background-color:  var(--color-main-background-blur, var(--color-main-background));
 	-webkit-backdrop-filter: var(--filter-background-blur, none);
 	backdrop-filter: var(--filter-background-blur, none);
@@ -183,6 +185,13 @@ export default {
 		gap: var(--default-grid-baseline, 4px);
 		padding: calc(var(--default-grid-baseline, 4px) * 2);
 	}
+	&__content {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
 }
 
 // add extra border for high contrast mode