fix(files): pass WCAG AA for hover rows

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
nextcloud · Sep 28, 2023 · 2f01d43 · 2f01d43
1 parent 45cac16
commit 2f01d43
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
@@ -155,7 +155,7 @@
 
 		<!-- Size -->
 		<td v-if="isSizeAvailable"
-			:style="{ opacity: sizeOpacity }"
+			:style="sizeOpacity"
 			class="files-list__row-size"
 			data-cy-files-list-row-size
 			@click="openDetailsIfAvailable">
@@ -164,7 +164,7 @@
 
 		<!-- Mtime -->
 		<td v-if="isMtimeAvailable"
-			:style="{ opacity: mtimeOpacity }"
+			:style="mtimeOpacity"
 			class="files-list__row-mtime"
 			data-cy-files-list-row-mtime
 			@click="openDetailsIfAvailable">
@@ -371,17 +371,17 @@ export default Vue.extend({
 			return formatFileSize(size, true)
 		},
 		sizeOpacity() {
-			// Whatever theme is active, the contrast will pass WCAG AA
-			// with color main text over main background and an opacity of 0.7
-			const minOpacity = 0.7
 			const maxOpacitySize = 10 * 1024 * 1024
 
 			const size = parseInt(this.source.size, 10) || 0
 			if (!size || size < 0) {
-				return minOpacity
+				return {}
 			}
 
-			return minOpacity + (1 - minOpacity) * Math.pow((this.source.size / maxOpacitySize), 2)
+			const ratio = Math.round(Math.min(100, 100 * Math.pow((this.source.size / maxOpacitySize), 2)))
+			return {
+				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
+			}
 		},
 
 		mtime() {
@@ -391,22 +391,21 @@ export default Vue.extend({
 			return this.t('files_trashbin', 'A long time ago')
 		},
 		mtimeOpacity() {
-			// Whatever theme is active, the contrast will pass WCAG AA
-			// with color main text over main background and an opacity of 0.7
-			const minOpacity = 0.7
 			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
 
 			const mtime = this.source.mtime?.getTime?.()
 			if (!mtime) {
-				return minOpacity
+				return {}
 			}
 
 			// 1 = today, 0 = 31 days ago
-			const factor = (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime
-			if (factor < 0) {
-				return minOpacity
+			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
+			if (ratio < 0) {
+				return {}
+			}
+			return {
+				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
 			}
-			return minOpacity + (1 - minOpacity) * factor
 		},
 		mtimeTitle() {
 			if (this.source.mtime) {

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
@@ -316,7 +316,11 @@ export default Vue.extend({
 
 		.files-list__row {
 			&:hover, &:focus, &:active, &--active, &--dragover {
-				background-color: var(--color-background-dark);
+				// WCAG AA compliant
+				background-color: var(--color-background-hover);
+				// text-maxcontrast have been designed to pass WCAG AA over
+				// a white background, we need to adjust then.
+				--color-text-maxcontrast: var(--color-main-text);
 				> * {
 					--color-border: var(--color-border-dark);
 				}
@@ -475,8 +479,7 @@ export default Vue.extend({
 
 		.files-list__row-mtime,
 		.files-list__row-size {
-			// opacity varies with the size
-			color: var(--color-main-text);
+			color: var(--color-text-maxcontrast);
 		}
 		.files-list__row-size {
 			width: calc(var(--row-height) * 1.5);