[MWPW-161923] tab nested focus (#3407)

* [MWPW-161923] tab nested focus * [MWPW-161923] tab focus nala test fix * [MWPW-161923] tab focus nala test fix * [MWPW-161923] test coverage fix * [MWPW-161923] aria-valuenow remove, new test adapted * [MWPW-161923] no spacing fix * [MWPW-161923] pr comments fix
adobecom · Jan 23, 2025 · 4d69057 · 4d69057
1 parent a366658
commit 4d69057
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 38 deletions.
diff --git 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
@@ -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';
 
@@ -88,8 +87,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') {
@@ -124,9 +124,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];
@@ -153,13 +151,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',
@@ -277,12 +268,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
@@ -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
@@ -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
@@ -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);