fix(ui5-tabcontainer): tabs are scrolled into view on key navigation (#3354)

Author: TeodorTaushanov

packages/base/src/delegate/ScrollEnablement.js

@@ -70,7 +70,13 @@ class ScrollEnablement extends EventProvider {
 		this._container.scrollTop = top;
 	}
 
-	move(dx, dy) {
+	move(dx, dy, disableAnimation) {
+		if (disableAnimation) {
+			this._container.scrollLeft += dx;
+			this._container.scrollTop += dy;
+			return;
+		}
+
 		return scroll({
 			element: this._container,
 			dx,

packages/main/src/TabContainer.hbs

@@ -19,6 +19,7 @@
 			<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
 				<ul
 					role="tablist"
+					@focusin={{_onTablistFocusin}}
 					class="{{classes.headerList}}"
 					@click="{{_onHeaderClick}}"
 					@keydown="{{_onHeaderKeyDown}}"

packages/main/src/TabContainer.js

@@ -340,6 +340,26 @@ class TabContainer extends UI5Element {
 		ResizeHandler.deregister(this._getHeader(), this._handleResize);
 	}
 
+	_onTablistFocusin(event) {
+		const target = event.target;
+
+		if (!this._scrollable || !target.classList.contains("ui5-tab-strip-item")) {
+			return;
+		}
+
+		const headerScrollContainer = this._getHeaderScrollContainer();
+		const leftArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowLeft").offsetWidth;
+		const rightArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowRight").offsetWidth;
+
+		if (this._scrollableBack && (target.offsetLeft - leftArrowWidth < headerScrollContainer.scrollLeft)) {
+			this._scrollEnablement.move(target.offsetLeft - leftArrowWidth - headerScrollContainer.scrollLeft, 0, true);
+			this._updateScrolling();
+		} else if (this._scrollableForward && (target.offsetLeft + target.offsetWidth > headerScrollContainer.scrollLeft + headerScrollContainer.offsetWidth - rightArrowWidth)) {
+			this._scrollEnablement.move(target.offsetLeft + target.offsetWidth - headerScrollContainer.scrollLeft - headerScrollContainer.offsetWidth + rightArrowWidth, 0, true);
+			this._updateScrolling();
+		}
+	}
+
 	_onHeaderClick(event) {
 		const tab = getTab(event.target);
 		if (!tab) {

packages/main/src/themes/TabContainer.css

@@ -47,6 +47,7 @@
 }
 
 .ui5-tc__headerList {
+	position: relative;
 	display: flex;
 	margin: 0;
 	padding: 0;