diff --git a/.storybook/static/preview-head.js b/.storybook/static/preview-head.js
index 0b5b6a1f76..ec73f0f3a3 100644
--- a/.storybook/static/preview-head.js
+++ b/.storybook/static/preview-head.js
@@ -57,6 +57,10 @@
         var els = document.querySelectorAll("[aria-controls]");
         for (var i = 0; i < els.length; i++) {
             var el = els[i];
+            if (el.hasAttribute('data-ignore-click') || el.hasAttribute('data-aria-controls-listener')) {
+              return;
+            }
+            el.setAttribute('data-aria-controls-listener', 'true')
             el.addEventListener('click', function () {
                 var targetId = this.getAttribute("aria-controls");
                 var target = document.getElementById(targetId);
@@ -149,11 +153,15 @@
     }
 
     document.addEventListener('DOMContentLoaded', function () {
+      setTimeout(function() {
         runOnPageChange();
+      }, 10);
         const callback = function(mutationsList) {
             for (let i = 0, len = mutationsList.length; i < len; i++) {
                 if (mutationsList[i].type == 'childList') {
+                  setTimeout(function() {
                     runOnPageChange();
+                  }, 10);
                     break;
                 }
             }
@@ -444,7 +452,7 @@ function toggleNavigationSubmenu(event) {
 }
 
 function toggleNavigationPopover(event) {
-    
+
     let button = event.target;
     if (button.tagName.toLowerCase() === 'a') {
         button = event.target.parentNode;
diff --git a/packages/styles/stories/Components/panel/borderless.example.html b/packages/styles/stories/Components/panel/borderless.example.html
index 1c8e71d3cb..860a6afde3 100644
--- a/packages/styles/stories/Components/panel/borderless.example.html
+++ b/packages/styles/stories/Components/panel/borderless.example.html
@@ -2,7 +2,7 @@
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
             <button class="fd-button fd-button--transparent fd-panel__button"
-                aria-expanded="false" aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-1">
+                aria-expanded="false" aria-haspopup="true" aria-label="expand/collapse panel" data-ignore-click aria-controls="__panel-1">
                 <i class="sap-icon--slim-arrow-right"></i>
             </button>
         </div>
@@ -35,7 +35,7 @@ <h4 class="fd-panel__title" id="__panel-title-1">Panel header collapsed</h4>
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
             <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
-                aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-2">
+                aria-haspopup="true" aria-label="expand/collapse panel" data-ignore-click aria-controls="__panel-2">
                 <i class="sap-icon--slim-arrow-down"></i>
             </button>
         </div>
diff --git a/packages/styles/stories/Components/panel/expandable.example.html b/packages/styles/stories/Components/panel/expandable.example.html
index 532eac1b28..e337d6a4a2 100644
--- a/packages/styles/stories/Components/panel/expandable.example.html
+++ b/packages/styles/stories/Components/panel/expandable.example.html
@@ -2,7 +2,7 @@
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
             <button class="fd-button fd-button--transparent fd-panel__button"
-                aria-expanded="false" aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-7">
+                aria-expanded="false" aria-haspopup="true" aria-label="expand/collapse panel" data-ignore-click aria-controls="__panel-7">
                 <i class="sap-icon--slim-arrow-right"></i>
             </button>
         </div>
@@ -32,7 +32,7 @@ <h4 class="fd-panel__title" id="__panel-title-7">Panel header collapsed</h4>
 <div class="fd-panel" aria-labelledby="__panel-title-8" role="form">
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
-            <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
+            <button class="fd-button fd-button--transparent fd-panel__button" data-ignore-click aria-expanded="true"
                 aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-8">
                 <i class="sap-icon--slim-arrow-down"></i>
             </button>
diff --git a/packages/styles/stories/Components/panel/fixed-height-content.example.html b/packages/styles/stories/Components/panel/fixed-height-content.example.html
index ef67caaa8a..a094a35079 100644
--- a/packages/styles/stories/Components/panel/fixed-height-content.example.html
+++ b/packages/styles/stories/Components/panel/fixed-height-content.example.html
@@ -1,8 +1,8 @@
 <div class="fd-panel" aria-labelledby="__panel-title-10" role="form">
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
-            <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="false" aria-haspopup="true" aria-controls="__panel-10">
-                <i class="sap-icon--slim-arrow-right"></i>
+            <button class="fd-button fd-button--transparent fd-panel__button" data-ignore-click aria-expanded="true" aria-haspopup="true" aria-controls="__panel-10">
+                <i class="sap-icon--slim-arrow-down"></i>
             </button>
         </div>
         <h4 class="fd-panel__title" id="__panel-title-10">Panel header</h4>
@@ -15,7 +15,7 @@ <h4 class="fd-panel__title" id="__panel-title-10">Panel header</h4>
             </div>
         </div>
     </div>
-    <div role="region" id="__panel-10" aria-labelledby="__panel-title-10" class="fd-panel__content" aria-hidden="true" style="height: 100px;">
+    <div role="region" id="__panel-10" aria-labelledby="__panel-title-10" class="fd-panel__content" aria-hidden="false" style="height: 100px;">
         <span>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
             et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
diff --git a/packages/styles/stories/Components/panel/transparent.example.html b/packages/styles/stories/Components/panel/transparent.example.html
index 6a99a9150b..73e36d4907 100644
--- a/packages/styles/stories/Components/panel/transparent.example.html
+++ b/packages/styles/stories/Components/panel/transparent.example.html
@@ -1,7 +1,7 @@
 <div class="fd-panel fd-panel--transparent" aria-labelledby="__panel-title-4" role="form">
     <div class="fd-panel__header">
         <div class="fd-panel__expand">
-            <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
+            <button class="fd-button fd-button--transparent fd-panel__button" data-ignore-click aria-expanded="true"
                 aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-4">
                 <i class="sap-icon--slim-arrow-down"></i>
             </button>
diff --git a/packages/styles/stories/Components/popover/control-examples-btp.example.html b/packages/styles/stories/Components/popover/control-examples-btp.example.html
index ac58c4a87a..c1375846a0 100644
--- a/packages/styles/stories/Components/popover/control-examples-btp.example.html
+++ b/packages/styles/stories/Components/popover/control-examples-btp.example.html
@@ -39,7 +39,7 @@
                         <i class="sap-icon--cart" role="presentation"></i>
                     </button>
                 </div>
-                <div class="fd-popover__body fd-popover__body--padding" aria-hidden="false" id="popoverB4BTP">
+                <div class="fd-popover__body fd-popover__body--padding" aria-hidden="false" id="popoverB4B">
                     <div class="fd-popover__body-header">Header (optional, empty container)</div>
                     <div class="fd-popover__body-content" style="color: #fff; background: #0e7290; width: 15rem; height: 18rem;">
                         Content (empty container)
diff --git a/packages/styles/stories/Components/popover/no-arrow.example.html b/packages/styles/stories/Components/popover/no-arrow.example.html
index e978617ba5..87d8c74bc4 100644
--- a/packages/styles/stories/Components/popover/no-arrow.example.html
+++ b/packages/styles/stories/Components/popover/no-arrow.example.html
@@ -2,16 +2,16 @@
     <div class="fd-popover__control">
         <button
             class="fd-button"
-            aria-controls="popoverF1"
+            aria-controls="popoverNoArrow"
             aria-expanded="true"
             aria-haspopup="true"
-            onClick="onPopoverClick('popoverF1');"
+            onClick="onPopoverClick('popoverNoArrow');"
             role="button"
         >
             <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
         </button>
     </div>
-    <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false" id="popoverF1">
+    <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false" id="popoverNoArrow">
         <div class="fd-popover__wrapper" style="max-height: 250px;">
             <nav class="fd-menu" aria-label="big navigation menu">
                 <ul class="fd-menu__list fd-menu__list--no-shadow">
@@ -29,4 +29,4 @@
             </nav>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/styles/stories/Components/popover/scrollable.example.html b/packages/styles/stories/Components/popover/scrollable.example.html
index 137fcae4b7..9f22d2f31a 100644
--- a/packages/styles/stories/Components/popover/scrollable.example.html
+++ b/packages/styles/stories/Components/popover/scrollable.example.html
@@ -2,16 +2,16 @@
     <div class="fd-popover__control">
         <button
             class="fd-button"
-            aria-controls="popoverF1"
+            aria-controls="popoverScrollable"
             aria-expanded="true"
             aria-haspopup="true"
-            onclick="onPopoverClick('popoverF1');"
+            onclick="onPopoverClick('popoverScrollable');"
             role="button">
-                <!- role is needed to override the combobox role due to aria-haspopup -->
+                <!-- role is needed to override the combobox role due to aria-haspopup -->
                 Popover with overflow
             </button>
     </div>
-    <div class="fd-popover__body" aria-hidden="false" id="popoverF1">
+    <div class="fd-popover__body" aria-hidden="false" id="popoverScrollable">
         <div class="fd-popover__wrapper" style="max-height: 250px;">
             <nav class="fd-menu" aria-label="big navigation menu">
                 <ul class="fd-menu__list fd-menu__list--no-shadow">
diff --git a/packages/styles/stories/Components/progress-indicator/truncation.example.html b/packages/styles/stories/Components/progress-indicator/truncation.example.html
index d34ae7235f..45c32f40c7 100644
--- a/packages/styles/stories/Components/progress-indicator/truncation.example.html
+++ b/packages/styles/stories/Components/progress-indicator/truncation.example.html
@@ -21,13 +21,13 @@
     <div style="margin-bottom: 5rem"></div>
 
     <div class="fd-progress-indicator fd-popover" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="70" aria-valuemax="100" aria-valuetext="In cases where the label is being truncated a small popover appears on click." aria-label="Progress Indicator">
-        <div class="fd-progress-indicator__container fd-popover__control" onclick="onPopoverClick('popoverF1')">
+        <div class="fd-progress-indicator__container fd-popover__control" onclick="onPopoverClick('popoverTruncation')">
             <div class="fd-progress-indicator__progress-bar" style="min-width: 30%; width: 30%;">
             </div>
             <div class="fd-progress-indicator__remaining">
                 <span class="fd-progress-indicator__label">In cases where the label is being truncated a small popover appears on click.</span>
             </div>
-            <div class="fd-popover__body fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverF1">
+            <div class="fd-popover__body fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverTruncation">
                 <div class="fd-popover__wrapper">
                     <div class="fd-progress-indicator__overflow">
                         <span>In cases where the label is being truncated a small popover appears on click.</span>