keyboard nav program
This commit is contained in:
parent
a470d6322c
commit
24f6606c2c
8 changed files with 49 additions and 24 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue