studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

keyboard nav program

Browse source
This commit is contained in:
isUnknown 2024-09-20 10:14:43 +02:00
parent a470d6322c
commit 24f6606c2c
8 changed files with 49 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/src/events-grid.css
View file

@ -31,6 +31,7 @@
}
.event-card__infos .ticket {
position: absolute;
z-index: 5;
margin-top: 0.3rem;
padding: 0.5rem;

5
assets/css/src/ticket.css
View file

@ -32,8 +32,9 @@
}
}
.ticket {
display: inline-flex;
.ticket,
.ticket-link {
display: inline-flex !important;
}
a:not([disabled]):hover > .ticket svg,

5
assets/css/src/vanilla.css
View file

@ -32,3 +32,8 @@ picture svg {
a[disabled] {
cursor: not-allowed;
}
a:focus-visible,
button:focus-visible {
outline: 4px solid var(--color-season);
}

6
assets/js/functions.js
View file

@ -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");

13
site/snippets/calendar-strip.php
View file

@ -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>

15
site/snippets/collapsable-section.php
View file

@ -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>

18
site/snippets/nav.php
View file

@ -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>

10
site/templates/program.php
View file

@ -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 ?>