From 0df1361dddcc43c6b0a3fd9bfbae9610b7ed673c Mon Sep 17 00:00:00 2001
From: "julia.kirschenheuter" <julia.kirschenheuter@nextcloud.com>
Date: Thu, 6 Apr 2023 11:10:42 +0200
Subject: Add `aria-hidden='true'` to decorative icons inside of modal dialogs

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
---
 apps/dashboard/src/DashboardApp.vue                    | 10 +++++-----
 apps/user_status/src/UserStatus.vue                    |  2 +-
 apps/user_status/src/components/OnlineStatusSelect.vue |  2 +-
 apps/user_status/src/components/PredefinedStatus.vue   |  2 +-
 apps/weather_status/src/App.vue                        |  8 ++++++++
 5 files changed, 16 insertions(+), 8 deletions(-)

(limited to 'apps')

diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index 4e238a51f6f..dffcd783516 100644
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/apps/dashboard/src/DashboardApp.vue
@@ -2,11 +2,11 @@
 	<div id="app-dashboard">
 		<h2>{{ greeting.text }}</h2>
 		<ul class="statuses">
-			<div v-for="status in sortedRegisteredStatus"
+			<li v-for="status in sortedRegisteredStatus"
 				:id="'status-' + status"
 				:key="status">
 				<div :ref="'status-' + status" />
-			</div>
+			</li>
 		</ul>
 
 		<Draggable v-model="layout"
@@ -51,7 +51,7 @@
 							:checked="isStatusActive(status)"
 							@input="updateStatusCheckbox(status, $event.target.checked)">
 						<label :for="'status-checkbox-' + status">
-							<div :class="statusInfo[status].icon" role="img" />
+							<div :class="statusInfo[status].icon" aria-hidden="true" role="img" />
 							{{ statusInfo[status].text }}
 						</label>
 					</li>
@@ -69,7 +69,7 @@
 							:checked="isActive(panel)"
 							@input="updateCheckbox(panel, $event.target.checked)">
 						<label :for="'panel-checkbox-' + panel.id" :class="{ draggable: isActive(panel) }">
-							<div :class="panel.iconClass" role="img" />
+							<div :class="panel.iconClass" aria-hidden="true" role="img" />
 							{{ panel.title }}
 						</label>
 					</li>
@@ -627,7 +627,7 @@ export default {
 	flex-wrap: wrap;
 	margin-bottom: 36px;
 
-	& > div {
+	& > li {
 		margin: 8px;
 	}
 }
diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue
index 3c8cc151e76..4b7c8da41f3 100644
--- a/apps/user_status/src/UserStatus.vue
+++ b/apps/user_status/src/UserStatus.vue
@@ -43,7 +43,7 @@
 				class="user-status-menu-item__toggle"
 				href="#"
 				@click.prevent.stop="openModal">
-				<span :class="statusIcon" class="user-status-menu-item__toggle-icon" />
+				<span aria-hidden="true" :class="statusIcon" class="user-status-menu-item__toggle-icon" />
 				{{ visibleMessage }}
 			</toggle>
 		</div>
diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue
index 52b6022fb44..df7d1377ee3 100644
--- a/apps/user_status/src/components/OnlineStatusSelect.vue
+++ b/apps/user_status/src/components/OnlineStatusSelect.vue
@@ -29,7 +29,7 @@
 			@change="onChange">
 		<label :for="id" class="user-status-online-select__label">
 			{{ label }}
-			<span :class="icon" role="img" />
+			<span :class="icon" aria-hidden="true" role="img" />
 			<em class="user-status-online-select__subline">{{ subline }}</em>
 		</label>
 	</div>
diff --git a/apps/user_status/src/components/PredefinedStatus.vue b/apps/user_status/src/components/PredefinedStatus.vue
index b1a16d6fa59..b5eafaed30b 100644
--- a/apps/user_status/src/components/PredefinedStatus.vue
+++ b/apps/user_status/src/components/PredefinedStatus.vue
@@ -24,7 +24,7 @@
 		@keyup.enter="select"
 		@keyup.space="select"
 		@click="select">
-		<span class="predefined-status__icon">
+		<span aria-hidden="true" class="predefined-status__icon">
 			{{ icon }}
 		</span>
 		<span class="predefined-status__message">
diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index 910284bdb2d..7035b586d32 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -24,32 +24,38 @@
 		<div id="weather-status-menu-item">
 			<NcActions class="weather-status-menu-item__subheader"
 				:default-icon="weatherIcon"
+				:aria-hidden="true"
 				:menu-title="currentWeatherMessage">
 				<NcActionText v-if="gotWeather"
+					:aria-hidden="true"
 					:icon="futureWeatherIcon">
 					{{ forecastMessage }}
 				</NcActionText>
 				<NcActionLink v-if="gotWeather"
 					icon="icon-address"
 					target="_blank"
+					:aria-hidden="true"
 					:href="weatherLinkTarget"
 					:close-after-click="true">
 					{{ locationText }}
 				</NcActionLink>
 				<NcActionButton v-if="gotWeather"
 					:icon="addRemoveFavoriteIcon"
+					:aria-hidden="true"
 					@click="onAddRemoveFavoriteClick">
 					{{ addRemoveFavoriteText }}
 				</NcActionButton>
 				<NcActionSeparator v-if="address && !errorMessage" />
 				<NcActionButton icon="icon-crosshair"
 					:close-after-click="true"
+					:aria-hidden="true"
 					@click="onBrowserLocationClick">
 					{{ t('weather_status', 'Detect location') }}
 				</NcActionButton>
 				<NcActionInput ref="addressInput"
 					:disabled="false"
 					icon="icon-rename"
+					:aria-hidden="true"
 					type="text"
 					value=""
 					@submit="onAddressSubmit">
@@ -57,12 +63,14 @@
 				</NcActionInput>
 				<NcActionButton v-show="favorites.length > 0"
 					:icon="toggleFavoritesIcon"
+					:aria-hidden="true"
 					@click="showFavorites = !showFavorites">
 					{{ t('weather_status', 'Favorites') }}
 				</NcActionButton>
 				<NcActionButton v-for="f in displayedFavorites"
 					:key="f"
 					icon="icon-starred"
+					:aria-hidden="true"
 					@click="onFavoriteClick($event, f)">
 					{{ f }}
 				</NcActionButton>
-- 
cgit v1.2.3