fix(f6navigation): skip hidden elements (#10325)

F6 navigation was finding hidden elements, and this was stopping the navigation between groups. Fixes: #10236
SAP · Jan 6, 2025 · 374d4d8 · 374d4d8
1 parent a2b5f6f
commit 374d4d8
Show file tree

Hide file tree

Showing 2 changed files with 149 additions and 13 deletions.
diff --git a/packages/base/src/util/FocusableElements.ts b/packages/base/src/util/FocusableElements.ts
@@ -52,22 +52,24 @@ const findFocusableElement = async (container: HTMLElement, forward: boolean, st
 	while (child) {
 		const originalChild: HTMLElement | undefined = child;
 
-		if (instanceOfUI5Element(child)) {
-			child = await child.getFocusDomRefAsync();
-		}
-
-		if (!child) {
-			return null;
-		}
+		if (!isElementHidden(originalChild)) {
+			if (instanceOfUI5Element(child)) {
+				child = await child.getFocusDomRefAsync();
+			}
 
-		if (child.nodeType === 1 && isElemFocusable(child) && !isFocusTrap(child)) {
-			if (isElementClickable(child)) {
-				return (child && typeof child.focus === "function") ? child : null;
+			if (!child || isElementHidden(child)) {
+				return null;
 			}
 
-			focusableDescendant = await findFocusableElement(child, forward);
-			if (focusableDescendant) {
-				return (focusableDescendant && typeof focusableDescendant.focus === "function") ? focusableDescendant : null;
+			if (child.nodeType === 1 && isElemFocusable(child) && !isFocusTrap(child)) {
+				if (isElementClickable(child)) {
+					return (child && typeof child.focus === "function") ? child : null;
+				}
+
+				focusableDescendant = await findFocusableElement(child, forward);
+				if (focusableDescendant) {
+					return (focusableDescendant && typeof focusableDescendant.focus === "function") ? focusableDescendant : null;
+				}
 			}
 		}
 

diff --git a/packages/main/cypress/specs/F6.cy.ts b/packages/main/cypress/specs/F6.cy.ts
@@ -59,6 +59,73 @@ describe("F6 navigation", () => {
 				.should("be.focused");
 		});
 
+		it("tests navigation with hidden elements", () => {
+			cy.mount(html`<div>
+				<div class="section">
+					<button id="before">Before element</button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="first">First focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button style="visibility: hidden;">Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true"  style="visibility: hidden;">
+					<ui5-button>Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button style="display: none;">Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true"  style="display: none;">
+					<ui5-button>Hidden</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>Something focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="second">Second focusable</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>Something focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="third">Third focusable</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>After Element</ui5-button>
+				</div>
+			</div`);
+
+			// act
+			cy.get("#before").focus();
+			cy.realPress("F6");
+
+			// assert 1st group is focused
+			cy.get("#first")
+				.should("be.focused");
+
+			// act
+			cy.realPress("F6");
+
+			// assert 2nd group is focused
+			cy.get("#second")
+				.should("be.focused");
+
+			// act
+			cy.realPress("F6");
+
+			// assert 3rd group is focused
+			cy.get("#third")
+				.should("be.focused");
+
+			// act
+			cy.realPress("F6");
+
+			// assert 1st group is focused agian
+			cy.get("#first")
+				.should("be.focused");
+		});
+
 		it("tests navigation with empty group", () => {
 			cy.mount(html`<div>
 				<div class="section">
@@ -386,6 +453,73 @@ describe("F6 navigation", () => {
 				.should("be.focused");
 		});
 
+		it("tests navigation with hidden elements", () => {
+			cy.mount(html`<div>
+				<div class="section">
+					<button id="before">Before element</button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="first">First focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button style="visibility: hidden;">Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true"  style="visibility: hidden;">
+					<ui5-button>Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button style="display: none;">Hidden</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true"  style="display: none;">
+					<ui5-button>Hidden</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>Something focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="second">Second focusable</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>Something focusable</ui5-button>
+				</div>
+				<div class="section" data-sap-ui-fastnavgroup="true">
+					<ui5-button id="third">Third focusable</ui5-button>
+				</div>
+				<div class="section">
+					<ui5-button>After Element</ui5-button>
+				</div>
+			</div`);
+
+			// act
+			cy.get("#before").focus();
+			cy.realPress(["Shift", "F6"]);
+
+			// assert 3rd group is focused
+			cy.get("#third")
+				.should("be.focused");
+
+			// act
+			cy.realPress(["Shift", "F6"]);
+
+			// assert 2nd group is focused
+			cy.get("#second")
+				.should("be.focused");
+
+			// act
+			cy.realPress(["Shift", "F6"]);
+
+			// assert 1st group is focused
+			cy.get("#first")
+				.should("be.focused");
+
+			// act
+			cy.realPress(["Shift", "F6"]);
+
+			// assert 3rd group is focused agian
+			cy.get("#third")
+				.should("be.focused");
+		});
+
 		it("tests navigation with empty group", () => {
 			cy.mount(html`<div>
 				<div class="section">