From 6e36cf485e78cec8ea39bce6b47292bf874f7f57 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Mon, 12 Aug 2024 10:37:25 +0200
Subject: [PATCH] refinin  the acessibility of the lightbox component

---
 .../lightbox-gallery/lightbox-gallery.php     |  8 +-
 acf-blocks/lightbox-gallery/lightbox.js       | 17 +++-
 acf-blocks/lightbox-gallery/lightbox_old.js   | 95 +++++++++++++++++++
 3 files changed, 112 insertions(+), 8 deletions(-)
 create mode 100644 acf-blocks/lightbox-gallery/lightbox_old.js

diff --git a/acf-blocks/lightbox-gallery/lightbox-gallery.php b/acf-blocks/lightbox-gallery/lightbox-gallery.php
index 460f3cf..89199e1 100644
--- a/acf-blocks/lightbox-gallery/lightbox-gallery.php
+++ b/acf-blocks/lightbox-gallery/lightbox-gallery.php
@@ -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") ?>'>
diff --git a/acf-blocks/lightbox-gallery/lightbox.js b/acf-blocks/lightbox-gallery/lightbox.js
index aba5fcf..16691b7 100644
--- a/acf-blocks/lightbox-gallery/lightbox.js
+++ b/acf-blocks/lightbox-gallery/lightbox.js
@@ -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--;
diff --git a/acf-blocks/lightbox-gallery/lightbox_old.js b/acf-blocks/lightbox-gallery/lightbox_old.js
new file mode 100644
index 0000000..04746d4
--- /dev/null
+++ b/acf-blocks/lightbox-gallery/lightbox_old.js
@@ -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();
+});