fix(f6navigation): skip non-element nodes when resolving groups (#12174)

If a fast navigation group is defined on a custom element and the first node in its shadow root is a comment, an error is thrown when looking up a focusable element. Now, lookup runs only on element nodes, skipping comments.

Fixes: #12158

Author: nnaydenow

packages/base/src/util/FocusableElements.ts

@@ -53,7 +53,7 @@ const findFocusableElement = async (container: HTMLElement, forward: boolean, st
 	let currentIndex = -1;
 
 	if (container.shadowRoot) {
-		child = forward ? container.shadowRoot.firstChild as HTMLElement : container.shadowRoot.lastChild as HTMLElement;
+		child = forward ? container.shadowRoot.firstElementChild as HTMLElement : container.shadowRoot.lastElementChild as HTMLElement;
 	} else if (container instanceof HTMLSlotElement && container.assignedNodes()) {
 		assignedElements = container.assignedElements();
 		currentIndex = forward ? 0 : assignedElements.length - 1;

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

@@ -2,6 +2,24 @@ import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
 import Button from "../../src/Button.js";
 import Bar from "../../src/Bar.js";
 
+class MySimpleComponent extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open", delegatesFocus: true });
+
+		this.shadowRoot.innerHTML = `
+			<!-- HTML Comment -->
+			<button onclick="alert('Hello!')">Click Me</button>
+			<!-- HTML Comment -->
+		`;
+	}
+}
+
+customElements.define("my-simple-component", MySimpleComponent);
+
+// @ts-ignore
+const MySimpleComponentRenderer = () => <my-simple-component id="second" data-sap-ui-fastnavgroup="true">Second focusable</my-simple-component>
+
 describe("F6 navigation", () => {
 	describe("F6 Forward navigation", () => {
 		it("tests navigation", () => {
@@ -16,8 +34,8 @@ describe("F6 navigation", () => {
 					<div class="section">
 						<Button>Something focusable</Button>
 					</div>
-					<div class="section" data-sap-ui-fastnavgroup="true">
-						<Button id="second">Second focusable</Button>
+					<div class="section">
+						<MySimpleComponentRenderer />
 					</div>
 					<div class="section">
 						<Button>Something focusable</Button>
@@ -431,8 +449,8 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<Button>Something focusable</Button>
 				</div>
-				<div class="section" data-sap-ui-fastnavgroup="true">
-					<Button id="second">Second focusable</Button>
+				<div class="section">
+					<MySimpleComponentRenderer />
 				</div>
 				<div class="section">
 					<Button>Something focusable</Button>