diff --git a/packages/base/src/features/F6Navigation.ts b/packages/base/src/features/F6Navigation.ts index 0d9ccd1bf0aa..f5144b8a6385 100644 --- a/packages/base/src/features/F6Navigation.ts +++ b/packages/base/src/features/F6Navigation.ts @@ -172,8 +172,27 @@ class F6Navigation { } updateGroups() { + const container = this.findContainer(); + this.setSelectedGroup(); - this.groups = getFastNavigationGroups(document.body); + this.groups = getFastNavigationGroups(container); + } + + findContainer() { + const htmlElement = window.document.querySelector("html"); + let element = this.deepActive(window.document); + + while (element && element !== htmlElement) { + const closestScopeEl = element.closest("[data-sap-ui-fastnavgroup-container='true']"); + + if (closestScopeEl) { + return closestScopeEl; + } + + element = element.parentElement ? element.parentElement : (element.parentNode as ShadowRoot).host; + } + + return document.body; } setSelectedGroup(root: DocumentOrShadowRoot = window.document) { diff --git a/packages/base/src/util/getFastNavigationGroups.ts b/packages/base/src/util/getFastNavigationGroups.ts index 37467914b07b..be29bb8635aa 100644 --- a/packages/base/src/util/getFastNavigationGroups.ts +++ b/packages/base/src/util/getFastNavigationGroups.ts @@ -48,7 +48,11 @@ const findFastNavigationGroups = (container: HTMLElement, startFromContainer?: b findFastNavigationGroups(child as HTMLElement, false); } - child = assignedElements && assignedElements.length ? assignedElements[++index] : originalChild.nextElementSibling; + if (child === container) { + child = assignedElements && assignedElements.length ? assignedElements[++index] : null; + } else { + child = assignedElements && assignedElements.length ? assignedElements[++index] : originalChild.nextElementSibling; + } } }; diff --git a/packages/main/cypress/specs/Dialog.cy.ts b/packages/main/cypress/specs/Dialog.cy.ts new file mode 100644 index 000000000000..a9a1de072d16 --- /dev/null +++ b/packages/main/cypress/specs/Dialog.cy.ts @@ -0,0 +1,42 @@ +import { html } from "lit"; +import "@ui5/webcomponents-base/dist/features/F6Navigation.js"; +import "../../src/Dialog.js"; + +describe("Keyboard", () => { + it("F6 navigation", () => { + cy.mount(html` + + +
+ +
+
+ +
+
+ `); + + cy.get("#first") + .should("be.focused"); + + cy.realPress(["Shift", "F6"]); + + cy.get("#second") + .should("be.focused"); + + cy.realPress(["Shift", "F6"]); + + cy.get("#first") + .should("be.focused"); + + cy.realPress("F6"); + + cy.get("#second") + .should("be.focused"); + + cy.realPress("F6"); + + cy.get("#first") + .should("be.focused"); + }); +}); diff --git a/packages/main/cypress/specs/F6.cy.ts b/packages/main/cypress/specs/F6.cy.ts index b0e120caae00..adca8fcd2235 100644 --- a/packages/main/cypress/specs/F6.cy.ts +++ b/packages/main/cypress/specs/F6.cy.ts @@ -27,7 +27,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -94,7 +94,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -149,7 +149,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -421,7 +421,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -488,7 +488,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -543,7 +543,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -790,4 +790,72 @@ describe("F6 navigation", () => { .should("be.focused"); }); }); + + describe("Groups in container", () => { + it("tests forward navigation", () => { + cy.mount(html`
+
+ Non group focusable +
+
+
+ First group focusable +
+
+ Second group focusable +
+
+
+ Non group focusable +
+
`); + + // act + cy.get("#first") + .realClick(); + + cy.realPress("F6"); + + cy.get("#second") + .should("be.focused"); + + cy.realPress("F6"); + + cy.get("#first") + .should("be.focused"); + }); + + it("tests backward navigation", () => { + cy.mount(html`
+
+ Non group focusable +
+
+
+ First group focusable +
+
+ Second group focusable +
+
+
+ Non group focusable +
+
`); + + // act + cy.get("#first") + .realClick(); + + cy.realPress(["Shift", "F6"]); + + cy.get("#second") + .should("be.focused"); + + cy.realPress(["Shift", "F6"]); + + cy.get("#first") + .should("be.focused"); + }); + }); }); diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index 902ce8718ed5..8e65c2e5e4e5 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -345,6 +345,8 @@ class Dialog extends Popup { this._attachScreenResizeHandler(); this.addEventListener("dragstart", this._dragStartHandler); + + this.setAttribute("data-sap-ui-fastnavgroup-container", "true"); } onExitDOM() {