Merge pull request #42732 from nextcloud/fix/a11y/user-status-icons

fix(a11y): Fix informative graphics contrast of user status icons

apps/dashboard/src/DashboardApp.vue

@@ -74,7 +74,8 @@
 							:checked="isStatusActive(status)"
 							@input="updateStatusCheckbox(status, $event.target.checked)">
 						<label :for="'status-checkbox-' + status">
-							<span :class="statusInfo[status].icon" aria-hidden="true" />
+							<NcUserStatusIcon v-if="status === 'status'" status="online" aria-hidden="true" />
+							<span v-else :class="statusInfo[status].icon" aria-hidden="true" />
 							{{ statusInfo[status].text }}
 						</label>
 					</li>
@@ -124,6 +125,7 @@ import axios from '@nextcloud/axios'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Draggable from 'vuedraggable'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Vue from 'vue'
 
@@ -140,7 +142,6 @@ const statusInfo = {
 	},
 	status: {
 		text: t('dashboard', 'Status'),
-		icon: 'icon-user-status-online',
 	},
 }
 
@@ -152,6 +153,7 @@ export default {
 		Draggable,
 		NcModal,
 		Pencil,
+		NcUserStatusIcon,
 	},
 	mixins: [
 		isMobile,

apps/user_status/css/user-status-menu.css

@@ -1 +1 @@
-.icon-user-status{background-image:url("../img/app.svg")}.icon-user-status-dark{background-image:url("../img/app-dark.svg")}.icon-user-status-online{background-image:url("../img/user-status-online.svg")}.icon-user-status-away{background-image:url("../img/user-status-away.svg")}.icon-user-status-dnd{background-image:url("../img/user-status-dnd.svg")}.icon-user-status-invisible{background-image:url("../img/user-status-invisible.svg");filter:var(--background-invert-if-dark)}/*# sourceMappingURL=user-status-menu.css.map */
+.icon-user-status{background-image:url("../img/app.svg")}.icon-user-status-dark{background-image:url("../img/app-dark.svg")}/*# sourceMappingURL=user-status-menu.css.map */

apps/user_status/css/user-status-menu.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["user-status-menu.scss"],"names":[],"mappings":"AAwBA,kBACC,uCAGD,uBACC,4CAID,yBACC,sDAGD,uBACC,oDAGD,sBACC,mDAGD,4BACC,yDACA","file":"user-status-menu.css"}
+{"version":3,"sourceRoot":"","sources":["user-status-menu.scss"],"names":[],"mappings":"AAwBA,kBACC,uCAGD,uBACC","file":"user-status-menu.css"}

apps/user_status/css/user-status-menu.scss

@@ -30,20 +30,3 @@
 	background-image: url("../img/app-dark.svg");
 
 }
-
-.icon-user-status-online {
-	background-image: url('../img/user-status-online.svg');
-}
-
-.icon-user-status-away {
-	background-image: url('../img/user-status-away.svg');
-}
-
-.icon-user-status-dnd {
-	background-image: url('../img/user-status-dnd.svg');
-}
-
-.icon-user-status-invisible {
-	background-image: url('../img/user-status-invisible.svg');
-	filter: var(--background-invert-if-dark);
-}

apps/user_status/img/user-status-away.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="none"/><path d="m10.615 2.1094c-4.8491 0.68106-8.6152 4.8615-8.6152 9.8906 0 5.5 4.5 10 10 10 5.0292 0 9.2096-3.7661 9.8906-8.6152-1.4654 1.601-3.5625 2.6152-5.8906 2.6152-4.4 0-8-3.6-8-8 0-2.3281 1.0143-4.4252 2.6152-5.8906z" fill="#f4a331"/></svg>

apps/user_status/img/user-status-dnd.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="m12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z" fill="#ed484c"/><path d="m8 10h8c1.108 0 2 0.892 2 2s-0.892 2-2 2h-8c-1.108 0-2-0.892-2-2s0.892-2 2-2z" fill="#fdffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="paint-order:stroke markers fill"/></svg>

apps/user_status/img/user-status-invisible.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="m12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 4a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z"/></svg>

apps/user_status/img/user-status-online.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8 16h8v-8h-8v8zm4-14c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z" fill="#49B382"/></svg>

apps/user_status/src/UserStatus.vue

@@ -25,16 +25,19 @@
 		<button v-if="!inline"
 			class="user-status-menu-item"
 			@click.stop="openModal">
-			<span aria-hidden="true" :class="statusIcon" class="user-status-icon" />
+			<NcUserStatusIcon class="user-status-icon"
+				:status="statusType"
+				aria-hidden="true" />
 			{{ visibleMessage }}
 		</button>
 
 		<!-- Dashboard Status -->
 		<NcButton v-else
-			:icon="statusIcon"
 			@click.stop="openModal">
 			<template #icon>
-				<span aria-hidden="true" :class="statusIcon" class="user-status-icon" />
+				<NcUserStatusIcon class="user-status-icon"
+					:status="statusType"
+					aria-hidden="true" />
 			</template>
 			{{ visibleMessage }}
 		</NcButton>
@@ -47,6 +50,7 @@
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
 import debounce from 'debounce'
 
 import { sendHeartbeat } from './services/heartbeatService.js'
@@ -57,6 +61,7 @@ export default {
 
 	components: {
 		NcButton,
+		NcUserStatusIcon,
 		SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'),
 	},
 	mixins: [OnlineStatusMixin],

apps/user_status/src/components/OnlineStatusSelect.vue

@@ -29,25 +29,28 @@
 			@change="onChange">
 		<label :for="id" class="user-status-online-select__label">
 			{{ label }}
-			<span :class="icon" aria-hidden="true" role="img" />
+			<NcUserStatusIcon :status="type"
+				aria-hidden="true" />
 			<em class="user-status-online-select__subline">{{ subline }}</em>
 		</label>
 	</div>
 </template>
 
 <script>
+import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
+
 export default {
 	name: 'OnlineStatusSelect',
 
+	components: {
+		NcUserStatusIcon,
+	},
+
 	props: {
 		checked: {
 			type: Boolean,
 			default: false,
 		},
-		icon: {
-			type: String,
-			required: true,
-		},
 		type: {
 			type: String,
 			required: true,
@@ -101,8 +104,8 @@ $label-padding: 8px;
 
 		span {
 			position: absolute;
-			top: calc(50% - math.div($icon-size, 2));
-			left: $label-padding;
+			top: calc(50% - 10px);
+			left: 10px;
 			display: block;
 			width: $icon-size;
 			height: $icon-size;
@@ -123,5 +126,4 @@ $label-padding: 8px;
 		color: var(--color-text-lighter);
 	}
 }
-
 </style>

apps/user_status/src/mixins/OnlineStatusMixin.js

@@ -68,31 +68,6 @@ export default {
 
 			return this.$t('user_status', 'Set status')
 		},
-
-		/**
-		 * The status indicator icon
-		 *
-		 * @return {string | null}
-		 */
-		statusIcon() {
-			switch (this.statusType) {
-			case 'online':
-				return 'icon-user-status-online'
-
-			case 'away':
-			case 'busy':
-				return 'icon-user-status-away'
-
-			case 'dnd':
-				return 'icon-user-status-dnd'
-
-			case 'invisible':
-			case 'offline':
-				return 'icon-user-status-invisible'
-			}
-
-			return ''
-		},
 	},
 
 	methods: {

apps/user_status/src/services/statusOptionsService.js

@@ -32,22 +32,17 @@ const getAllStatusOptions = () => {
 	return [{
 		type: 'online',
 		label: t('user_status', 'Online'),
-		icon: 'icon-user-status-online',
 	}, {
 		type: 'away',
 		label: t('user_status', 'Away'),
-		icon: 'icon-user-status-away',
 	}, {
 		type: 'dnd',
 		label: t('user_status', 'Do not disturb'),
 		subline: t('user_status', 'Mute all notifications'),
-		icon: 'icon-user-status-dnd',
-
 	}, {
 		type: 'invisible',
 		label: t('user_status', 'Invisible'),
 		subline: t('user_status', 'Appear offline'),
-		icon: 'icon-user-status-invisible',
 	}]
 }
 

core/src/views/UserMenu.vue

@@ -241,8 +241,7 @@ export default {
 						background-color: var(--color-primary-element);
 						color: var(--color-primary-element-text);
 
-						img,
-						svg {
+						img {
 							filter: var(--primary-invert-if-dark);
 						}
 					}
@@ -261,8 +260,7 @@ export default {
 						margin-right: 10px;
 					}
 
-					img,
-					svg {
+					img {
 						filter: var(--background-invert-if-dark);
 					}
 				}