Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refinin the acessibility of the lightbox component

Browse Source
This commit is contained in:
Antoine M 2024-08-12 10:37:25 +02:00
parent 4079d6c7bb
commit 6e36cf485e
3 changed files with 112 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
acf-blocks/lightbox-gallery/lightbox-gallery.php
View File

@ -7,13 +7,13 @@ $galleryDatas = get_field('gallery');
<div class="lightbox-gallery">
<?php foreach ($galleryDatas as $picture): ?>
<button class="lightbox-gallery__picture" title="ouvrir l'image en grand ">
<img class="lightbox-gallery__picture" src="<?php echo $picture['url'] ?>" />
<button class="lightbox-gallery__trigger">
<img class="lightbox-gallery__picture" src="<?php echo $picture['url'] ?>" alt="<?php echo $picture['alt'] ?>" />
</button>
<?php endforeach; ?>
</div>
<div class="lightbox lightbox--inactive">
<div class="lightbox lightbox--inactive" aria-hidden="true">
<div class="lightbox__container">
<button class="lightbox__close cta cta--button cta--button--mini cta--outline">
Fermer
@ -22,7 +22,7 @@ $galleryDatas = get_field('gallery');
<img src='<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/slider-next-right.svg' ?>' alt='<?php echo __("Image Précédente", "homegrade-theme__texte-fonctionnel") ?>'>
</button>
<div class="lightbox__current-picture">
<img src="https://picsum.photos/id/237/200/300" alt="" />
<img src="" alt="" />
</div>
<button class="lightbox__next">
<img src='<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/slider-next-right.svg' ?>' alt='<?php echo __("Image Suivante", "homegrade-theme__texte-fonctionnel") ?>'>

17
acf-blocks/lightbox-gallery/lightbox.js
View File

@ -9,15 +9,18 @@ class Lightbox {
if (this.gallery) {
this.pictures = this.gallery.querySelectorAll("img.lightbox-gallery__picture");
this.lightboxTriggers = this.gallery.querySelectorAll(".lightbox-gallery__trigger");
this.init();
}
}
init() {
this.pictures.forEach((picture, index) => {
picture.addEventListener("click", () => {
this.setCurrentPicture(this.pictures);
this.lightboxTriggers.forEach((button, index) => {
button.addEventListener("click", () => {
this.showLightbox();
this.setCurrentPicture(picture);
this.setCurrentPicture(this.pictures[index]);
this.setCurrentPictureIndex(index);
});
});
@ -46,17 +49,24 @@ class Lightbox {
if (event.key === "ArrowRight") {
this.showNextPicture();
}
if (event.key === "TaEnter") {
this.showNextPicture();
}
});
}
showLightbox() {
this.lightbox.classList.remove("lightbox--inactive");
this.lightbox.classList.add("lightbox--active");
this.closeButton.focus();
this.lightbox.setAttribute("aria-hidden", "false");
}
hideLightbox() {
this.lightbox.classList.remove("lightbox--active");
this.lightbox.classList.add("lightbox--inactive");
this.lightbox.setAttribute("aria-hidden", "true");
this.lightboxTriggers[this.currentPictureIndex].focus();
}
setCurrentPicture(picture) {
@ -67,7 +77,6 @@ class Lightbox {
setCurrentPictureIndex(index) {
this.currentPictureIndex = index;
}
showPreviousPicture() {
if (this.currentPictureIndex > 0) {
this.currentPictureIndex--;

95
acf-blocks/lightbox-gallery/lightbox_old.js Normal file
View File

@ -0,0 +1,95 @@
class Lightbox {
constructor() {
this.lightbox = document.querySelector(".lightbox");
this.closeButton = this.lightbox.querySelector(".lightbox__close");
this.prevButton = this.lightbox.querySelector(".lightbox__prev");
this.nextButton = this.lightbox.querySelector(".lightbox__next");
this.gallery = document.querySelector(".lightbox-gallery");
this.currentPictureIndex = 0;
if (this.gallery) {
this.pictures = this.gallery.querySelectorAll("img.lightbox-gallery__picture");
this.init();
}
}
init() {
this.pictures.forEach((picture, index) => {
picture.addEventListener("click", () => {
this.showLightbox();
this.setCurrentPicture(picture);
this.setCurrentPictureIndex(index);
});
});
this.closeButton.addEventListener("click", () => {
this.hideLightbox();
});
this.prevButton.addEventListener("click", () => {
this.showPreviousPicture();
});
this.nextButton.addEventListener("click", () => {
this.showNextPicture();
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
this.hideLightbox();
}
if (event.key === "ArrowLeft") {
this.showPreviousPicture();
}
if (event.key === "ArrowRight") {
this.showNextPicture();
}
});
}
showLightbox() {
this.lightbox.classList.remove("lightbox--inactive");
this.lightbox.classList.add("lightbox--active");
this.closeButton.focus();
this.lightbox.setAttribute("aria-hidden", "false");
}
hideLightbox() {
this.lightbox.classList.remove("lightbox--active");
this.lightbox.classList.add("lightbox--inactive");
this.lightbox.setAttribute("aria-hidden", "true");
}
setCurrentPicture(picture) {
const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img");
viewedPicture.src = picture.src;
}
setCurrentPictureIndex(index) {
this.currentPictureIndex = index;
}
showPreviousPicture() {
if (this.currentPictureIndex > 0) {
this.currentPictureIndex--;
} else {
this.currentPictureIndex = this.pictures.length - 1;
}
this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
}
showNextPicture() {
if (this.currentPictureIndex < this.pictures.length - 1) {
this.currentPictureIndex++;
} else {
this.currentPictureIndex = 0;
}
this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
}
}
document.addEventListener("DOMContentLoaded", () => {
new Lightbox();
});