Skip to content
Snippets Groups Projects
Unverified Commit f8a197f5 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

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
parent 7f6603b6
No related branches found
No related tags found
31 merge requests!7452Issue #1797438. HTML5 validation is preventing form submit and not fully...,!2074Issue #2707689: NodeForm::actions() checks for delete access on new entities,!1896Issue #2940605: Can only intentionally re-render an entity with references 20 times,!1459Issue #3087632: menu_name max length is too long,!1283Issue #2922435: "Add new comment" and "@count comments" links are not following accessibility good practices,!1255Issue #3238922: Refactor (if feasible) uses of the jQuery serialize function to use vanillaJS,!1254Issue #3238915: Refactor (if feasible) uses of the jQuery ready function to use VanillaJS,!1213Issue #3236497: Allow other modules to opt out of security release message from update_page_top,!1185Issue 318778: Rerolled patch.,!1162Issue #3100350: Unable to save '/' root path alias,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!1018Issue #2793343: Dialog drupalAutoButtons option should be respected on initial load,!1014Issue #3226806: Move filter implementations from filter.module to plugin classes,!957Added throwing of InvalidPluginDefinitionException from getDefinition().,!939Issue #2971209: Allow the MediaLibraryUiBuilder service to use an alternative view display,!878Issue #3221534: throw an exception when IDs passed to loadMultiple() are badly formed,!877Issue #2708101: Default value for link text is not saved,!873Issue #2875228: Site install not using batch API service,!872Draft: Issue #3221319: Race condition when creating menu links and editing content deletes menu links,!866Issue #2845319: The highlighting of the 'Home' menu-link does not respect query strings and fragment identifiers,!844Resolve #3036010 "Updaters",!8293023322 - Contextual Links Style Update,!712Issue #2909128: Autocomplete intermittent on Chrome Android,!617Issue #3043725: Provide a Entity Handler for user cancelation,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493,!485Sets the autocomplete attribute for username/password input field on login form.,!449Issue #2784233: Allow multiple vocabularies in the taxonomy filter,!30Issue #3182188: Updates composer usage to point at ./vendor/bin/composer
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');
},
};
/**
* @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);
......@@ -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
......@@ -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 %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment