diff options
| author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2018-07-25 13:21:29 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-07-25 13:21:29 +0300 |
| commit | 09f706385b30521645f1c4352ea9d1bdb3a93fae (patch) | |
| tree | e6fd6c38014a850005830e0be8638b57f61ff0d3 | |
| parent | 29b89875f55a270f80a7eff0b8a73a0a2c5f7a0b (diff) | |
| parent | 953f4b8f2590100700cf53a3d69834414a5dd5cd (diff) | |
Merge pull request #146 from nextcloud/accessibility-headerv14.0.0beta1
Fix header icon accessibility
| -rw-r--r-- | css/styles.scss | 20 | ||||
| -rw-r--r-- | src/App.vue | 5 |
2 files changed, 18 insertions, 7 deletions
diff --git a/css/styles.scss b/css/styles.scss index dc5e7b6..8e7dfd5 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -9,15 +9,23 @@ padding: 10px; opacity: .6; - &, - img { - cursor: pointer; - } - - &.hasNotifications, &:hover, &:focus { + opacity: 1; + } + + &.hasNotifications { opacity: 1 !important; + + &:hover, + &:focus { + opacity: .6 !important; + } + } + + &, + img { + cursor: pointer; } } diff --git a/src/App.vue b/src/App.vue index 1b890e7..c430998 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,9 @@ <template> <div v-if="!shutdown" class="notifications"> - <div class="notifications-button menutoggle" ref="button" :class="{ hasNotifications: notifications.length }"> + <div class="notifications-button menutoggle" ref="button" :class="{ hasNotifications: notifications.length }" + tabindex="0" role="button" + aria-label="t('notifications', 'Notifications')" + aria-haspopup="true" aria-controls="notification-container" aria-expanded="false"> <img class="svg" alt="" ref="icon" :title="t('notifications', 'Notifications')" :src="iconPath"> </div> <div class="notification-container" ref="container"> |