Add `aria-hidden='true'` to decorative icons inside of modal dialogstags/v27.0.0beta1
<div id="app-dashboard"> | <div id="app-dashboard"> | ||||
<h2>{{ greeting.text }}</h2> | <h2>{{ greeting.text }}</h2> | ||||
<ul class="statuses"> | <ul class="statuses"> | ||||
<div v-for="status in sortedRegisteredStatus" | |||||
<li v-for="status in sortedRegisteredStatus" | |||||
:id="'status-' + status" | :id="'status-' + status" | ||||
:key="status"> | :key="status"> | ||||
<div :ref="'status-' + status" /> | <div :ref="'status-' + status" /> | ||||
</div> | |||||
</li> | |||||
</ul> | </ul> | ||||
<Draggable v-model="layout" | <Draggable v-model="layout" | ||||
:checked="isStatusActive(status)" | :checked="isStatusActive(status)" | ||||
@input="updateStatusCheckbox(status, $event.target.checked)"> | @input="updateStatusCheckbox(status, $event.target.checked)"> | ||||
<label :for="'status-checkbox-' + status"> | <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 }} | {{ statusInfo[status].text }} | ||||
</label> | </label> | ||||
</li> | </li> | ||||
:checked="isActive(panel)" | :checked="isActive(panel)" | ||||
@input="updateCheckbox(panel, $event.target.checked)"> | @input="updateCheckbox(panel, $event.target.checked)"> | ||||
<label :for="'panel-checkbox-' + panel.id" :class="{ draggable: isActive(panel) }"> | <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 }} | {{ panel.title }} | ||||
</label> | </label> | ||||
</li> | </li> | ||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
margin-bottom: 36px; | margin-bottom: 36px; | ||||
& > div { | |||||
& > li { | |||||
margin: 8px; | margin: 8px; | ||||
} | } | ||||
} | } |
class="user-status-menu-item__toggle" | class="user-status-menu-item__toggle" | ||||
href="#" | href="#" | ||||
@click.prevent.stop="openModal"> | @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 }} | {{ visibleMessage }} | ||||
</toggle> | </toggle> | ||||
</div> | </div> |
@change="onChange"> | @change="onChange"> | ||||
<label :for="id" class="user-status-online-select__label"> | <label :for="id" class="user-status-online-select__label"> | ||||
{{ label }} | {{ label }} | ||||
<span :class="icon" role="img" /> | |||||
<span :class="icon" aria-hidden="true" role="img" /> | |||||
<em class="user-status-online-select__subline">{{ subline }}</em> | <em class="user-status-online-select__subline">{{ subline }}</em> | ||||
</label> | </label> | ||||
</div> | </div> |
@keyup.enter="select" | @keyup.enter="select" | ||||
@keyup.space="select" | @keyup.space="select" | ||||
@click="select"> | @click="select"> | ||||
<span class="predefined-status__icon"> | |||||
<span aria-hidden="true" class="predefined-status__icon"> | |||||
{{ icon }} | {{ icon }} | ||||
</span> | </span> | ||||
<span class="predefined-status__message"> | <span class="predefined-status__message"> |
<div id="weather-status-menu-item"> | <div id="weather-status-menu-item"> | ||||
<NcActions class="weather-status-menu-item__subheader" | <NcActions class="weather-status-menu-item__subheader" | ||||
:default-icon="weatherIcon" | :default-icon="weatherIcon" | ||||
:aria-hidden="true" | |||||
:menu-title="currentWeatherMessage"> | :menu-title="currentWeatherMessage"> | ||||
<NcActionText v-if="gotWeather" | <NcActionText v-if="gotWeather" | ||||
:aria-hidden="true" | |||||
:icon="futureWeatherIcon"> | :icon="futureWeatherIcon"> | ||||
{{ forecastMessage }} | {{ forecastMessage }} | ||||
</NcActionText> | </NcActionText> | ||||
<NcActionLink v-if="gotWeather" | <NcActionLink v-if="gotWeather" | ||||
icon="icon-address" | icon="icon-address" | ||||
target="_blank" | target="_blank" | ||||
:aria-hidden="true" | |||||
:href="weatherLinkTarget" | :href="weatherLinkTarget" | ||||
:close-after-click="true"> | :close-after-click="true"> | ||||
{{ locationText }} | {{ locationText }} | ||||
</NcActionLink> | </NcActionLink> | ||||
<NcActionButton v-if="gotWeather" | <NcActionButton v-if="gotWeather" | ||||
:icon="addRemoveFavoriteIcon" | :icon="addRemoveFavoriteIcon" | ||||
:aria-hidden="true" | |||||
@click="onAddRemoveFavoriteClick"> | @click="onAddRemoveFavoriteClick"> | ||||
{{ addRemoveFavoriteText }} | {{ addRemoveFavoriteText }} | ||||
</NcActionButton> | </NcActionButton> | ||||
<NcActionSeparator v-if="address && !errorMessage" /> | <NcActionSeparator v-if="address && !errorMessage" /> | ||||
<NcActionButton icon="icon-crosshair" | <NcActionButton icon="icon-crosshair" | ||||
:close-after-click="true" | :close-after-click="true" | ||||
:aria-hidden="true" | |||||
@click="onBrowserLocationClick"> | @click="onBrowserLocationClick"> | ||||
{{ t('weather_status', 'Detect location') }} | {{ t('weather_status', 'Detect location') }} | ||||
</NcActionButton> | </NcActionButton> | ||||
<NcActionInput ref="addressInput" | <NcActionInput ref="addressInput" | ||||
:disabled="false" | :disabled="false" | ||||
icon="icon-rename" | icon="icon-rename" | ||||
:aria-hidden="true" | |||||
type="text" | type="text" | ||||
value="" | value="" | ||||
@submit="onAddressSubmit"> | @submit="onAddressSubmit"> | ||||
</NcActionInput> | </NcActionInput> | ||||
<NcActionButton v-show="favorites.length > 0" | <NcActionButton v-show="favorites.length > 0" | ||||
:icon="toggleFavoritesIcon" | :icon="toggleFavoritesIcon" | ||||
:aria-hidden="true" | |||||
@click="showFavorites = !showFavorites"> | @click="showFavorites = !showFavorites"> | ||||
{{ t('weather_status', 'Favorites') }} | {{ t('weather_status', 'Favorites') }} | ||||
</NcActionButton> | </NcActionButton> | ||||
<NcActionButton v-for="f in displayedFavorites" | <NcActionButton v-for="f in displayedFavorites" | ||||
:key="f" | :key="f" | ||||
icon="icon-starred" | icon="icon-starred" | ||||
:aria-hidden="true" | |||||
@click="onFavoriteClick($event, f)"> | @click="onFavoriteClick($event, f)"> | ||||
{{ f }} | {{ f }} | ||||
</NcActionButton> | </NcActionButton> |