diff --git a/libs/blocks/tabs/tabs.css b/libs/blocks/tabs/tabs.css index 889f517e9f..0497dbd858 100644 --- a/libs/blocks/tabs/tabs.css +++ b/libs/blocks/tabs/tabs.css @@ -49,22 +49,42 @@ padding: var(--spacing-xxl) 0; } +.tabs.xxl-spacing .paddle { + top: var(--spacing-xxl); +} + .tabs.xl-spacing { padding: var(--spacing-xl) 0; } +.tabs.xl-spacing .paddle { + top: var(--spacing-xl); +} + .tabs.l-spacing { padding: var(--spacing-l) 0; } +.tabs.l-spacing .paddle { + top: var(--spacing-l); +} + .tabs.s-spacing { padding: var(--spacing-s) 0; } +.tabs.s-spacing .paddle { + top: var(--spacing-s); +} + .tabs.xs-spacing { padding: var(--spacing-xs) 0; } +.tabs.xs-spacing .paddle { + top: var(--spacing-xs); +} + .tabs div[role="tablist"] { position: relative; box-shadow: 0 -1px 0 inset var(--tabs-border-color); @@ -161,12 +181,12 @@ z-index: 1; } -.tabs .tab-paddles .paddle { +.tabs .paddle { position: absolute; cursor: pointer; width: 32px; height: 48px; - bottom: 0; + top: 0; background: var(--tabs-active-bg-color); border: 0; border-bottom: 1px solid var(--tabs-border-color); @@ -177,7 +197,7 @@ .tabs.radio div[role="tablist"], .tabs.radio div[role="tablist"] button, -.tabs.radio .tab-paddles .paddle { +.tabs.radio .paddle { box-shadow: none; background: none; border: none; @@ -303,28 +323,27 @@ height: 24px; } -.tabs .tab-paddles { - position: relative; +.tabs .paddle { z-index: 3; } -.tabs .tab-paddles .paddle:disabled { +.tabs .paddle:disabled { cursor: default; box-shadow: none; background: var(--tabs-list-bg-gradient); } -.tabs .tab-paddles .paddle-left { +.tabs .paddle-left { box-shadow: 4px 0 4px -2px var(--tabs-paddle-bs-color); left: 0; } -.tabs .tab-paddles .paddle-right { +.tabs .paddle-right { box-shadow: -4px 0 4px -2px var(--tabs-paddle-bs-color); right: 0; } -.tabs .tab-paddles .paddle svg { +.tabs .paddle svg { opacity: 1; width: 8px; height: 14px; @@ -333,19 +352,19 @@ color: var(--tabs-text-color); } -.tabs .tab-paddles .paddle-left svg { +.tabs .paddle-left svg { transform: rotate(180deg); } -.tabs .tab-paddles .paddle:hover svg { +.tabs .paddle:hover svg { color: var(--tabs-active-text-color); } -.tabs .tab-paddles .paddle:disabled svg { +.tabs .paddle:disabled svg { opacity: 0; } -.tabs[class*='pill'] .tab-paddles .paddle { +.tabs[class*='pill'] .paddle { background: unset; border: none; } @@ -358,7 +377,7 @@ border: none; } -.tabs.radio .tab-paddles { +.tabs.radio .paddle { display: none; } @@ -417,7 +436,7 @@ .tabs-background-transparent .tabs, .tabs-background-transparent .tabs div[role="tablist"], .tabs-background-transparent .tabs div[role="tablist"] button[aria-selected="true"], -.tabs-background-transparent .tabs .tab-paddles .paddle { +.tabs-background-transparent .tabs .tabList .paddle { background: transparent; } @@ -485,11 +504,11 @@ padding-bottom: 18px; } - .tabs .tab-paddles .paddle { + .tabs .paddle { height: 62px; } - .tabs .tab-paddles .paddle svg { + .tabs .paddle svg { top: 24px; } } diff --git a/libs/blocks/tabs/tabs.js b/libs/blocks/tabs/tabs.js index b32e5bcbbe..c697e5cb7a 100644 --- a/libs/blocks/tabs/tabs.js +++ b/libs/blocks/tabs/tabs.js @@ -2,7 +2,6 @@ * tabs - consonant v6 * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role */ -import { debounce } from '../../utils/action.js'; import { createTag, MILO_EVENTS, getConfig } from '../../utils/utils.js'; import { processTrackingLabels } from '../../martech/attributes.js'; @@ -87,8 +86,9 @@ function configTabs(config, rootElem) { function initTabs(elm, config, rootElem) { const tabs = elm.querySelectorAll('[role="tab"]'); const tabLists = elm.querySelectorAll('[role="tablist"]'); + let tabFocus = 0; + tabLists.forEach((tabList) => { - let tabFocus = 0; tabList.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') { if (e.key === 'ArrowRight') { @@ -123,9 +123,7 @@ function nextTab(current, i, arr) { return (previous && isTabInTabListView(previous) && !isTabInTabListView(current)); } -function initPaddles(tabList, tabPaddles) { - const left = tabPaddles.firstElementChild; - const right = tabPaddles.lastElementChild; +function initPaddles(tabList, left, right) { const tabListItems = tabList.querySelectorAll('[role="tab"]'); const tabListItemsArray = [...tabListItems]; const firstTab = tabListItemsArray[0]; @@ -152,13 +150,6 @@ function initPaddles(tabList, tabPaddles) { } }); - tabList.addEventListener('scroll', debounce(() => { - tabPaddles.setAttribute( - 'aria-valuenow', - ((tabList.scrollLeft / (tabList.scrollWidth - tabList.clientWidth)) * 100).toFixed(0), - ); - }, 500)); - const options = { root: tabList, rootMargin: '0px', @@ -276,12 +267,11 @@ const init = (block) => { } // Tab Paddles - const tabPaddles = createTag('div', { class: 'tab-paddles', role: 'scrollbar', 'aria-valuenow': 0 }); const paddleLeft = createTag('button', { class: 'paddle paddle-left', disabled: '', 'aria-hidden': true, 'aria-label': 'Scroll tabs to left' }, PADDLE); const paddleRight = createTag('button', { class: 'paddle paddle-right', disabled: '', 'aria-hidden': true, 'aria-label': 'Scroll tabs to right' }, PADDLE); - tabPaddles.append(paddleLeft, paddleRight); - tabList.after(tabPaddles); - initPaddles(tabList, tabPaddles); + tabList.insertAdjacentElement('afterend', paddleRight); + block.prepend(paddleLeft); + initPaddles(tabList, paddleLeft, paddleRight); // Tab Sections const allSections = Array.from(rootElem.querySelectorAll('div.section')); diff --git a/libs/features/georoutingv2/georoutingv2.css b/libs/features/georoutingv2/georoutingv2.css index 255ba3f301..454b7641f4 100644 --- a/libs/features/georoutingv2/georoutingv2.css +++ b/libs/features/georoutingv2/georoutingv2.css @@ -108,7 +108,7 @@ margin: 2px; } -.dialog-modal.locale-modal-v2 .tabs .tab-paddles .paddle { +.dialog-modal.locale-modal-v2 .tabs .paddle { margin: 2px 0; background: var(--tabs-active-bg-color); border-width: 0 0 2px; @@ -118,7 +118,7 @@ border-bottom-color: var(--tabs-active-text-color); } -.dialog-modal.locale-modal-v2 .tabs .tab-paddles .paddle:disabled { +.dialog-modal.locale-modal-v2 .tabs .paddle:disabled { display: none; } diff --git a/nala/blocks/tabs/tabs.page.js b/nala/blocks/tabs/tabs.page.js index 30aa9718a3..2c6d6f6bd8 100644 --- a/nala/blocks/tabs/tabs.page.js +++ b/nala/blocks/tabs/tabs.page.js @@ -20,7 +20,7 @@ export default class Tabs { this.tab3Panel = this.tabContent.locator('div[role="tabpanel"]:nth-child(3)'); this.tab9Panel = this.tabContent.locator('div[role="tabpanel"]:nth-child(9)'); - this.leftArrow = this.tab.locator('.tab-paddles > .paddle-left'); - this.rightArrow = this.tab.locator('.tab-paddles > .paddle-right'); + this.leftArrow = this.tab.locator('.paddle-left'); + this.rightArrow = this.tab.locator('.paddle-right'); } } diff --git a/test/blocks/tabs/tabs.test.js b/test/blocks/tabs/tabs.test.js index d01de3cb9c..5d3366e9c8 100644 --- a/test/blocks/tabs/tabs.test.js +++ b/test/blocks/tabs/tabs.test.js @@ -100,7 +100,7 @@ describe('tabs', () => { setViewport({ width: MOBILE_WIDTH, height: HEIGHT }); window.dispatchEvent(new Event('resize')); const oldPosition = window.scrollY; - document.querySelector('#stacked-mobile .tabs button').click(); + document.querySelector('#stacked-mobile .tabList button').click(); await delay(50); const newPosition = window.scrollY; expect(newPosition).to.be.above(oldPosition);