fix(ui5-tabcontainer): correct focus handling in overflow modes (#12259)

fixes: #12027

Author: duygu-rmdn

packages/main/cypress/specs/TabContainer.cy.tsx

@@ -1144,6 +1144,102 @@ describe("TabContainer keyboard handling", () => {
 		cy.get("@tabContainer").shadow().find("ui5-responsive-popover").as("popover");
 		cy.get("@popover").should("be.visible", "Popover is opened");
 	});
+
+	it("tests handling of the focus navigation with End overflow mode", () => {
+		cy.mount(
+			<>
+			<Button id="btn1"/>
+			<TabContainer id="tabContainerStartAndEndOverflow" overflowMode="End">
+				<Tab text="One">Tab 1</Tab>
+				<Tab text="Two">Tab 2</Tab>
+				<Tab id="activeTab" text="Three" selected>Tab 3</Tab>
+				<Tab text="Four">Tab 4</Tab>
+				<Tab text="Five">Tab 4</Tab>
+			</TabContainer>
+			<Button id="btn2"/>
+			</>
+		);
+
+		cy.viewport(300, 1080);
+
+		cy.get("#tabContainerStartAndEndOverflow").shadow().find(".ui5-tc__overflow--end").as("endOverflow");
+
+		cy.get("#btn1").realClick();
+
+		cy.realPress("Tab");
+
+		cy.realPress("ArrowRight");
+
+		cy.get("@endOverflow")
+			.find("[ui5-button]")
+			.shadow()
+			.find(".ui5-button-root")
+			.should("be.focus");
+
+		cy.realPress("Tab");
+
+		cy.get("#btn2").should("be.focused");
+
+		cy.realPress(["Shift", "Tab"]);
+
+		cy.get("@endOverflow")
+			.find("[ui5-button]")
+			.shadow()
+			.find(".ui5-button-root")
+			.should("be.focus");
+
+		cy.realPress(["Shift", "Tab"]);
+
+		cy.get("#btn1").should("be.focused");
+	});
+
+	it("tests handling of the focus navigation with Start overflow mode", () => {
+		cy.mount(
+			<>
+			<Button id="btn1"/>
+			<TabContainer id="tabContainerStartAndEndOverflow" overflowMode="StartAndEnd">
+				<Tab text="One">Tab 1</Tab>
+				<Tab text="Two">Tab 2</Tab>
+				<Tab id="activeTab" text="Three" selected>Tab 3</Tab>
+				<Tab text="Four">Tab 4</Tab>
+				<Tab text="Five">Tab 4</Tab>
+			</TabContainer>
+			<Button id="btn2"/>
+			</>
+		);
+
+		cy.viewport(300, 1080);
+
+		cy.get("#tabContainerStartAndEndOverflow").shadow().find(".ui5-tc__overflow--start").as("startOverflow");
+
+		cy.get("#btn1").realClick();
+
+		cy.realPress("Tab");
+
+		cy.realPress("ArrowLeft");
+
+		cy.get("@startOverflow")
+			.find("[ui5-button]")
+			.shadow()
+			.find(".ui5-button-root")
+			.should("be.focus");
+
+		cy.realPress("Tab");
+
+		cy.get("#btn2").should("be.focused");
+
+		cy.realPress(["Shift", "Tab"]);
+
+		cy.get("@startOverflow")
+			.find("[ui5-button]")
+			.shadow()
+			.find(".ui5-button-root")
+			.should("be.focus");
+
+		cy.realPress(["Shift", "Tab"]);
+
+		cy.get("#btn1").should("be.focused");
+	});
 });
 
 describe("TabContainer popover", () => {

packages/main/src/TabContainerTemplate.tsx

@@ -73,7 +73,6 @@ export default function TabContainerTemplate(this: TabContainer, injectedPartial
 						<Button
 							endIcon={this.overflowMenuIcon}
 							data-ui5-stable="overflow-start"
-							tabindex={ -1 }
 							tooltip={this.overflowMenuTitle}
 							accessibilityAttributes={this.overflowBtnAccessibilityAttributes}
 						>
@@ -108,7 +107,6 @@ export default function TabContainerTemplate(this: TabContainer, injectedPartial
 						<Button
 							endIcon={this.overflowMenuIcon}
 							data-ui5-stable="overflow-end"
-							tabindex={ -1 }
 							tooltip={this.overflowMenuTitle}
 							accessibilityAttributes={this.overflowBtnAccessibilityAttributes}
 						>