Merge pull request #146 from nextcloud/accessibility-header

Fix header icon accessibility
nextcloud · Jul 25, 2018 · 09f7063 · 09f7063
2 parents 29b8987 + 953f4b8
commit 09f7063
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git 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
@@ -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">