Correctly manage visibility of UI elements

js/builder.js

@@ -59,6 +59,19 @@
     });
   }
 
+  /**
+   * Sets the visibility of UI elements based on the data-active attribute.
+   */
+  function setUiElementVisibility() {
+    selectAll('.js-lpb-component .js-lpb-ui').forEach((element) => {
+      if (element.closest('.js-lpb-component')?.getAttribute('data-active')) {
+        element.classList.remove('visually-hidden');
+      } else {
+        element.classList.add('visually-hidden');
+      }
+    });
+  }
+
   /**
    * Removes focus data attributes from all components.
    */
@@ -72,9 +85,7 @@
     selectAll('.is-navigating').forEach((element) =>
       element.classList.remove('is-navigating'),
     );
-    selectAll('.js-lpb-ui:not(.visually-hidden)').forEach((element) =>
-      element.classList.add('visually-hidden'),
-    );
+    setUiElementVisibility();
   }
 
   /**
@@ -87,9 +98,7 @@
     // Add the data-active attribute to the element.
     element.setAttribute('data-active', 'true');
     element.setAttribute('data-active-within', 'true');
-    selectAll('.js-lpb-ui', element)
-      .filter((uiElement) => uiElement.closest('.js-lpb-component') === element)
-      .forEach((uiElement) => uiElement.classList.remove('visually-hidden'));
+    setUiElementVisibility();
     // Add the data-active-within attribute to all parent elements.
     let parent = element.parentNode.closest('.js-lpb-component');
     while (parent) {
@@ -160,10 +169,9 @@
     const containerUiElements = uiElements[id] || [];
     Object.values(containerUiElements).forEach((uiElement) => {
       const { element, method } = uiElement;
-      $container[method](
-        $(element).addClass('js-lpb-ui').addClass('visually-hidden'),
-      );
+      $container[method]($(element).addClass('js-lpb-ui'));
     });
+    setUiElementVisibility();
   }
 
   /**