From a257190fc77369e9c9db8d8dd4402fa222b866b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20B=C3=BCchner?=
 <mbuechner@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:51:35 +0100
Subject: [PATCH] DDBPRO-41

---
 .../ddbp/src/js/elements/departments.js       | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/web/themes/custom/ddbp/src/js/elements/departments.js b/web/themes/custom/ddbp/src/js/elements/departments.js
index 5d815f6..53d9b2c 100644
--- a/web/themes/custom/ddbp/src/js/elements/departments.js
+++ b/web/themes/custom/ddbp/src/js/elements/departments.js
@@ -35,9 +35,35 @@ const addHover = () => {
   });
 };
 
+const addFocus = () => {
+  // Add focus event to departmentLinks
+  departmentLinks.forEach(link => {
+    link.addEventListener('focus', ({ target }) => {
+      // remove active image styles
+      [...departmentImages, ...departmentLinks]
+        .forEach((item) => item.classList.remove(departmentShowClass));
+
+      // get hovered element
+      const activeLinkId = target.getAttribute('data-id')
+        ? target.dataset.id
+        : target.closest('[data-id]').dataset.id;
+
+      // select active image and add styles to it
+      const activeImage =
+        document.querySelector(`.departments__images .department-teaser-mini__image[data-id="${activeLinkId}"]`);
+      const activeLink =
+        document.querySelector(`.departments__departments a[data-id="${activeLinkId}"]`);
+
+      activeImage.classList.add(departmentShowClass);
+      activeLink.classList.add(departmentShowClass);
+    });
+  });
+}
+
 (() => {
   if (departments && !isMobile()) {
     setActive();
     addHover();
+    addFocus();
   }
 })();