From 82ffcb17d657d0fd9d216abbf3a47c07bcb0c890 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Sun, 25 Dec 2022 23:56:01 +0100
Subject: [PATCH] feat [front]: a11y time tag and no double tabbable element

---
 front/components/find-us.vue         | 1 +
 front/components/movieCard/full.vue  | 5 +++--
 front/components/movieCard/short.vue | 5 +++--
 front/pages/admin/[id]/edition.vue   | 5 ++++-
 front/pages/admin/[id]/index.vue     | 3 ++-
 front/pages/admin/index.vue          | 4 +++-
 6 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/front/components/find-us.vue b/front/components/find-us.vue
index bfa9517..1a85bbf 100644
--- a/front/components/find-us.vue
+++ b/front/components/find-us.vue
@@ -9,6 +9,7 @@
           label="Nous contacter"
           icon="ri-mail-line"
           class="is-primary"
+          tabindex="-1"
         />
       </a>
     </header>
diff --git a/front/components/movieCard/full.vue b/front/components/movieCard/full.vue
index 65c8690..6dea933 100644
--- a/front/components/movieCard/full.vue
+++ b/front/components/movieCard/full.vue
@@ -64,6 +64,7 @@
               :href="film.facebookEventLink"
               rel="noopener noreferrer"
               target="_blank"
+              tabindex="-1"
             >
               <ButtonIcon
                 label="Événement Facebook"
@@ -79,9 +80,9 @@
             />
           </template>
         </div>
-        <div class="ml-auto title is-4">
+        <time class="ml-auto title is-4" :datetime="film.projectionDate">
           {{ prettyDate.full(film.projectionDate) }}
-        </div>
+        </time>
       </footer>
     </div>
     <MovieCardTrailerModal
diff --git a/front/components/movieCard/short.vue b/front/components/movieCard/short.vue
index c4ad69f..1f0d457 100644
--- a/front/components/movieCard/short.vue
+++ b/front/components/movieCard/short.vue
@@ -57,6 +57,7 @@
                   :href="film.facebookEventLink"
                   rel="noopener noreferrer"
                   target="_blank"
+                  tabindex="-1"
                 >
                   <ButtonIcon
                     label="Événement Facebook"
@@ -74,9 +75,9 @@
                 />
               </template>
             </div>
-            <div class="ml-auto title is-5">
+            <time class="ml-auto title is-5" :datetime="film.projectionDate">
               {{ prettyDate.short(film.projectionDate) }}
-            </div>
+            </time>
           </footer>
         </div>
       </div>
diff --git a/front/pages/admin/[id]/edition.vue b/front/pages/admin/[id]/edition.vue
index 521f1b8..d7b9340 100644
--- a/front/pages/admin/[id]/edition.vue
+++ b/front/pages/admin/[id]/edition.vue
@@ -1,7 +1,10 @@
 <template>
   <main class="section">
     <h1 class="title">
-      Modifier la séance du {{ new Date(film.projectionDate).toLocaleString() }}
+      Modifier la séance du
+      <time :datetime="film.projectionDate">{{
+        new Date(film.projectionDate).toLocaleString()
+      }}</time>
     </h1>
     <AdminForm v-model="film" @save="saveDraft" @publish="publish" />
   </main>
diff --git a/front/pages/admin/[id]/index.vue b/front/pages/admin/[id]/index.vue
index a0c0f14..5de475c 100644
--- a/front/pages/admin/[id]/index.vue
+++ b/front/pages/admin/[id]/index.vue
@@ -5,7 +5,8 @@
         {{ film.isConfirmed ? "Publié" : "Brouillon" }}
       </div>
       <h1 class="mx-5">
-        {{ new Date(film.projectionDate).toLocaleString() || "À planifier" }} -
+        <time v-if="film.projectionDate" :datetime="film.projectionDate">{{ new Date(film.projectionDate).toLocaleString()}}</time>
+        <template v-else>À planifier</template> -
         {{ film.title }}
         <span class="has-text-grey-lighter">#{{ film.id }}</span>
       </h1>
diff --git a/front/pages/admin/index.vue b/front/pages/admin/index.vue
index a8d0dd7..c4e895e 100644
--- a/front/pages/admin/index.vue
+++ b/front/pages/admin/index.vue
@@ -4,7 +4,9 @@
     <ul class="list has-visible-pointer-controls">
       <li v-for="film of films" :key="film.id" class="list-item">
         <nuxt-link :to="`/admin/${film.id}`" class="list-item-content">
-          {{ new Date(film.projectionDate).toLocaleString() || "À planifier" }}
+        <time v-if="film.projectionDate" :datetime="film.projectionDate">{{ new Date(film.projectionDate).toLocaleString()}}</time>
+        <template v-else>À planifier</template> -
+        {{ film.title }}
           - {{ film.title }}
           <template v-if="film.director"> de {{ film.director }}</template>
         </nuxt-link>