From d1378785a2a44f00e8a2d7c7ec85a922c58762bd Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Wed, 12 Aug 2026 15:16:56 +0300 Subject: [PATCH 1/4] fix(ui5-user-settings-dialog): import F6Navigation in website samples --- .../website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js | 1 + .../docs/_samples/fiori/UserSettingsDialog/SaveMode/main.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js index 309c4a26d2e76..62d115d180f3b 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js @@ -1,3 +1,4 @@ +import "@ui5/webcomponents-base/dist/features/F6Navigation.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js"; diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/SaveMode/main.js b/packages/website/docs/_samples/fiori/UserSettingsDialog/SaveMode/main.js index 0c8861036438e..e8b49fadff63e 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/SaveMode/main.js +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/SaveMode/main.js @@ -1,3 +1,4 @@ +import "@ui5/webcomponents-base/dist/features/F6Navigation.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js"; From a52e8564d4f3f5850ba332c4cc8e19f14cd95336 Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Wed, 12 Aug 2026 15:18:35 +0300 Subject: [PATCH 2/4] test(ui5-user-settings-dialog): add F6 navigation test for programmatic open --- .../cypress/specs/UserSettingsDialog.cy.tsx | 44 ++++++++----------- 1 file changed, 18 insertions(+), 26 deletions(-) diff --git a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx index 8e227ffe9a93a..bd2723cf1d9d3 100644 --- a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx +++ b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx @@ -1511,14 +1511,22 @@ describe("F6 Navigation", () => { .should("have.attr", "data-sap-ui-fastnavgroup", "true"); }); - it("F6 navigation", () => { - cy.mount( - - - - - - ); + it("F6 navigation when dialog opened programmatically", () => { + cy.mount(<> + + + + + + + + + ); + + cy.get("#open-btn").realClick(); + cy.get("[ui5-user-settings-dialog]").then($el => { + ($el[0] as any).open = true; + }); // Initial focus: side panel (first list item) cy.get("[ui5-user-settings-dialog]").shadow() @@ -1529,33 +1537,17 @@ describe("F6 Navigation", () => { cy.realPress("F6"); cy.get("#content-btn").should("be.focused"); - // F6: content → footer (Close button) + // F6: content → footer cy.realPress("F6"); cy.get("[ui5-user-settings-dialog]").shadow() .find("[ui5-toolbar-button]") .should("be.focused"); - // F6: footer → side (wraps, focus stays inside dialog) + // F6: footer → side (wraps) cy.realPress("F6"); cy.get("[ui5-user-settings-dialog]").shadow() .find("[ui5-li]").first() .should("be.focused"); - - // Shift+F6: side → footer (wraps backward) - cy.realPress(["Shift", "F6"]); - cy.get("[ui5-user-settings-dialog]").shadow() - .find("[ui5-toolbar-button]") - .should("be.focused"); - - // Shift+F6: footer → content - cy.realPress(["Shift", "F6"]); - cy.get("#content-btn").should("be.focused"); - - // Shift+F6: content → side (back to starting point) - cy.realPress(["Shift", "F6"]); - cy.get("[ui5-user-settings-dialog]").shadow() - .find("[ui5-li]").first() - .should("be.focused"); }); }); From 1c138f29ba3a17ecef75a0f6cc502cd83e7ebb8a Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Wed, 12 Aug 2026 15:20:51 +0300 Subject: [PATCH 3/4] revert: restore original F6 navigation test --- .../cypress/specs/UserSettingsDialog.cy.tsx | 44 +++++++++++-------- 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx index bd2723cf1d9d3..8e227ffe9a93a 100644 --- a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx +++ b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx @@ -1511,22 +1511,14 @@ describe("F6 Navigation", () => { .should("have.attr", "data-sap-ui-fastnavgroup", "true"); }); - it("F6 navigation when dialog opened programmatically", () => { - cy.mount(<> - - - - - - - - - ); - - cy.get("#open-btn").realClick(); - cy.get("[ui5-user-settings-dialog]").then($el => { - ($el[0] as any).open = true; - }); + it("F6 navigation", () => { + cy.mount( + + + + + + ); // Initial focus: side panel (first list item) cy.get("[ui5-user-settings-dialog]").shadow() @@ -1537,17 +1529,33 @@ describe("F6 Navigation", () => { cy.realPress("F6"); cy.get("#content-btn").should("be.focused"); - // F6: content → footer + // F6: content → footer (Close button) cy.realPress("F6"); cy.get("[ui5-user-settings-dialog]").shadow() .find("[ui5-toolbar-button]") .should("be.focused"); - // F6: footer → side (wraps) + // F6: footer → side (wraps, focus stays inside dialog) cy.realPress("F6"); cy.get("[ui5-user-settings-dialog]").shadow() .find("[ui5-li]").first() .should("be.focused"); + + // Shift+F6: side → footer (wraps backward) + cy.realPress(["Shift", "F6"]); + cy.get("[ui5-user-settings-dialog]").shadow() + .find("[ui5-toolbar-button]") + .should("be.focused"); + + // Shift+F6: footer → content + cy.realPress(["Shift", "F6"]); + cy.get("#content-btn").should("be.focused"); + + // Shift+F6: content → side (back to starting point) + cy.realPress(["Shift", "F6"]); + cy.get("[ui5-user-settings-dialog]").shadow() + .find("[ui5-li]").first() + .should("be.focused"); }); }); From b3fadf6d4e66d990862968fd01545ad067d9295b Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Wed, 12 Aug 2026 15:23:47 +0300 Subject: [PATCH 4/4] fix(ui5-user-settings-dialog): import F6Navigation in react samples --- .../docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx | 1 + .../docs/_samples/fiori/UserSettingsDialog/SaveMode/sample.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx index 3a7b6686ff041..6aa4908a07e84 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx @@ -1,3 +1,4 @@ +import "@ui5/webcomponents-base/dist/features/F6Navigation.js"; import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; import { type UI5CustomEvent } from "@ui5/webcomponents-base"; import { useRef, useCallback } from "react"; diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/SaveMode/sample.tsx b/packages/website/docs/_samples/fiori/UserSettingsDialog/SaveMode/sample.tsx index 5e3abb366410d..fafd25c97e7ca 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/SaveMode/sample.tsx +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/SaveMode/sample.tsx @@ -1,3 +1,4 @@ +import "@ui5/webcomponents-base/dist/features/F6Navigation.js"; import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; import { type UI5CustomEvent } from "@ui5/webcomponents-base"; import { useRef, useCallback } from "react";