src/components/home/contentAuth.vue

@@ -9,7 +9,7 @@
 			class="app-container"
 		>
 			<navigation/>
-			<div
+			<main
 				:class="[
 					{ 'is-menu-enabled': menuActive },
 					$route.name,
@@ -35,7 +35,7 @@
 				>
 					<icon icon="keyboard"/>
 				</a>
-			</div>
+			</main>
 		</div>
 	</div>
 </template>

src/components/home/navigation.vue

@@ -1,6 +1,6 @@
 <template>
-	<div :class="{'is-active': menuActive}" class="namespace-container">
-		<div class="menu top-menu">
+	<aside :class="{'is-active': menuActive}" class="namespace-container">
+		<nav class="menu top-menu">
 			<router-link :to="{name: 'home'}" class="logo">
 				<Logo width="164" height="48" />
 			</router-link>
@@ -46,9 +46,9 @@
 					</router-link>
 				</li>
 			</ul>
-		</div>
+		</nav>
 
-		<aside class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
+		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
 			<template v-for="(n, nk) in namespaces" :key="n.id" >
 				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
 					<span
@@ -145,9 +145,9 @@
 					</draggable>
 				</div>
 			</template>
-		</aside>
+		</nav>
 		<PoweredByLink />
-	</div>
+	</aside>
 </template>
 
 <script>

src/components/home/topNavigation.vue

@@ -1,9 +1,8 @@
 <template>
-	<nav
+	<header
 		:class="{'has-background': background}"
 		aria-label="main navigation"
 		class="navbar main-theme is-fixed-top"
-		role="navigation"
 	>
 		<router-link :to="{name: 'home'}" class="logo-link">
 			<Logo width="164" height="48"/>
@@ -77,7 +76,7 @@
 				</dropdown>
 			</div>
 		</div>
-	</nav>
+	</header>
 </template>
 
 <script>

src/components/tasks/partials/attachments.vue

@@ -341,6 +341,10 @@ export default {
         height: auto;
         text-shadow: var(--shadow-md);
         animation: bounce 2s infinite;
+		
+		@media (prefers-reduced-motion: reduce) {
+          animation: none;
+		}
       }
 
       .hint {

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,17 @@
 				: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)"
+				:aria-expanded="showDefer ? 'true' : 'false'"
 			>
 				- {{ $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/helpers/time/formatDate.js

@@ -1,5 +1,5 @@
 import {createDateFromString} from '@/helpers/time/createDateFromString'
-import {format, formatDistanceToNow} from 'date-fns'
+import {format, formatDistanceToNow, formatISO as formatISOfns} from 'date-fns'
 import {enGB, de, fr, ru} from 'date-fns/locale'
 
 import {i18n} from '@/i18n'
@@ -44,3 +44,7 @@ export const formatDateSince = (date) => {
 		addSuffix: true,
 	})
 }
+
+export function formatISO(date) {
+	return date ? formatISOfns(date) : ''
+}

src/main.ts

@@ -18,7 +18,7 @@ declare global {
 	}
 }
 
-import {formatDate, formatDateShort, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {formatDate, formatDateShort, formatDateLong, formatDateSince, formatISO} from '@/helpers/time/formatDate'
 // @ts-ignore
 import {VERSION} from './version.json'
 
@@ -85,6 +85,7 @@ app.mixin({
 		format: formatDate,
 		formatDate: formatDateLong,
 		formatDateShort: formatDateShort,
+		formatISO,
 		getNamespaceTitle,
 		getListTitle,
 		setTitle,

src/styles/custom-properties/colors.scss

@@ -60,9 +60,9 @@
   --danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
 
 	// var(--primary) / $blue is #1973ff
-  --primary-h: 216.5deg;
-  --primary-s: 100%;
-  --primary-l: 54.9%;
+  --primary-h: 217deg;
+  --primary-s: 98%;
+  --primary-l: 53%;
   --primary-a: 1;
   --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
   --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
@@ -122,5 +122,10 @@
     // Custom color variables we need to override
     --card-border-color: hsla(var(--grey-100-hsl), 0.3);
     --logo-text-color: var(--grey-700);
+    
+    // Slightly different primary color to make sure it has a sufficent contrast ratio
+    --primary-h: 217deg;
+    --primary-s: 98%;
+    --primary-l: 58%;
   }
 }

src/views/migrator/MigrateService.vue

@@ -254,4 +254,13 @@ export default {
 		background-color: var(--primary-dark);
 	}
 }
+
+@media (prefers-reduced-motion: reduce) {
+	@keyframes wave {
+		10% {
+			transform: translate(0, 0);
+			background-color: var(--primary);
+		}
+	}
+}
 </style>

src/views/namespaces/ListNamespaces.vue

@@ -22,7 +22,7 @@
 			</router-link>
 		</p>
 
-		<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
+		<section :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
 			<x-button
 				:to="{name: 'list.create', params: {id:  n.id}}"
 				class="is-pulled-right"
@@ -64,7 +64,7 @@
 					:show-archived="showArchived"
 				/>
 			</div>
-		</div>
+		</section>
 	</div>
 </template>
 

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>
@@ -931,4 +937,12 @@ $flash-background-duration: 750ms;
     background: transparent;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+	@keyframes flash-background {
+		0% {
+			background: transparent;
+		}
+	}
+}
 </style>