From 5082060fa33017ca52170ba940acfa33eb70218a Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Wed, 10 Nov 2021 18:32:39 +0200
Subject: [PATCH] =?UTF-8?q?Issue=20#3244621=20by=20mherchel,=20rikki=5Fiki?=
=?UTF-8?q?,=20catch,=20cathwaldron,=20rachel=5Fnorfolk,=20alexpott,=20G?=
=?UTF-8?q?=C3=A1bor=20Hojtsy:=20Olivero:=20JS=20error=20when=20secondary?=
=?UTF-8?q?=20tabs=20are=20present?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
(cherry picked from commit f8a197f52eaf81a6e6b8ff5de03b41d8b459a48a)
---
.../Tests/Olivero/oliveroPrimaryTabsTest.js | 50 +++++++++++++++++++
core/themes/olivero/js/tabs.es6.js | 20 ++++----
core/themes/olivero/js/tabs.js | 4 +-
.../navigation/menu-local-tasks.html.twig | 4 +-
4 files changed, 65 insertions(+), 13 deletions(-)
create mode 100644 core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroPrimaryTabsTest.js
diff --git a/core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroPrimaryTabsTest.js b/core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroPrimaryTabsTest.js
new file mode 100644
index 000000000000..1cf43fe169ee
--- /dev/null
+++ b/core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroPrimaryTabsTest.js
@@ -0,0 +1,50 @@
+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');
+ },
+};
diff --git a/core/themes/olivero/js/tabs.es6.js b/core/themes/olivero/js/tabs.es6.js
index 309cdb87f4b1..c5d3e0d52892 100644
--- a/core/themes/olivero/js/tabs.es6.js
+++ b/core/themes/olivero/js/tabs.es6.js
@@ -1,14 +1,14 @@
/**
* @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);
diff --git a/core/themes/olivero/js/tabs.js b/core/themes/olivero/js/tabs.js
index 6932f9b405f1..81d7475d1af3 100644
--- a/core/themes/olivero/js/tabs.js
+++ b/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
diff --git a/core/themes/olivero/templates/navigation/menu-local-tasks.html.twig b/core/themes/olivero/templates/navigation/menu-local-tasks.html.twig
index ad43d52a07fc..0f4d9f7d7120 100644
--- a/core/themes/olivero/templates/navigation/menu-local-tasks.html.twig
+++ b/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 %}
--
GitLab