From 6b03b7e7a5b47b52ea5d5b6aae2efb945f4dd686 Mon Sep 17 00:00:00 2001
From: Roger Rehnelt <noreply@maennchen1.de>
Date: Sat, 3 Oct 2026 15:23:59 +0200
Subject: GARAN: Label per Tipp und Tastatur aufklappbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der erste Tipp oder der Tastaturfokus zeigt das Label, ein zweiter Tipp folgt dem Link zur EU-Seite; Escape oder ein Tipp daneben schließt es.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 views/css/frontend.css   |  5 ++++-
 views/css/wpsg-theme.css |  3 +++
 views/js/frontend.js     | 45 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/views/css/frontend.css b/views/css/frontend.css
index 35a7605..3013aec 100644
--- a/views/css/frontend.css
+++ b/views/css/frontend.css
@@ -64,7 +64,10 @@ input.wpsg_error { border-color:red !important; border:1px solid red; }
 				}
 			}
 		}
-		&:hover > .tooltip { opacity:1; pointer-events:all; z-index:1; }
+		&:hover > .tooltip { opacity:1; pointer-events:all; z-index:1; }
+		/* Auch per Tastaturfokus und nach dem ersten Tipp (K69, frontend.js); Escape blendet aus */
+		&:focus-visible > .tooltip, &.is-open > .tooltip { opacity:1; pointer-events:all; z-index:1; }
+		&.is-dismissed > .tooltip { opacity:0; pointer-events:none; }
 	}
 }
 
diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 5966cde..e5d6727 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -615,6 +615,9 @@ html body #wpsg_revocation_dialog .inner { background-color:var(--wpsg-color-bac
 			}
 		}
 		&:hover > .tooltip { opacity:1; pointer-events:all; z-index:1; }
+		/* Auch per Tastaturfokus und nach dem ersten Tipp (K69, frontend.js); Escape blendet aus */
+		&:focus-visible > .tooltip, &.is-open > .tooltip { opacity:1; pointer-events:all; z-index:1; }
+		&.is-dismissed > .tooltip { opacity:0; pointer-events:none; }
 	}
 }
 html body .wpsg_product_garan_wrap,
diff --git a/views/js/frontend.js b/views/js/frontend.js
index d622596..6663ea5 100644
--- a/views/js/frontend.js
+++ b/views/js/frontend.js
@@ -309,3 +309,48 @@
 	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wpsg_garanTooltipPosition); else wpsg_garanTooltipPosition();
 	window.addEventListener('resize', wpsg_garanTooltipPosition);
 	jQuery(document).ajaxComplete(wpsg_garanTooltipPosition);
+
+	/**
+	 * GARAN-Label per Tipp und Tastatur (K69)
+	 *
+	 * Der erste Tipp klappt das Label auf, der zweite folgt dem Link zur EU-Seite. Maus: Darüberfahren zeigt es,
+	 * Klick folgt dem Link. Tastatur: Der Fokus zeigt es (CSS :focus-visible), Enter folgt dem Link.
+	 * Escape oder ein Tipp daneben schließt es.
+	 */
+	var wpsg_garanPointer = '';
+
+	function wpsg_garanSet(label, open, dismissed) {
+
+		label.classList.toggle('is-open', open);
+		label.classList.toggle('is-dismissed', !!dismissed);
+		label.setAttribute('aria-expanded', ((open)?'true':'false'));
+
+	} // function wpsg_garanSet(label, open, dismissed)
+
+	document.addEventListener('pointerdown', function(event) { wpsg_garanPointer = event.pointerType; }, true);
+	document.addEventListener('keydown', function(event) {
+
+		wpsg_garanPointer = '';
+
+		if (event.key === 'Escape') document.querySelectorAll('a.wpsg_product_garan').forEach(function(label) { if (label.classList.contains('is-open') || label === document.activeElement) wpsg_garanSet(label, false, true); } );
+
+	}, true);
+
+	document.addEventListener('click', function(event) {
+
+		var label = event.target.closest('a.wpsg_product_garan');
+
+		document.querySelectorAll('a.wpsg_product_garan.is-open').forEach(function(open) { if (open !== label) wpsg_garanSet(open, false); } );
+
+		if (!label || (wpsg_garanPointer !== 'touch' && wpsg_garanPointer !== 'pen')) return;
+
+		if (!label.classList.contains('is-open')) {
+
+			event.preventDefault();
+			wpsg_garanSet(label, true);
+
+		}
+
+	} );
+
+	document.addEventListener('focusout', function(event) { if (event.target.matches && event.target.matches('a.wpsg_product_garan')) event.target.classList.remove('is-dismissed'); } );
-- 
cgit v1.2.3