@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/TabContainer.js

@@ -13,6 +13,7 @@ import {
 	isDown,
 	isRight,
 	isLeft,
+	isUp,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -31,6 +32,7 @@ import List from "./List.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
 import SemanticColor from "./types/SemanticColor.js";
+import TabContainerBackgroundDesign from "./types/TabContainerBackgroundDesign.js";
 
 // Templates
 import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
@@ -45,6 +47,8 @@ import TabsOverflowMode from "./types/TabsOverflowMode.js";
 const tabStyles = [];
 const staticAreaTabStyles = [];
 
+const PAGE_UP_DOWN_SIZE = 5;
+
 /**
  * @public
  */
@@ -53,13 +57,13 @@ const metadata = {
 	languageAware: true,
 	managedSlots: true,
 	fastNavigation: true,
-	slots: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ {
+	slots: /** @lends sap.ui.webc.main.TabContainer.prototype */ {
 		/**
 		 * Defines the tabs.
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.
 		 *
-		 * @type {sap.ui.webcomponents.main.ITab[]}
+		 * @type {sap.ui.webc.main.ITab[]}
 		 * @public
 		 * @slot items
 		 */
@@ -77,7 +81,7 @@ const metadata = {
 		 * Defines the button which will open the overflow menu. If nothing is provided to this slot,
 		 * the default button will be used.
 		 *
-		 * @type {sap.ui.webcomponents.main.IButton}
+		 * @type {sap.ui.webc.main.IButton}
 		 * @public
 		 * @slot
 		 * @since 1.0.0-rc.9
@@ -90,7 +94,7 @@ const metadata = {
 		 * Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,
 		 * the default button will be used.
 		 *
-		 * @type {sap.ui.webcomponents.main.IButton}
+		 * @type {sap.ui.webc.main.IButton}
 		 * @public
 		 * @slot
 		 * @since 1.1.0
@@ -99,7 +103,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TabContainer.prototype */ {
 		/**
 		 * Defines whether the tabs are in a fixed state that is not
 		 * expandable/collapsible by user interaction.
@@ -137,7 +141,7 @@ const metadata = {
 		 * <li><code>Bottom</code></li>
 		 * </ul>
 		 *
-		 * @type {TabContainerTabsPlacement}
+		 * @type {sap.ui.webc.main.types.TabContainerTabsPlacement}
 		 * @defaultvalue "Top"
 		 * @since 1.0.0-rc.7
 		 * @private
@@ -156,8 +160,8 @@ const metadata = {
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
-		 * @deprecated Since the introduction of TabsOverflowMode overflows will always be visible if there is not enough space for all tabs,
-		 * all hidden tabs are moved to a select list in the respective overflows and are accessible via the overflowButton and / or startOverflowButton
+		 * @deprecated Since the introduction of TabsOverflowMode, overflows will always be visible if there is not enough space for all tabs,
+		 * all hidden tabs are moved to a select list in the respective overflows and are accessible via the <code>overflowButton</code> and / or <code>startOverflowButton</code> slots.
 		 */
 		showOverflow: {
 			type: Boolean,
@@ -178,7 +182,7 @@ const metadata = {
 		 * <li><code>Inline</code></li>
 		 * </ul>
 		 *
-		 * @type {TabLayout}
+		 * @type {sap.ui.webc.main.types.TabLayout}
 		 * @defaultvalue "Standard"
 		 * @public
 		 */
@@ -188,7 +192,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the overflow mode of the tab strip. If you have a large number of tabs, only the tabs that can fit on screen will be visible.
+		 * Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.
 		 * All other tabs that can 't fit on the screen are available in an overflow tab "More".
 		 *
 		 * <br><br>
@@ -203,7 +207,7 @@ const metadata = {
 		 * <li><code>StartAndEnd</code></li>
 		 * </ul>
 		 *
-		 * @type {TabsOverflowMode}
+		 * @type {sap.ui.webc.main.types.TabsOverflowMode}
 		 * @defaultvalue "End"
 		 * @since 1.1.0
 		 * @public
@@ -223,6 +227,32 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Sets the background color of the Tab Container's header as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+		 *
+		 * @type {sap.ui.webc.main.types.TabContainerBackgroundDesign}
+		 * @defaultvalue "Solid"
+		 * @since 1.10.0
+		 * @public
+		 */
+		headerBackgroundDesign: {
+			type: TabContainerBackgroundDesign,
+			defaultValue: TabContainerBackgroundDesign.Solid,
+		},
+
+		/**
+		 * Sets the background color of the Tab Container's content as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+		 *
+		 * @type {sap.ui.webc.main.types.TabContainerBackgroundDesign}
+		 * @defaultvalue "Solid"
+		 * @since 1.10.0
+		 * @public
+		 */
+		contentBackgroundDesign: {
+			type: TabContainerBackgroundDesign,
+			defaultValue: TabContainerBackgroundDesign.Solid,
+		},
+
 		_selectedTab: {
 			type: Object,
 		},
@@ -254,15 +284,16 @@ const metadata = {
 			multiple: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ {
+	events: /** @lends sap.ui.webc.main.TabContainer.prototype */ {
 
 		/**
 		 * Fired when a tab is selected.
 		 *
-		 * @event sap.ui.webcomponents.main.TabContainer#tab-select
+		 * @event sap.ui.webc.main.TabContainer#tab-select
 		 * @param {HTMLElement} tab The selected <code>tab</code>.
-		 * @param {Integer} tabIndex The selected <code>tab</code> index.
+		 * @param {Integer} tabIndex The selected <code>tab</code> index in the flattened array of all tabs and their subTabs, provided by the <code>allItems</code> getter.
 		 * @public
+		 * @allowPreventDefault
 		 */
 		"tab-select": {
 			detail: {
@@ -322,8 +353,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TabContainer
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.TabContainer
+ * @extends sap.ui.webc.base.UI5Element
  * @appenddocs Tab TabSeparator
  * @tagname ui5-tabcontainer
  * @public
@@ -368,24 +399,28 @@ class TabContainer extends UI5Element {
 
 		// Init ItemNavigation
 		this._itemNavigation = new ItemNavigation(this, {
-			getItemsCallback: () => this._getFocusableTabs(),
+			getItemsCallback: () => this._getFocusableRefs(),
+			skipItemsSize: PAGE_UP_DOWN_SIZE,
 		});
 	}
 
 	onBeforeRendering() {
-		// update selected tab
 		this._allItemsAndSubItems = this._getAllSubItems(this.items);
-		if (this._allItemsAndSubItems.length) {
-			const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
-			if (selectedTabs.length) {
-				this._selectedTab = selectedTabs[0];
-			} else {
-				this._selectedTab = this._allItemsAndSubItems[0];
-				this._selectedTab._selected = true;
-			}
+		if (!this._allItemsAndSubItems.length) {
+			return;
 		}
 
-		this._setItemsExternalProperties(this.items);
+		// update selected tab
+		const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
+		if (selectedTabs.length) {
+			this._selectedTab._selected = false;
+			this._selectedTab = selectedTabs[0];
+		} else {
+			this._selectedTab = this._allItemsAndSubItems[0];
+			this._selectedTab._selected = true;
+		}
+
+		this._setItemsPrivateProperties(this.items);
 
 		if (!this._animationRunning) {
 			this._contentCollapsed = this.collapsed;
@@ -397,9 +432,16 @@ class TabContainer extends UI5Element {
 	}
 
 	onAfterRendering() {
-		this.items.forEach(item => {
-			item._tabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
-		});
+		if (!this.items.length) {
+			return;
+		}
+
+		this._setItemsForStrip();
+
+		if (!this.shadowRoot.contains(document.activeElement)) {
+			const focusStart = this._getRootTab(this._selectedTab);
+			this._itemNavigation.setCurrentItem(focusStart);
+		}
 	}
 
 	onEnterDOM() {
@@ -424,31 +466,45 @@ class TabContainer extends UI5Element {
 		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
 	}
 
-	_setItemsExternalProperties(items) {
-		items.filter(item => !item.isSeparator).forEach((item, index, arr) => {
-			item._isInline = this.tabLayout === TabLayout.Inline;
-			item._mixedMode = this.mixedMode;
-			item._posinset = index + 1;
-			item._setsize = arr.length;
-			item._getTabContainerHeaderItemCallback = _ => this.getDomRef().querySelector(`#${item._id}`);
-			item._itemSelectCallback = this._onItemSelect.bind(this);
-			item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
-			item._realTab = this._selectedTab;
-			item._isTopLevelTab = this.items.some(i => i === item);
-			walk(items, tab => {
-				tab._realTab = item._realTab;
+	_setItemsPrivateProperties(items) {
+		// set real dom ref to all items, then return only the tabs for further processing
+		const allTabs = items.filter(item => {
+			item._getElementInStrip = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+			return !item.isSeparator;
+		});
+
+		allTabs.forEach((tab, index, arr) => {
+			tab._isInline = this.tabLayout === TabLayout.Inline;
+			tab._mixedMode = this.mixedMode;
+			tab._posinset = index + 1;
+			tab._setsize = arr.length;
+			tab._realTab = this._selectedTab;
+			tab._isTopLevelTab = items.some(i => i === tab);
+			walk(items, _tab => {
+				_tab._realTab = tab._realTab;
 			});
 		});
 	}
 
+	_onHeaderFocusin(event) {
+		let target = event.target;
+
+		const tab = getTab(target);
+		if (tab) {
+			target = tab._realTab;
+		}
+
+		this._itemNavigation.setCurrentItem(target);
+	}
+
 	async _onTabStripClick(event) {
 		const tab = getTab(event.target);
 		if (!tab || tab._realTab.disabled) {
 			return;
 		}
 
-		event.preventDefault();
 		event.stopPropagation();
+		event.preventDefault();
 		if (event.target.hasAttribute("ui5-button")) {
 			this._onTabExpandButtonClick(event);
 			return;
@@ -462,10 +518,10 @@ class TabContainer extends UI5Element {
 			if (this.responsivePopover.opened) {
 				this.responsivePopover.close();
 			} else {
-				this._setInitialFocus(this._getSelectedInPopover());
+				this._setPopoverInitialFocus();
 			}
 
-			this.responsivePopover.showAt(tab);
+			this.responsivePopover.showAt(tab._realTab.getTabInStripDomRef());
 			return;
 		}
 		this._onHeaderItemSelect(tab);
@@ -478,7 +534,7 @@ class TabContainer extends UI5Element {
 		let tabInstance = button.tab;
 
 		if (tabInstance) {
-			tabInstance.focus();
+			tabInstance.focus({ focusVisible: true });
 		}
 
 		if ((event.type === "keydown") && !event.target._realTab.isSingleClickArea) {
@@ -496,20 +552,27 @@ class TabContainer extends UI5Element {
 		this._addStyleIndent(this._overflowItems);
 
 		this.responsivePopover = await this._respPopover();
-		if (this.responsivePopover.opened) {
+		if (this.responsivePopover.isOpen()) {
 			this.responsivePopover.close();
 		} else {
-			this._setInitialFocus(this._getSelectedInPopover());
+			this._setPopoverInitialFocus();
 		}
 		this.responsivePopover.showAt(button);
 	}
 
-	_setInitialFocus(selectedInPopover) {
-		if (selectedInPopover.length) {
-			this.responsivePopover.initialFocus = selectedInPopover[0].id;
-		} else {
-			this.responsivePopover.initialFocus = this.responsivePopover.content[0].items.filter(item => item.classList.contains("ui5-tab-overflow-item"))[0].id;
-		}
+	async _setPopoverInitialFocus() {
+		const selectedTabInOverflow = this._getSelectedTabInOverflow();
+		const tab = selectedTabInOverflow || this._getFirstFocusableItemInOverflow();
+
+		this.responsivePopover.initialFocus = `${tab._realTab._id}-li`;
+	}
+
+	_getSelectedTabInOverflow() {
+		return this.responsivePopover.content[0].items.find(item => (item._realTab && item._realTab.selected));
+	}
+
+	_getFirstFocusableItemInOverflow() {
+		return this.responsivePopover.content[0].items.find(item => item.classList.contains("ui5-tab-overflow-item"));
 	}
 
 	_onTabStripKeyDown(event) {
@@ -530,7 +593,7 @@ class TabContainer extends UI5Element {
 			event.preventDefault(); // prevent scrolling
 		}
 
-		if (isDown(event)) {
+		if (isDown(event) || isUp(event)) {
 			if (tab._realTab.requiresExpandButton) {
 				this._onTabExpandButtonClick(event);
 			}
@@ -558,26 +621,45 @@ class TabContainer extends UI5Element {
 
 	_onHeaderItemSelect(tab) {
 		if (!tab.hasAttribute("disabled")) {
-			this._onItemSelect(tab);
-
-			if (!this.isModeStartAndEnd) {
-				this._setItemsForStrip();
-			}
+			this._onItemSelect(tab.id);
 		}
 	}
 
 	async _onOverflowListItemClick(event) {
 		event.preventDefault(); // cancel the item selection
-		const { item } = event.detail;
 
-		this._onItemSelect(item);
-		await this.responsivePopover.close();
+		this._onItemSelect(event.detail.item.id.slice(0, -3)); // strip "-li" from end of id
 
-		this._setItemsForStrip();
+		this.responsivePopover.close();
+		await renderFinished();
 
 		const selectedTopLevel = this._getRootTab(this._selectedTab);
-
-		selectedTopLevel.focus();
+		selectedTopLevel.getTabInStripDomRef().focus({ focusVisible: true });
+	}
+
+	/**
+	 * Returns all slotted tabs and their subTabs in a flattened array.
+	 * The order of tabs is depth-first. For example, given the following slotted elements:
+	 * <code>
+	 * 	<ui5-tabcontainer>
+	 * 		<ui5-tab id="First">
+	 * 			...
+	 * 			<ui5-tab slot="subTabs" id="Nested">...</ui5-tab>
+	 * 		</ui5-tab>
+	 * 		<ui5-tab id="Second">...</ui5-tab>
+	 * 		<ui5-tab-separator id="sep"></ui5-tab-separator>
+	 * 		<ui5-tab id="Third">...</ui5-tab>
+	 * 	</ui5-tabcontainer>
+	 * </code>
+	 * Calling <code>allItems</code> on this TabContainer will return the instances in the following order:
+	 * <code>[ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]</code>
+	 * @public
+	 * @readonly
+	 *
+	 * @returns {sap.ui.webc.main.ITab[]}
+	 */
+	get allItems() {
+		return this._getAllSubItems(this.items);
 	}
 
 	_getAllSubItems(items, result = [], level = 1) {
@@ -593,44 +675,44 @@ class TabContainer extends UI5Element {
 		return result;
 	}
 
-	_onItemSelect(target) {
-		const selectedIndex = findIndex(this._allItemsAndSubItems, item => item.__id === target.id);
-		const selectedTabIndex = findIndex(this._allItemsAndSubItems, item => item.__id === target.id);
-		const selectedTab = this._allItemsAndSubItems[selectedIndex];
+	_onItemSelect(selectedTabId) {
+		const previousTab = this._selectedTab;
+		const selectedTabIndex = this._allItemsAndSubItems.findIndex(item => item.__id === selectedTabId);
+		const selectedTab = this._allItemsAndSubItems[selectedTabIndex];
 
-		// update selected items
-		this._allItemsAndSubItems
-			.forEach((item, index) => {
-				const selected = selectedIndex === index;
-				item.selected = selected;
+		const selectionSuccessful = this.selectTab(selectedTab, selectedTabIndex);
+		if (!selectionSuccessful) {
+			return;
+		}
 
-				if (item._selected) {
-					item._selected = false;
-				}
-			});
+		// update selected property on all items
+		this._allItemsAndSubItems.forEach((item, index) => {
+			const selected = selectedTabIndex === index;
+			item.selected = selected;
+
+			if (item._selected) {
+				item._selected = false;
+			}
+		});
 
 		if (this.fixed) {
-			this.selectTab(selectedTab, selectedTabIndex);
 			return;
 		}
 
 		if (!this.animate) {
-			this.toggle(selectedTab);
-			this.selectTab(selectedTab, selectedTabIndex);
-			return;
+			this.toggle(selectedTab, previousTab);
+		} else {
+			this.toggleAnimated(selectedTab, previousTab);
 		}
-
-		this.toggleAnimated(selectedTab);
-		this.selectTab(selectedTab, selectedTabIndex);
 	}
 
-	async toggleAnimated(selectedTab) {
+	async toggleAnimated(selectedTab, previousTab) {
 		const content = this.shadowRoot.querySelector(".ui5-tc__content");
 		let animationPromise = null;
 
 		this._animationRunning = true;
 
-		if (selectedTab === this._selectedTab) {
+		if (selectedTab === previousTab) {
 			// click on already selected tab - animate both directions
 			this.collapsed = !this.collapsed;
 			animationPromise = this.collapsed ? this.slideContentUp(content) : this.slideContentDown(content);
@@ -645,29 +727,39 @@ class TabContainer extends UI5Element {
 		this._animationRunning = false;
 	}
 
-	toggle(selectedTab) {
-		if (selectedTab === this._selectedTab) {
+	toggle(selectedTab, previousTab) {
+		if (selectedTab === previousTab) {
 			this.collapsed = !this.collapsed;
 		} else {
 			this.collapsed = false;
 		}
 	}
 
+	/**
+	 * Fires the <code>tab-select</code> event and changes the internal reference for the currently selected tab.
+	 * If the event is prevented, the current tab is not changed.
+	 * @private
+	 *
+	 * @param {object} selectedTab selected tab instance
+	 * @param {number} selectedTabIndex selected tab index for an array containing all tabs and sub tabs. <b>Note:</b> Use the method <code>allTabs</code> to get this array.
+	 * @returns {boolean} true if the tab selection is successful, false if it was prevented
+	 */
 	selectTab(selectedTab, selectedTabIndex) {
+		if (!this.fireEvent("tab-select", { tab: selectedTab, tabIndex: selectedTabIndex }, true)) {
+			return false;
+		}
+
 		// select the tab
 		this._selectedTab = selectedTab;
-		this.fireEvent("tab-select", {
-			tab: selectedTab,
-			tabIndex: selectedTabIndex,
-		});
+		return true;
 	}
 
 	slideContentDown(element) {
-		return slideDown({ element }).promise();
+		return slideDown(element).promise();
 	}
 
 	slideContentUp(element) {
-		return slideUp({ element }).promise();
+		return slideUp(element).promise();
 	}
 
 	async _onOverflowClick(event) {
@@ -679,44 +771,34 @@ class TabContainer extends UI5Element {
 		const overflow = event.currentTarget;
 		const isEndOverflow = overflow.classList.contains("ui5-tc__overflow--end");
 		const isStartOverflow = overflow.classList.contains("ui5-tc__overflow--start");
-		const items = [];
-
 		const overflowAttr = isEndOverflow ? "end-overflow" : "start-overflow";
 
-		this._overflowItems = [];
+		this._overflowItems = this.items.filter(item => {
+			const stripRef = item.getTabInStripDomRef();
 
-		this.items.forEach(item => {
-			if (item.getTabInStripDomRef() && item.getTabInStripDomRef().hasAttribute(overflowAttr)) {
-				items.push(item);
-			}
+			return stripRef && stripRef.hasAttribute(overflowAttr);
 		});
 
-		let button;
+		this._addStyleIndent(this._overflowItems);
+
+		let opener;
 		if (isEndOverflow) {
-			button = this.overflowButton[0] || overflow.querySelector("[ui5-button]");
-			this._overflowItems = items;
-			this._addStyleIndent(this._overflowItems);
+			opener = this.overflowButton[0] || this._getEndOverflowBtnDOM();
 		}
 
 		if (isStartOverflow) {
-			button = this.startOverflowButton[0] || overflow.querySelector("[ui5-button]");
-			this._overflowItems = items;
-			this._addStyleIndent(this._overflowItems);
+			opener = this.startOverflowButton[0] || this._getStartOverflowBtnDOM();
 		}
 
 		this.responsivePopover = await this._respPopover();
 		if (this.responsivePopover.opened) {
 			this.responsivePopover.close();
 		} else {
-			this.responsivePopover.initialFocus = this.responsivePopover.content[0].items.filter(item => item.classList.contains("ui5-tab-overflow-item"))[0].id;
-			await this.responsivePopover.showAt(button);
+			this._setPopoverInitialFocus();
+			this.responsivePopover.showAt(opener);
 		}
 	}
 
-	_getSelectedInPopover() {
-		return this.responsivePopover.content[0].items.filter(item => (item._realTab && item._realTab.selected));
-	}
-
 	_addStyleIndent(tabs) {
 		const extraIndent = this._getAllSubItems(tabs)
 			.filter(tab => !tab.isSeparator)
@@ -737,10 +819,13 @@ class TabContainer extends UI5Element {
 	}
 
 	async _onOverflowKeyDown(event) {
-		const isEndOverflow = event.currentTarget.classList.contains("ui5-tc__overflow--end");
-		const isStartOverflow = event.currentTarget.classList.contains("ui5-tc__overflow--start");
+		const overflow = event.currentTarget;
+		const isEndOverflow = overflow.classList.contains("ui5-tc__overflow--end");
+		const isStartOverflow = overflow.classList.contains("ui5-tc__overflow--start");
 
 		if (isDown(event) || (isStartOverflow && isLeft(event)) || (isEndOverflow && isRight(event))) {
+			event.stopPropagation();
+			event.preventDefault();
 			await this._onOverflowClick(event);
 		}
 	}
@@ -771,9 +856,7 @@ class TabContainer extends UI5Element {
 		});
 
 		const hasOverflow = tabStrip.offsetWidth < allItemsWidth;
-
 		if (!hasOverflow) {
-			this._closeRespPopover();
 			return;
 		}
 
@@ -783,9 +866,6 @@ class TabContainer extends UI5Element {
 		} else {
 			this._updateEndOverflow(itemsDomRefs);
 		}
-
-		this._itemNavigation._init();
-		this._itemNavigation.setCurrentItem(this._getRootTab(this._selectedTab));
 	}
 
 	_getRootTab(tab) {
@@ -1033,41 +1113,31 @@ class TabContainer extends UI5Element {
 		this._endOverflowText = `+${endOverflowItemsCount}`;
 	}
 
-	async _closeRespPopover() {
-		this.responsivePopover = await this._respPopover();
-		this.responsivePopover.close();
-	}
-
-	_getFocusableTabs() {
+	_getFocusableRefs() {
 		if (!this.getDomRef()) {
 			return [];
 		}
 
-		const focusableTabs = [];
+		const focusableRefs = [];
 
 		if (!this._getStartOverflow().hasAttribute("hidden")) {
-			if (this._getCustomStartOverflowBtnDOM()) {
-				focusableTabs.push(this._getCustomStartOverflowBtnDOM());
-			} else {
-				focusableTabs.push(this._getStartOverflowBtnDOM());
-			}
+			focusableRefs.push(this.startOverflowButton[0] || this._getStartOverflowBtnDOM());
 		}
 
 		this._getTabs().forEach(tab => {
-			if (tab.getTabInStripDomRef() && !tab.getTabInStripDomRef().hasAttribute("hidden")) {
-				focusableTabs.push(tab);
+			const ref = tab.getTabInStripDomRef();
+			const focusable = ref && !ref.hasAttribute("hidden");
+
+			if (focusable) {
+				focusableRefs.push(tab);
 			}
 		});
 
 		if (!this._getEndOverflow().hasAttribute("hidden")) {
-			if (this._getCustomEndOverflowBtnDOM()) {
-				focusableTabs.push(this._getCustomEndOverflowBtnDOM());
-			} else {
-				focusableTabs.push(this._getEndOverflowBtnDOM());
-			}
+			focusableRefs.push(this.overflowButton[0] || this._getEndOverflowBtnDOM());
 		}
 
-		return focusableTabs;
+		return focusableRefs;
 	}
 
 	_getHeader() {
@@ -1090,18 +1160,10 @@ class TabContainer extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-tc__overflow--end");
 	}
 
-	_getCustomStartOverflowBtnDOM() {
-		return this.shadowRoot.querySelector("slot[name=startOverflowButton]");
-	}
-
 	_getStartOverflowBtnDOM() {
 		return this._getStartOverflow().querySelector("[ui5-button]");
 	}
 
-	_getCustomEndOverflowBtnDOM() {
-		return this.shadowRoot.querySelector("slot[name=overflowButton]");
-	}
-
 	_getEndOverflowBtnDOM() {
 		return this._getEndOverflow().querySelector("[ui5-button]");
 	}
@@ -1111,6 +1173,11 @@ class TabContainer extends UI5Element {
 		return staticAreaItem.querySelector(`#${this._id}-overflowMenu`);
 	}
 
+	async _closeRespPopover() {
+		this.responsivePopover = await this._respPopover();
+		this.responsivePopover.close();
+	}
+
 	get classes() {
 		return {
 			root: {
@@ -1211,18 +1278,6 @@ const getTab = el => {
 	return false;
 };
 
-const findIndex = (arr, predicate) => {
-	for (let i = 0; i < arr.length; i++) {
-		const result = predicate(arr[i]);
-
-		if (result) {
-			return i;
-		}
-	}
-
-	return -1;
-};
-
 const walk = (tabs, callback) => {
 	[...tabs].forEach(tab => {
 		callback(tab);