Merge pull request #33480 from nextcloud/bugfix/noid/fix-workflow-engine-a11y

Fix workflow engine a11y and spacing of icons

apps/theming/css/default.css

@@ -58,4 +58,5 @@
   --breakpoint-mobile: 1024px;
   --primary-invert-if-bright: no;
   --background-invert-if-dark: no;
+  --background-invert-if-bright: invert(100%);
 }

apps/theming/lib/Themes/DarkTheme.php

@@ -91,6 +91,7 @@ class DarkTheme extends DefaultTheme implements ITheme {
 			'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
 
 			'--background-invert-if-dark' => 'invert(100%)',
+			'--background-invert-if-bright' => 'no',
 		]);
 	}
 }

apps/theming/lib/Themes/DefaultTheme.php

@@ -188,6 +188,7 @@ class DefaultTheme implements ITheme {
 			// other theme with media queries
 			'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no',
 			'--background-invert-if-dark' => 'no',
+			'--background-invert-if-bright' => 'invert(100%)',
 		];
 
 		// Register image variables only if custom-defined

apps/workflowengine/src/components/Checks/FileMimeType.vue

@@ -32,12 +32,18 @@
 			@input="setValue">
 			<template slot="singleLabel" slot-scope="props">
 				<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
-				<img v-else :src="props.option.iconUrl">
+				<img v-else
+					class="option__icon-img"
+					:src="props.option.iconUrl"
+					alt="">
 				<span class="option__title option__title_single">{{ props.option.label }}</span>
 			</template>
 			<template slot="option" slot-scope="props">
 				<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
-				<img v-else :src="props.option.iconUrl">
+				<img v-else
+					class="option__icon-img"
+					:src="props.option.iconUrl"
+					alt="">
 				<span class="option__title">{{ props.option.label }}</span>
 			</template>
 		</Multiselect>
@@ -137,7 +143,7 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 	.multiselect, input[type='text'] {
 		width: 100%;
 	}
@@ -148,4 +154,14 @@ export default {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	.option__icon {
+		display: inline-block;
+		min-width: 30px;
+		background-position: left;
+	}
+
+	.option__icon-img {
+		margin-right: 14px;
+	}
 </style>

apps/workflowengine/src/components/Checks/RequestURL.vue

@@ -136,8 +136,14 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 	.multiselect, input[type='text'] {
 		width: 100%;
 	}
+
+	.option__icon {
+		display: inline-block;
+		min-width: 30px;
+		background-position: left;
+	}
 </style>

apps/workflowengine/src/components/Event.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="event">
 		<div v-if="operation.isComplex && operation.fixedEntity !== ''" class="isComplex">
-			<img class="option__icon" :src="entity.icon">
+			<img class="option__icon" :src="entity.icon" alt="">
 			<span class="option__title option__title_single">{{ operation.triggerHint }}</span>
 		</div>
 		<Multiselect v-else
@@ -14,12 +14,12 @@
 			@input="updateEvent">
 			<template slot="selection" slot-scope="{ values, isOpen }">
 				<div v-if="values.length && !isOpen" class="eventlist">
-					<img class="option__icon" :src="values[0].entity.icon">
+					<img class="option__icon" :src="values[0].entity.icon" alt="">
 					<span v-for="(value, index) in values" :key="value.id" class="text option__title option__title_single">{{ value.displayName }} <span v-if="index+1 < values.length">, </span></span>
 				</div>
 			</template>
 			<template slot="option" slot-scope="props">
-				<img class="option__icon" :src="props.option.entity.icon">
+				<img class="option__icon" :src="props.option.entity.icon" alt="">
 				<span class="option__title">{{ props.option.displayName }}</span>
 			</template>
 		</Multiselect>
@@ -131,6 +131,7 @@ export default {
 	.option__icon {
 		width: 16px;
 		height: 16px;
+		filter: var(--background-invert-if-dark);
 	}
 
 	.eventlist img,

apps/workflowengine/src/styles/operation.scss

@@ -68,11 +68,11 @@ small {
 		margin: 0;
 		margin-right: 10px;
 		&:not(.icon-invert) {
-			filter: invert(1);
+			filter: var(--background-invert-if-bright);
 		}
 	}
 }
 
 .colored .icon-invert {
-	filter: invert(1);
+	filter: var(--background-invert-if-bright);
 }