From 24f6606c2ca96b11e19079aa83816fc0b7a6128b Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 20 Sep 2024 10:14:43 +0200
Subject: [PATCH] keyboard nav program

---
 assets/css/src/events-grid.css        |  1 +
 assets/css/src/ticket.css             |  5 +++--
 assets/css/src/vanilla.css            |  5 +++++
 assets/js/functions.js                |  6 ++++++
 site/snippets/calendar-strip.php      | 13 +++++++------
 site/snippets/collapsable-section.php | 15 +++++++++++++--
 site/snippets/nav.php                 | 18 +++++++++---------
 site/templates/program.php            | 10 +++++-----
 8 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/assets/css/src/events-grid.css b/assets/css/src/events-grid.css
index 583a119..b1fb734 100644
--- a/assets/css/src/events-grid.css
+++ b/assets/css/src/events-grid.css
@@ -31,6 +31,7 @@
 }
 
 .event-card__infos .ticket {
+  position: absolute;
   z-index: 5;
   margin-top: 0.3rem;
   padding: 0.5rem;
diff --git a/assets/css/src/ticket.css b/assets/css/src/ticket.css
index 7a969e8..489ba0d 100644
--- a/assets/css/src/ticket.css
+++ b/assets/css/src/ticket.css
@@ -32,8 +32,9 @@
   }
 }
 
-.ticket {
-  display: inline-flex;
+.ticket,
+.ticket-link {
+  display: inline-flex !important;
 }
 
 a:not([disabled]):hover > .ticket svg,
diff --git a/assets/css/src/vanilla.css b/assets/css/src/vanilla.css
index 4a19d8a..f033f78 100644
--- a/assets/css/src/vanilla.css
+++ b/assets/css/src/vanilla.css
@@ -32,3 +32,8 @@ picture svg {
 a[disabled] {
   cursor: not-allowed;
 }
+
+a:focus-visible,
+button:focus-visible {
+  outline: 4px solid var(--color-season);
+}
diff --git a/assets/js/functions.js b/assets/js/functions.js
index fb1224e..4b0c64a 100644
--- a/assets/js/functions.js
+++ b/assets/js/functions.js
@@ -2,6 +2,12 @@ let handleClick;
 
 function expandNav(nodes) {
   nodes.expandedNav.style = "transition: top 0.6s var(--curve-quick-slow);";
+  nodes.expandedNav
+    .querySelectorAll("[tabindex]:not(.expanded-nav__logo-link)")
+    .forEach((element) => {
+      console.log();
+      element.setAttribute("tabindex", "0");
+    });
   setTimeout(() => {
     nodes.expandedNav.classList.add("open");
 
diff --git a/site/snippets/calendar-strip.php b/site/snippets/calendar-strip.php
index d247197..b3bea6f 100644
--- a/site/snippets/calendar-strip.php
+++ b/site/snippets/calendar-strip.php
@@ -117,12 +117,12 @@
   x-init="updateDates()"
 >
   <div class="calendar-strip__selector">
-    <button class="prev-month" @click="prevMonth()" :disabled="currentMonthIndex === 9">←</button>
+    <button class="prev-month" @click="prevMonth()" :disabled="currentMonthIndex === 9" tabindex="-1">←</button>
     <span x-text="monthName"></span>
-    <button class="next-month" @click="nextMonth()" :disabled="currentMonthIndex === 8">→</button>
+    <button class="next-month" @click="nextMonth()" :disabled="currentMonthIndex === 8" tabindex="-1">→</button>
   </div>
 
-  <button @click="prevWeek()" class="calendar-strip__change-week calendar-strip__next-week">←</button>
+  <button @click="prevWeek()" class="calendar-strip__change-week calendar-strip__next-week" tabindex="-1">←</button>
   
   <ul class="calendar-strip__days">
     <template x-for="(week, weekIndex) in currentWeeks">
@@ -132,9 +132,10 @@
             <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && date.index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + date.index * 0.03 + 's'">
               <button 
               :class="!date || date.full !== today ? '' : 'today'"
-                :disabled="!date || date.sessions.length === 0 ? true : false" 
-                :title="!date || date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
-                @mouseover="handleDayHover()"
+              :disabled="!date || date.sessions.length === 0 ? true : false" 
+              :title="!date || date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
+              @mouseover="handleDayHover()"
+              tabindex="-1"
               >
                 <template  x-if="date">
                   <span x-text="date.initial"></span>
diff --git a/site/snippets/collapsable-section.php b/site/snippets/collapsable-section.php
index f5970e1..1642d21 100644
--- a/site/snippets/collapsable-section.php
+++ b/site/snippets/collapsable-section.php
@@ -1,7 +1,18 @@
 <section class="collapsable" x-data="{
-  open: false
+  open: false,
+  openSection(event) {
+    const section = event.target.closest('.collapsable')
+    section.querySelectorAll('[tabindex]').forEach(item => {
+      if (item.getAttribute('tabindex') == -1) {
+        item.setAttribute('tabindex', 0)
+      } else {
+        item.setAttribute('tabindex', -1)
+      }
+    })
+    this.open = !this.open
+  }
 }">
-  <button class="toggle" :class="open ? 'open' : ''" @click="open = !open" :title="open ? 'fermer': 'ouvrir'" :aria-expanded="open ? true : false">
+  <button class="toggle" :class="open ? 'open' : ''" @click="openSection($event)" :title="open ? 'fermer': 'ouvrir'" :aria-expanded="open ? true : false">
     <h4><?= $title ?></h4>
     <span class="arrow-right" :class="open ? 'open' : ''">→</span>
   </button>
diff --git a/site/snippets/nav.php b/site/snippets/nav.php
index 2b864dd..37faf88 100644
--- a/site/snippets/nav.php
+++ b/site/snippets/nav.php
@@ -1,6 +1,6 @@
 <header class="main-header">
-  <a href="/" title="Aller à l'accueil">
   <nav class="main-nav" aria-label="main-menu">
+    <a href="/" title="Aller à l'accueil">
       <h1 class="logo">
         <span>
           Nouveau
@@ -38,7 +38,7 @@
 
 <!--========== EXPANDED NAV ==========-->
 <nav id="expanded-nav">
-  <a class="expanded-nav__logo-link" href="/" title="Aller à l'accueil">
+  <a class="expanded-nav__logo-link" href="/" title="Aller à l'accueil" tabindex="-1">
     <h1 class="logo">
       <span>
         N<span class="logo__detail">ouveau</span>
@@ -57,7 +57,7 @@
           open: false
         }">
           <h4 class="expanded-nav__category">
-            <a <?= e($page->url() == $navItem->url(), 'aria-current="page" ') ?>href="<?= $category->url() ?>"><?= $category->title() ?></a>
+            <a <?= e($page->url() == $navItem->url(), 'aria-current="page" ') ?>href="<?= $category->url() ?>" tabindex="-1"><?= $category->title() ?></a>
             <button class="toggle" :class="open ? 'open': ''" @click="open = !open">→</button>
           </h4>
           
@@ -65,13 +65,13 @@
             <?php foreach($category->children() as $subcategory): ?>
                 <?php if ($subcategory->isIndexed() == 'true'): ?>
                   <li>
-                    <a class="expanded-nav__subcategory" href="<?= $category->url() . '/#' . $subcategory->slug() ?>"><?= $subcategory->title() ?></a>
+                    <a class="expanded-nav__subcategory" href="<?= $category->url() . '/#' . $subcategory->slug() ?>" tabindex="-1"><?= $subcategory->title() ?></a>
                   </li>
                 <?php endif ?>
             <?php endforeach ?>
             <?php if ($category->template() == 'program'): ?>
               <?php foreach($category->categories()->split() as $subcategory): ?>
-                <li><a class="expanded-nav__subcategory" href="<?= $category->url() . '/?tab=Calendrier+—+' . urlencode($subcategory) ?>"><?= $subcategory ?></a></li>
+                <li><a class="expanded-nav__subcategory" href="<?= $category->url() . '/?tab=Calendrier+—+' . urlencode($subcategory) ?>" tabindex="-1"><?= $subcategory ?></a></li>
               <?php endforeach ?>
             <?php endif ?>
           </ul>
@@ -79,22 +79,22 @@
     <?php endforeach ?>
     <li class="expanded-nav__links">
       <div class="expanded-nav__ticketing">
-        <a class="ticket-link" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
+        <a class="ticket-link" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie" tabindex="-1"><?php snippet('ticket') ?> Billetterie</a>
       </div>
       <div class="expanded-nav__socials">
         <strong>Suivez-nous</strong>
         <ul class="social-icons">
           <li>
-            <a href="<?= $site->instagram() ?>" class="invert" target="_blank" title="Voir la page Instagram du NTB"><?= svg('assets/images/icons/instagram.svg') ?></a>
+            <a href="<?= $site->instagram() ?>" class="invert" target="_blank" title="Voir la page Instagram du NTB" tabindex="-1"><?= svg('assets/images/icons/instagram.svg') ?></a>
           </li>
           <li>
-            <a href="<?= $site->facebook() ?>" class="invert" target="_blank" title="Voir la page Facebook du NTB"><?= svg('assets/images/icons/facebook.svg') ?></a>
+            <a href="<?= $site->facebook() ?>" class="invert" target="_blank" title="Voir la page Facebook du NTB" tabindex="-1"><?= svg('assets/images/icons/facebook.svg') ?></a>
           </li>
         </ul>
       </div>
     </li>
   </ul>
-  <button class="close-btn" title="Fermer le menu">
+  <button class="close-btn" title="Fermer le menu" tabindex="-1">
     <span class="close-btn__line"></span>
   </button>
 </nav>
\ No newline at end of file
diff --git a/site/templates/program.php b/site/templates/program.php
index 06ebe33..558c0d4 100644
--- a/site/templates/program.php
+++ b/site/templates/program.php
@@ -135,17 +135,17 @@
                         </div>
                         <div class="session__info session__info--ticket">
                           <?php if ($session['bookableStock'] === 'free'): ?>
-                            <a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?>Entrée libre</a>
+                            <a class="ticket-link" title="Entrée libre" disabled tabindex="-1"><?php snippet('ticket') ?>Entrée libre</a>
                           <?php elseif ($session['bookableStock'] == 0): ?>
-                            <a class="ticket-link" title="Séance complète" disabled><?php snippet('ticket') ?>Complet</a>
+                            <a class="ticket-link" title="Séance complète" disabled tabindex="-1"><?php snippet('ticket') ?>Complet</a>
                           <?php elseif ($session['bookableStock'] < (($session['totalStock'] / 100) * 25)): ?>
-                            <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?>Plus que quelques places !</a>
+                            <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank" tabindex="-1"><?php snippet('ticket') ?>Plus que quelques places !</a>
                           <?php else: ?>
-                            <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?>Billetterie</a>
+                            <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank" tabindex="-1"><?php snippet('ticket') ?>Billetterie</a>
                           <?php endif ?>
                         </div>
                       </div>
-                      <a class="event-link" href="<?= $session['event-url'] ?>" title="En savoir plus"></a>
+                      <a class="event-link" href="<?= $session['event-url'] ?>" title="En savoir plus" tabindex="-1"></a>
                     </li>
                     </template>
                     <?php endforeach ?>