Add `aria-hidden='true'` to decorative icons inside of modal dialogstags/v27.0.0beta1
@@ -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; | |||
} | |||
} |
@@ -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> |
@@ -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> |
@@ -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"> |
@@ -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> |