From de7b41ad823acc104ce3b1f45411b929beab7979 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 16:52:40 +0200
Subject: [PATCH] Make data table help icons interactive in Marktbewertung tab

---
 ...card-listen-fundamentalanalyse-drawer.html | 44 ++++++++++++++-----
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
index 88f78f9..78cd0bb 100644
--- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
@@ -170,15 +170,15 @@
                 </thead>
                 <tbody>
                   <tr>
-                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-table">?</span></td>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Kennzahl PE.</span></span></td>
                     <td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
                   </tr>
                   <tr>
-                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-table">?</span></td>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Kennzahl PE Forward.</span></span></td>
                     <td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
                   </tr>
                   <tr>
-                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-table">?</span></td>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Kennzahl PEG Forward.</span></span></td>
                     <td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
                   </tr>
                 </tbody>
@@ -324,20 +324,42 @@
       });
     });
 
-    document.addEventListener('click', (event) => {
-      if (event.target.closest('.sg-sandwich-menu-wrap')) {
+    document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+      const button = wrap.querySelector('.sg-help-icon');
+      if (!button) {
         return;
       }
 
-      document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
-        const button = wrap.querySelector('.sg-sandwich-button');
-        wrap.dataset.open = 'false';
-        if (button) {
-          button.setAttribute('aria-expanded', 'false');
-        }
+      button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const nextState = wrap.dataset.open !== 'true';
+        wrap.dataset.open = String(nextState);
+        button.setAttribute('aria-expanded', String(nextState));
       });
     });
 
+    document.addEventListener('click', (event) => {
+      if (!event.target.closest('.sg-sandwich-menu-wrap')) {
+        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+          const button = wrap.querySelector('.sg-sandwich-button');
+          wrap.dataset.open = 'false';
+          if (button) {
+            button.setAttribute('aria-expanded', 'false');
+          }
+        });
+      }
+
+      if (!event.target.closest('.sg-help-icon-wrap')) {
+        document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+          const button = wrap.querySelector('.sg-help-icon');
+          wrap.dataset.open = 'false';
+          if (button) {
+            button.setAttribute('aria-expanded', 'false');
+          }
+        });
+      }
+    });
+
     const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
 
     if (tabGroup) {