Merge pull request #37335 from nextcloud/fix/36909-Decorative_icons_were_not_marked_as_such_with_aria-hidden=true

Add `aria-hidden='true'` to decorative icons inside of modal dialogs

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;
 	}
 }

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>

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>

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">

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>