From 0e47cebed5b93039fd29740981fae33be3eae95c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 16 Jan 2022 17:57:19 +0100
Subject: [PATCH] feat(a11y): use <time> tag for dates everywhere

---
 .../tasks/partials/date-table-cell.vue        |  4 ++-
 src/components/tasks/partials/kanban-card.vue |  4 +--
 .../tasks/partials/singleTaskInList.vue       |  6 +++--
 src/main.ts                                   |  2 ++
 src/views/tasks/TaskDetailView.vue            | 26 ++++++++++++-------
 5 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/tasks/partials/date-table-cell.vue b/src/components/tasks/partials/date-table-cell.vue
index e405c0b30..8df948c71 100644
--- a/src/components/tasks/partials/date-table-cell.vue
+++ b/src/components/tasks/partials/date-table-cell.vue
@@ -1,6 +1,8 @@
 <template>
 	<td v-tooltip="+date === 0 ? '' : formatDate(date)">
-		{{ +date === 0 ? '-' : formatDateSince(date) }}
+		<time :datetime="date ? formatISO(date) : null">
+			{{ +date === 0 ? '-' : formatDateSince(date) }}
+		</time>
 	</td>
 </template>
 
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index e19106433..e901ac847 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -28,9 +28,9 @@
 			<span class="icon">
 				<icon :icon="['far', 'calendar-alt']"/>
 			</span>
-			<span>
+			<time :datetime="formatISO(task.dueDate)">
 				{{ formatDateSince(task.dueDate) }}
-			</span>
+			</time>
 		</span>
 		<h3>{{ task.title }}</h3>
 		<progress
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 9e955d5c8..3b928ad20 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -39,14 +39,16 @@
 				:user="a"
 				v-for="(a, i) in task.assignees"
 			/>
-			<i
+			<time
+				:datetime="formatISO(task.dueDate)"
 				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+				class="is-italic"
 				@click.prevent.stop="showDefer = !showDefer"
 				v-if="+new Date(task.dueDate) > 0"
 				v-tooltip="formatDate(task.dueDate)"
 			>
 				- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
-			</i>
+			</time>
 			<transition name="fade">
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
 			</transition>
diff --git a/src/main.ts b/src/main.ts
index ad2cbeca3..552e5c3d9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,6 +19,7 @@ declare global {
 }
 
 import {formatDate, formatDateShort, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {formatISO} from 'date-fns'
 // @ts-ignore
 import {VERSION} from './version.json'
 
@@ -85,6 +86,7 @@ app.mixin({
 		format: formatDate,
 		formatDate: formatDateLong,
 		formatDateShort: formatDateShort,
+		formatISO,
 		getNamespaceTitle,
 		getListTitle,
 		setTitle,
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index e2171698e..da5203ef9 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -386,22 +386,28 @@
 
 					<!-- Created / Updated [by] -->
 					<p class="created">
-						<i18n-t keypath="task.detail.created">
-							<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
-							{{ task.createdBy.getDisplayName() }}
-						</i18n-t>
+						<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
+							<i18n-t keypath="task.detail.created">
+								<span>{{ formatDateSince(task.created) }}</span>
+								{{ task.createdBy.getDisplayName() }}
+							</i18n-t>
+						</time>
 						<template v-if="+new Date(task.created) !== +new Date(task.updated)">
 							<br/>
 							<!-- Computed properties to show the actual date every time it gets updated -->
-							<i18n-t keypath="task.detail.updated">
-								<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
-							</i18n-t>
+							<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
+								<i18n-t keypath="task.detail.updated">
+									<span>{{ updatedSince }}</span>
+								</i18n-t>
+							</time>
 						</template>
 						<template v-if="task.done">
 							<br/>
-							<i18n-t keypath="task.detail.doneAt">
-								<span v-tooltip="doneFormatted">{{ doneSince }}</span>
-							</i18n-t>
+							<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
+								<i18n-t keypath="task.detail.doneAt">
+									<span>{{ doneSince }}</span>
+								</i18n-t>
+							</time>
 						</template>
 					</p>
 				</div>