fix(ui5-popover): allow f6 navigation

Author: GerganaKremenska

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

@@ -6,6 +6,7 @@ import Label from "../../src/Label.js";
 import List from "../../src/List.js";
 import ListItem from "../../src/ListItemStandard.js";
 import Input from "../../src/Input.js";
+import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
 
 describe("Rendering", () => {
 	it("tests arrow positioning", () => {
@@ -332,6 +333,42 @@ describe("Accessibility", () => {
 			.find(".ui5-popup-root")
 			.should("not.have.attr", "aria-labelledby");
 	});
+
+	it("F6 navigation", () => {
+		cy.mount(
+			<>
+			<button data-sap-ui-fastnavgroup="true" id="test"> Test button</button>
+				<Popover opener="test">
+					<div data-sap-ui-fastnavgroup="true">
+						<Button id="first">First group focusable</Button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<Button id="second">Second group focusable</Button>
+					</div>
+				</Popover>
+				<button data-sap-ui-fastnavgroup="true">Test button 2</button>
+			</>
+		);
+
+		cy.get("[ui5-popover]")
+			.invoke("prop", "open", "true");
+
+		cy.get<Popover>("[ui5-popover]")
+			.ui5PopoverOpened();
+
+		cy.get("#first")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		cy.get("#second")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		cy.get("#first")
+			.should("be.focused");
+	});
 });
 
 describe("Popover opener", () => {

packages/main/src/Dialog.ts

@@ -345,8 +345,6 @@ class Dialog extends Popup {
 		this._attachScreenResizeHandler();
 
 		this.addEventListener("dragstart", this._dragStartHandler);
-
-		this.setAttribute("data-sap-ui-fastnavgroup-container", "true");
 	}
 
 	onExitDOM() {

packages/main/src/Popup.ts

@@ -288,6 +288,7 @@ abstract class Popup extends UI5Element {
 			this.openPopup();
 		}
 
+		this.setAttribute("data-sap-ui-fastnavgroup-container", "true");
 		registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
 	}
 

packages/main/test/pages/Popover.html

@@ -641,7 +641,23 @@ <h3>Popover in ShadowRoot, Opener set as ID in window.document</h3>
 
 	<div style="height: 100px;"></div>
 
+	<button data-sap-ui-fastnavgroup="true" id="test"> Test button</button>
+	<ui5-popover id="groupPop" opener="test">
+		<div data-sap-ui-fastnavgroup="true">
+			<Button id="first">First group focusable</Button>
+		</div>
+		<div data-sap-ui-fastnavgroup="true">
+			<Button id="second">Second group focusable</Button>
+		</div>
+	</ui5-popover>
+	<button data-sap-ui-fastnavgroup="true">Test button 2</button>
+
 	<script>
+
+		test.addEventListener("click", function (event) {
+			groupPop.open = true;
+		});
+
 		btn.addEventListener("click", function (event) {
 			pop.opener = btn;
 			pop.open = true;