fix(masthead): handle overflow tabbing (#7085)

### Related Ticket(s)

#5894

### Description

Overflow with tabbing for masthead and table of contents in LTR and RTL.

### Changelog

**New**

- {{new thing}}

**Changed**

- {{changed thing}}

**Removed**

- {{removed thing}}

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

Author: ariellalgilmore

packages/web-components/src/components/masthead/__tests__/top-nav.test.ts

@@ -77,7 +77,7 @@ describe('dds-top-nav', function() {
       await Promise.resolve();
       (topNav!.shadowRoot!.querySelector('[part="next-button"]') as HTMLElement).click();
       await Promise.resolve();
-      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-175px');
+      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-167px');
     });
 
     it('should support snapping to menu item', async function() {
@@ -90,7 +90,7 @@ describe('dds-top-nav', function() {
       await Promise.resolve();
       (topNav!.shadowRoot!.querySelector('[part="next-button"]') as HTMLElement).click();
       await Promise.resolve();
-      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-100px');
+      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-92px');
     });
 
     it('should cope with change in the hidden state of the go to next page button', async function() {
@@ -104,7 +104,7 @@ describe('dds-top-nav', function() {
       (topNav as any)._currentScrollPosition = 565;
       (topNav!.shadowRoot!.querySelector('[part="next-button"]') as HTMLElement).click();
       await Promise.resolve();
-      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-700px');
+      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-692px');
     });
 
     it('should snap to the right edge at the last page', async function() {
@@ -138,7 +138,7 @@ describe('dds-top-nav', function() {
       (topNav as any)._currentScrollPosition = 350;
       (topNav!.shadowRoot!.querySelector('[part="prev-button"]') as HTMLElement).click();
       await Promise.resolve();
-      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-175px');
+      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-183px');
     });
 
     it('should support snapping to menu item', async function() {
@@ -156,7 +156,7 @@ describe('dds-top-nav', function() {
       (topNav!.shadowRoot!.querySelector('[part="prev-button"]') as HTMLElement).click();
       await Promise.resolve();
       // Given the 4th item should be the right-most, the left position should be `350px - (200px - 80px)`
-      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-230px');
+      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-238px');
     });
 
     it('should cope with change in the hidden state of the go to next page button', async function() {
@@ -170,7 +170,7 @@ describe('dds-top-nav', function() {
       (topNav as any)._currentScrollPosition = 700; // The scrolling position of the last page
       (topNav!.shadowRoot!.querySelector('[part="prev-button"]') as HTMLElement).click();
       await Promise.resolve();
-      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-565px');
+      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-573px');
     });
 
     it('should snap to the left edge at the first page', async function() {
@@ -189,7 +189,7 @@ describe('dds-top-nav', function() {
       (topNav as any)._currentScrollPosition = 110;
       (topNav!.shadowRoot!.querySelector('[part="prev-button"]') as HTMLElement).click();
       await Promise.resolve();
-      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('0px');
+      expect((topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement).style.left).toBe('-48px');
     });
   });
 

packages/web-components/src/components/masthead/top-nav.ts

@@ -23,6 +23,9 @@ import styles from './masthead.scss';
 const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
+// button gradient width size
+const buttonGradientWidth = 8;
+
 /**
  * @param a An array.
  * @param predicate The callback function.
@@ -199,30 +202,43 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
     // If the right-side intersection sentinel is in the view, it means that right-side caret button is hidden.
     // Given scrolling to left makes it shown,
     // `contentContainerNode!.offsetWidth` will shrink as we scroll and we need to adjust for it.
-    const caretRightNodeWidthAdjustment = isIntersectionRightTrackerInContent ? caretRightNode!.offsetWidth : 0;
+
     const elems = slotNode?.assignedElements() as HTMLElement[];
     if (elems) {
       if (pageIsRTL) {
+        const caretLeftNodeWidthAdjustment = this._isIntersectionLeftTrackerInContent ? caretLeftNode!.offsetWidth : 0;
         const navRight = navNode!.getBoundingClientRect().right;
         const lastVisibleElementIndex = elems.findIndex(
-          elem => elem.getBoundingClientRect().left < navRight - currentScrollPosition - caretRightNodeWidthAdjustment
+          elem => elem.getBoundingClientRect().left < navRight - currentScrollPosition - caretRightNode!.offsetWidth
         );
         if (lastVisibleElementIndex >= 0) {
-          this._currentScrollPosition =
+          this._currentScrollPosition = Math.max(
             navRight -
-            elems[lastVisibleElementIndex].getBoundingClientRect().left -
-            contentContainerNode!.offsetWidth +
-            caretRightNode!.offsetWidth;
+              elems[lastVisibleElementIndex].getBoundingClientRect().left -
+              contentContainerNode!.offsetWidth +
+              caretLeftNodeWidthAdjustment +
+              caretRightNode!.offsetWidth +
+              buttonGradientWidth,
+            0
+          );
         }
       } else {
+        const caretRightNodeWidthAdjustment = isIntersectionRightTrackerInContent
+          ? caretRightNode!.offsetWidth + buttonGradientWidth
+          : buttonGradientWidth;
+        const caretLeftNodeWidthAdjustment = this._isIntersectionLeftTrackerInContent
+          ? caretLeftNode!.offsetWidth + buttonGradientWidth
+          : 0;
         const navLeft = navNode!.getBoundingClientRect().left;
         const lastVisibleElementIndex = findLastIndex(
           elems,
           elem => elem.getBoundingClientRect().left - navLeft < currentScrollPosition
         );
         if (lastVisibleElementIndex >= 0) {
           const lastVisibleElementRight = elems[lastVisibleElementIndex].getBoundingClientRect().right - navLeft;
-          const newScrollPosition = lastVisibleElementRight - (contentContainerNode!.offsetWidth - caretRightNodeWidthAdjustment);
+          const newScrollPosition =
+            lastVisibleElementRight -
+            (contentContainerNode!.offsetWidth + caretLeftNodeWidthAdjustment - caretRightNodeWidthAdjustment);
           // If the new scroll position is less than the width of the left caret button,
           // it means that hiding the left caret button reveals the whole of the left-most nav item.
           // Snaps the left-most nav item to the left edge of nav container in this case.
@@ -247,39 +263,92 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
       _pageIsRTL: pageIsRTL,
       _slotNode: slotNode,
     } = this;
-    const caretLeftNodeWidthAdjustment = isIntersectionLeftTrackerInContent ? caretLeftNode!.offsetWidth : 0;
-    const caretRightNodeWidthAdjustment = caretRightNode!.offsetWidth;
     const interimLeft = currentScrollPosition + contentContainerNode!.offsetWidth;
     const elems = slotNode?.assignedElements() as HTMLElement[];
     if (elems) {
       if (pageIsRTL) {
         const navRight = navNode!.getBoundingClientRect().right;
         const firstVisibleElementIndex = elems.findIndex(
-          elem => navRight - elem.getBoundingClientRect().left > interimLeft - caretRightNodeWidthAdjustment
+          elem => navRight - elem.getBoundingClientRect().left > interimLeft - caretLeftNode!.offsetWidth - buttonGradientWidth
         );
         if (firstVisibleElementIndex > 0) {
           const firstVisibleElementLeft = Math.abs(
-            elems[firstVisibleElementIndex].getBoundingClientRect().right - navRight + caretRightNodeWidthAdjustment
+            elems[firstVisibleElementIndex].getBoundingClientRect().right -
+              navRight +
+              caretLeftNode!.offsetWidth +
+              buttonGradientWidth
           );
           const maxLeft = contentNode!.scrollWidth - contentContainerNode!.offsetWidth;
           this._currentScrollPosition = Math.min(firstVisibleElementLeft, maxLeft);
         }
       } else {
+        const caretLeftNodeWidthAdjustment = isIntersectionLeftTrackerInContent ? caretLeftNode!.offsetWidth : 0;
         const navLeft = navNode!.getBoundingClientRect().left;
         const firstVisibleElementIndex = elems.findIndex(elem => elem.getBoundingClientRect().right - navLeft > interimLeft);
         if (firstVisibleElementIndex > 0) {
-          const firstVisibleElementLeft = elems[firstVisibleElementIndex].getBoundingClientRect().left - navLeft;
+          const firstVisibleElementLeft =
+            elems[firstVisibleElementIndex].getBoundingClientRect().left - navLeft - buttonGradientWidth;
           // Ensures that is there is no blank area at the right hand side in scroll area
           // if we see the right remainder nav items can be contained in a page
           const maxLeft =
             contentNode!.scrollWidth -
-            (contentContainerNode!.offsetWidth - caretLeftNodeWidthAdjustment + caretRightNodeWidthAdjustment);
+            (contentContainerNode!.offsetWidth - caretLeftNodeWidthAdjustment + caretRightNode!.offsetWidth);
           this._currentScrollPosition = Math.min(firstVisibleElementLeft, maxLeft);
         }
       }
     }
   }
 
+  protected _handleOnKeyDown(event: KeyboardEvent) {
+    const target = event.target as HTMLAnchorElement;
+    const {
+      _pageIsRTL: pageIsRTL,
+      _navNode: navNode,
+      _currentScrollPosition: currentScrollPosition,
+      _contentContainerNode: contentContainerNode,
+      _caretRightNode: caretRightNode,
+    } = this;
+    if (target) {
+      if (pageIsRTL) {
+        if (event.key === 'Tab') {
+          if (event.shiftKey) {
+            if (
+              target.previousElementSibling &&
+              caretRightNode &&
+              target.previousElementSibling.getBoundingClientRect().right + currentScrollPosition >
+                navNode!.getBoundingClientRect().right - caretRightNode.offsetWidth
+            ) {
+              this._paginateLeft();
+            }
+          } else if (
+            target.nextElementSibling &&
+            caretRightNode &&
+            navNode!.getBoundingClientRect().right - target.nextElementSibling.getBoundingClientRect().left >
+              currentScrollPosition + contentContainerNode!.offsetWidth - caretRightNode.offsetWidth
+          ) {
+            this._paginateRight();
+          }
+        }
+      } else if (event.key === 'Tab') {
+        if (event.shiftKey) {
+          if (
+            target.previousElementSibling &&
+            target.previousElementSibling.getBoundingClientRect().left - navNode!.getBoundingClientRect().left <
+              currentScrollPosition
+          ) {
+            this._paginateLeft();
+          }
+        } else if (
+          target.nextElementSibling &&
+          Math.floor(target.nextElementSibling.getBoundingClientRect().right - navNode!.getBoundingClientRect().left) >
+            currentScrollPosition + contentContainerNode!.offsetWidth
+        ) {
+          this._paginateRight();
+        }
+      }
+    }
+  }
+
   /**
    * Handles toggle event from the search component.
    *
@@ -329,6 +398,7 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
       _paginateLeft: paginateLeft,
       _paginateRight: paginateRight,
       _pageIsRTL: pageIsRTL,
+      _handleOnKeyDown: handleOnKeyDown,
     } = this;
     const caretLeftContainerClasses = classMap({
       [`${prefix}--header__nav-caret-left-container`]: true,
@@ -366,7 +436,7 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
                         class="${prefix}--header__menu-bar"
                         aria-label="${ifNonNull(this.menuBarLabel)}"
                       >
-                        <slot></slot>
+                        <slot @keydown="${handleOnKeyDown}"></slot>
                       </ul>
                       <div class="${prefix}--sub-content-left"></div>
                     </nav>
@@ -408,7 +478,7 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
                         class="${prefix}--header__menu-bar"
                         aria-label="${ifNonNull(this.menuBarLabel)}"
                       >
-                        <slot></slot>
+                        <slot @keydown="${handleOnKeyDown}"></slot>
                       </ul>
                       <div class="${prefix}--sub-content-right"></div>
                     </nav>

packages/web-components/src/components/table-of-contents/table-of-contents.ts

@@ -25,6 +25,10 @@ import StableSelectorMixin from '../../globals/mixins/stable-selector';
 
 const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
+
+// total button width - grid offset
+const buttonWidthOffset = 32;
+
 interface Cancelable {
   cancel(): void;
 }
@@ -216,21 +220,39 @@ class DDSTableOfContents extends HostListenerMixin(StableSelectorMixin(LitElemen
   private _handleOnKeyDown(event: KeyboardEvent) {
     const { selectorDesktopItem } = this.constructor as typeof DDSTableOfContents;
     const target = event.target as HTMLAnchorElement;
+    const { _pageIsRTL: pageIsRTL } = this;
     if (target.matches?.(selectorDesktopItem)) {
-      if (event.key === 'Tab') {
+      if (pageIsRTL) {
+        if (event.key === 'Tab') {
+          if (event.shiftKey) {
+            if (
+              target.parentElement?.previousElementSibling &&
+              target.parentElement?.previousElementSibling.getBoundingClientRect().right >
+                this._navBar!.getBoundingClientRect().right - buttonWidthOffset
+            ) {
+              this._paginateLeft();
+            }
+          } else if (
+            target.parentElement?.nextElementSibling &&
+            target.parentElement?.nextElementSibling.getBoundingClientRect().left <
+              this._navBar!.getBoundingClientRect().left + buttonWidthOffset
+          ) {
+            this._paginateRight();
+          }
+        }
+      } else if (event.key === 'Tab') {
         if (event.shiftKey) {
-          // 32 = total button width - grid offset
           if (
             target.parentElement?.previousElementSibling &&
             target.parentElement?.previousElementSibling!.getBoundingClientRect().left <
-              this._navBar!.getBoundingClientRect().left + 32
+              this._navBar!.getBoundingClientRect().left + buttonWidthOffset
           ) {
             this._paginateLeft();
           }
         } else if (
           target.parentElement?.nextElementSibling &&
           target.parentElement?.nextElementSibling!.getBoundingClientRect().right >
-            this._navBar!.getBoundingClientRect().right - 32
+            this._navBar!.getBoundingClientRect().right - buttonWidthOffset
         ) {
           this._paginateRight();
         }
@@ -387,22 +409,25 @@ class DDSTableOfContents extends HostListenerMixin(StableSelectorMixin(LitElemen
     if (elems) {
       if (pageIsRTL) {
         const interimLeft = navBar!.getBoundingClientRect().right;
-        const lastVisibleElementIndex = findLastIndex(elems, elem => elem.getBoundingClientRect().right > interimLeft - 32);
+        const lastVisibleElementIndex = findLastIndex(
+          elems,
+          elem => elem.getBoundingClientRect().right > interimLeft - buttonWidthOffset
+        );
         if (lastVisibleElementIndex >= 0) {
           const lastVisibleElementRight = elems[lastVisibleElementIndex].getBoundingClientRect().left;
           // 48 = button width - button gradient
           const newScrollPosition = currentScrollPosition - lastVisibleElementRight + 48;
           this._currentScrollPosition = newScrollPosition <= 0 ? 0 : newScrollPosition;
         }
       } else {
-        // 32 = total button width - grid offset
         const lastVisibleElementIndex = findLastIndex(
           elems,
-          elem => elem.getBoundingClientRect().left < 32 + navBar!.getBoundingClientRect().left
+          elem => elem.getBoundingClientRect().left < buttonWidthOffset + navBar!.getBoundingClientRect().left
         );
         if (lastVisibleElementIndex >= 0) {
           const lastVisibleElementRight = elems[lastVisibleElementIndex].getBoundingClientRect().right;
-          const newScrollPosition = lastVisibleElementRight + currentScrollPosition - navBar!.getBoundingClientRect().right + 32;
+          const newScrollPosition =
+            lastVisibleElementRight + currentScrollPosition - navBar!.getBoundingClientRect().right + buttonWidthOffset;
           // If the new scroll position is less than the width of the left caret button,
           // it means that hiding the left caret button reveals the whole of the left-most nav item.
           // Snaps the left-most nav item to the left edge of nav container in this case.
@@ -428,21 +453,28 @@ class DDSTableOfContents extends HostListenerMixin(StableSelectorMixin(LitElemen
     if (elems) {
       if (pageIsRTL) {
         const interimLeft = navBar!.getBoundingClientRect().left;
-        const firstVisibleElementIndex = elems.findIndex(elem => elem.getBoundingClientRect().left < interimLeft + 32);
+        const firstVisibleElementIndex = elems.findIndex(
+          elem => elem.getBoundingClientRect().left < interimLeft + buttonWidthOffset
+        );
         if (firstVisibleElementIndex > 0) {
           const firstVisibleElementLeft = Math.abs(
-            elems[firstVisibleElementIndex].getBoundingClientRect().right + 32 - navBar!.getBoundingClientRect().right
+            elems[firstVisibleElementIndex].getBoundingClientRect().right +
+              buttonWidthOffset -
+              navBar!.getBoundingClientRect().right
           );
           const maxLeft = contentNode!.scrollWidth - navBar!.offsetWidth;
           this._currentScrollPosition = Math.min(firstVisibleElementLeft + currentScrollPosition, maxLeft);
         }
       } else {
         const interimRight = navBar!.getBoundingClientRect().right;
-        // 32 = total button width - grid offset
-        const firstVisibleElementIndex = elems.findIndex(elem => elem.getBoundingClientRect().right > interimRight - 32);
+        const firstVisibleElementIndex = elems.findIndex(
+          elem => elem.getBoundingClientRect().right > interimRight - buttonWidthOffset
+        );
         if (firstVisibleElementIndex > 0) {
           const firstVisibleElementLeft =
-            elems[firstVisibleElementIndex].getBoundingClientRect().left - navBar!.getBoundingClientRect().left - 32;
+            elems[firstVisibleElementIndex].getBoundingClientRect().left -
+            navBar!.getBoundingClientRect().left -
+            buttonWidthOffset;
           // Ensures that is there is no blank area at the right hand side in scroll area
           // if we see the right remainder nav items can be contained in a page
           const maxLeft = contentNode!.scrollWidth - navBar!.offsetWidth;