feat(a11y): use <time> tag for dates everywhere

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>
 

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

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>

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,

src/views/tasks/TaskDetailView.vue

@@ -386,22 +386,28 @@
 
 					<!-- Created / Updated [by] -->
 					<p class="created">
-						<i18n-t keypath="task.detail.created">
+						<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
-							<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
+							<i18n-t keypath="task.detail.created">
-							{{ task.createdBy.getDisplayName() }}
+								<span>{{ formatDateSince(task.created) }}</span>
-						</i18n-t>
+								{{ 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">
+							<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
-								<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
+								<i18n-t keypath="task.detail.updated">
-							</i18n-t>
+									<span>{{ updatedSince }}</span>
+								</i18n-t>
+							</time>
 						</template>
 						<template v-if="task.done">
 							<br/>
-							<i18n-t keypath="task.detail.doneAt">
+							<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
-								<span v-tooltip="doneFormatted">{{ doneSince }}</span>
+								<i18n-t keypath="task.detail.doneAt">
-							</i18n-t>
+									<span>{{ doneSince }}</span>
+								</i18n-t>
+							</time>
 						</template>
 					</p>
 				</div>