Issue #3487874 by jan kellermann, filipeabreu, valthebald, longwave: Olivero:...

Issue #3487874 by jan kellermann, filipeabreu, valthebald, longwave: Olivero: Avoid localStorage for anonymous user to prevent violation of data protection regulations

(cherry picked from commit 5e89fa50)

core/tests/Drupal/FunctionalJavascriptTests/Theme/OliveroAvoidStorageUsingTest.php

+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests usage of localStorage.
+ *
+ * @group olivero
+ */
+final class OliveroAvoidStorageUsingTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['block', 'node'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'olivero';
+
+  /**
+   * Tests use of localStorage.
+   */
+  public function testStorageUsing(): void {
+    $this->drupalGet('<front>');
+    // Check if initial no storage item is written.
+    $this->assertJsCondition("localStorage.getItem('Drupal.olivero.stickyHeaderState') === null", 10000, 'Written not strictly necessary Drupal.olivero.stickyHeaderState to localStorage without consent.');
+
+    // Resize and scroll to show stickyHeaderToggleButton.
+    $session = $this->getSession();
+    $session->resizeWindow(1280, 1024);
+    $session->executeScript('window.scrollTo(0, 500);');
+
+    // Click stickyHeaderToggleButton.
+    $this->getSession()->getPage()->find('css', '.sticky-header-toggle')->click();
+
+    // Test if localStorage is set now.
+    $this->assertJsCondition("localStorage.getItem('Drupal.olivero.stickyHeaderState') !== null");
+
+    // Click stickyHeaderToggleButton again.
+    $this->getSession()->getPage()->find('css', '.sticky-header-toggle')->click();
+
+    // Storage item should be removed now.
+    $this->assertJsCondition("localStorage.getItem('Drupal.olivero.stickyHeaderState') === null", 10000, 'Storage item Drupal.olivero.stickyHeaderState should be removed.');
+
+  }
+
+}

core/themes/olivero/js/navigation-utils.js

@@ -58,6 +58,10 @@
    *   Current state of the sticky header button.
    */
   function setStickyHeaderStorage(expandedState) {
+    if (!expandedState) {
+      localStorage.removeItem('Drupal.olivero.stickyHeaderState');
+      return;
+    }
     const now = new Date();
 
     const item = {
@@ -70,6 +74,22 @@
     );
   }
 
+  /**
+   * Update the expiration date if the sticky header expanded state is set.
+   *
+   * @param {boolean} expandedState
+   *   Current state of the sticky header button.
+   */
+  function updateStickyHeaderStorage(expandedState) {
+    const stickyHeaderState = localStorage.getItem(
+      'Drupal.olivero.stickyHeaderState',
+    );
+
+    if (stickyHeaderState !== null) {
+      setStickyHeaderStorage(expandedState);
+    }
+  }
+
   /**
    * Toggle the state of the sticky header between always pinned and
    * only pinned when scrolled to the top of the viewport.
@@ -81,7 +101,6 @@
     if (isDesktopNav()) {
       siteHeaderFixable.classList.toggle('is-expanded', pinnedState);
       stickyHeaderToggleButton.setAttribute('aria-checked', pinnedState);
-      setStickyHeaderStorage(pinnedState);
     }
   }
 
@@ -182,7 +201,9 @@
 
     if (stickyHeaderToggleButton) {
       stickyHeaderToggleButton.addEventListener('click', () => {
-        toggleStickyHeaderState(!stickyHeaderIsEnabled());
+        const pinnedState = !stickyHeaderIsEnabled();
+        toggleStickyHeaderState(pinnedState);
+        setStickyHeaderStorage(pinnedState);
       });
     }
 
@@ -209,7 +230,7 @@
     }
 
     monitorNavPosition();
-    setStickyHeaderStorage(getStickyHeaderStorage());
+    updateStickyHeaderStorage(getStickyHeaderStorage());
     toggleStickyHeaderState(getStickyHeaderStorage());
   }
 })(Drupal);