keyboard nav program

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

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>