diff options
| -rw-r--r-- | views/css/frontend.css | 5 | ||||
| -rw-r--r-- | views/css/wpsg-theme.css | 3 | ||||
| -rw-r--r-- | views/js/frontend.js | 45 |
3 files changed, 52 insertions, 1 deletions
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'); } );
|