Issue #3244621 by mherchel, rikki_iki, catch, cathwaldron, rachel_norfolk,...

Issue #3244621 by mherchel, rikki_iki, catch, cathwaldron, rachel_norfolk, alexpott, Gábor Hojtsy: Olivero: JS error when secondary tabs are present

(cherry picked from commit f8a197f5)

core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroPrimaryTabsTest.js

+const primaryTabsWrapper = '[data-drupal-nav-primary-tabs]';
+const activeTab = '.tabs__tab.is-active';
+const inactiveTab = '.tabs__tab:not(.is-active)';
+const mobileToggle = `${activeTab} .tabs__trigger`;
+
+module.exports = {
+  '@tags': ['core', 'olivero'],
+  before(browser) {
+    browser
+      .drupalInstall({
+        setupFile:
+          'core/tests/Drupal/TestSite/TestSiteOliveroInstallTestScript.php',
+        installProfile: 'minimal',
+      })
+      .drupalCreateUser({
+        name: 'user',
+        password: '123',
+        permissions: ['administer nodes'],
+      })
+      .drupalLogin({ name: 'user', password: '123' });
+    browser.resizeWindow(1600, 800);
+  },
+  after(browser) {
+    browser.drupalUninstall();
+  },
+  'Verify desktop primary tab display': (browser) => {
+    browser
+      .drupalRelativeURL('/node/1')
+      .waitForElementVisible(primaryTabsWrapper)
+      .assert.visible(activeTab)
+      .assert.visible(inactiveTab)
+      .assert.not.visible(mobileToggle);
+  },
+  'Verify mobile tab display and click functionality': (browser) => {
+    browser
+      .resizeWindow(699, 800)
+      .drupalRelativeURL('/node/1')
+      .waitForElementVisible(primaryTabsWrapper)
+      .assert.visible(activeTab)
+      .assert.not.visible(inactiveTab)
+      .assert.visible(mobileToggle)
+      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'false')
+      .click(mobileToggle)
+      .waitForElementVisible(inactiveTab)
+      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'true')
+      .click(mobileToggle)
+      .waitForElementNotVisible(inactiveTab)
+      .assert.attributeEquals(mobileToggle, 'aria-expanded', 'false');
+  },
+};

core/themes/olivero/js/tabs.es6.js

 /**
  * @file
- * Provides interactivity for showing and hiding the tabs at mobile widths.
+ * Provides interactivity for showing and hiding the primary tabs at mobile widths.
  */
 
 ((Drupal, once) => {
   /**
-   * Initialize the tabs.
+   * Initialize the primary tabs.
    *
    * @param {HTMLElement} el
-   *   The DOM element containing the tabs.
+   *   The DOM element containing the primary tabs.
    */
   function init(el) {
     const tabs = el.querySelector('.tabs');
@@ -16,7 +16,7 @@
     const activeTab = tabs.querySelector('.is-active');
 
     /**
-     * Determines if tabs are expanded for mobile layouts.
+     * Determines if primary tabs are expanded for mobile layouts.
      *
      * @return {boolean}
      *   Whether the tabs trigger element is expanded.
@@ -26,7 +26,7 @@
     }
 
     /**
-     * Controls tab visibility on click events.
+     * Controls primary tab visibility on click events.
      *
      * @param {Event} e
      *   The event object.
@@ -54,16 +54,18 @@
   }
 
   /**
-   * Initialize the tabs.
+   * Initialize the primary tabs.
    *
    * @type {Drupal~behavior}
    *
    * @prop {Drupal~behaviorAttach} attach
-   *   Display tabs according to the screen width.
+   *   Display primary tabs according to the screen width.
    */
-  Drupal.behaviors.tabs = {
+  Drupal.behaviors.primaryTabs = {
     attach(context) {
-      once('olivero-tabs', '[data-drupal-nav-tabs]', context).forEach(init);
+      once('olivero-tabs', '[data-drupal-nav-primary-tabs]', context).forEach(
+        init,
+      );
     },
   };
 })(Drupal, once);

core/themes/olivero/js/tabs.js

@@ -35,9 +35,9 @@
     tabs.querySelector('.tabs__trigger').addEventListener('click', handleTriggerClick);
   }
 
-  Drupal.behaviors.tabs = {
+  Drupal.behaviors.primaryTabs = {
     attach: function attach(context) {
-      once('olivero-tabs', '[data-drupal-nav-tabs]', context).forEach(init);
+      once('olivero-tabs', '[data-drupal-nav-primary-tabs]', context).forEach(init);
     }
   };
 })(Drupal, once);
\ No newline at end of file

core/themes/olivero/templates/navigation/menu-local-tasks.html.twig

@@ -18,13 +18,13 @@
 
 {% if primary %}
   <h2 id="primary-tabs-title" class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
-  <nav role="navigation" class="tabs-wrapper" aria-labelledby="primary-tabs-title" data-drupal-nav-tabs>
+  <nav role="navigation" class="tabs-wrapper" aria-labelledby="primary-tabs-title" data-drupal-nav-primary-tabs>
     <ul class="tabs tabs--primary">{{ primary }}</ul>
   </nav>
 {% endif %}
 {% if secondary %}
   <h2 id="secondary-tabs-title" class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
-  <nav role="navigation" class="tabs-wrapper" aria-labelledby="secondary-tabs-title" data-drupal-nav-tabs>
+  <nav role="navigation" class="tabs-wrapper" aria-labelledby="secondary-tabs-title">
     <ul class="tabs tabs--secondary">{{ secondary }}</ul>
   </nav>
 {% endif %}