diff --git a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx
index 957debd089d4..c87368277ae2 100644
--- a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx
+++ b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx
@@ -1,3 +1,4 @@
+import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
import UserSettingsItem from "../../src/UserSettingsItem.js";
import UserSettingsView from "../../src/UserSettingsView.js";
import UserSettingsAccountView from "../../src/UserSettingsAccountView.js";
@@ -1340,3 +1341,157 @@ describe("Appearance view", () => {
cy.get("@list").should("have.class", "user-settings-appearance-view-list");
});
});
+
+describe("F6 Navigation", () => {
+ it("tests host has fastnavgroup-container attribute", () => {
+ cy.mount(
+
+
+
+
+ );
+ cy.get("[ui5-user-settings-dialog]")
+ .should("have.attr", "data-sap-ui-fastnavgroup-container", "true");
+ });
+
+ it("tests side panel has fastnavgroup attribute", () => {
+ cy.mount(
+
+
+
+
+ );
+ cy.get("[ui5-user-settings-dialog]").shadow()
+ .find(".ui5-user-settings-side")
+ .should("have.attr", "data-sap-ui-fastnavgroup", "true");
+ });
+
+ it("tests footer toolbar has fastnavgroup attribute", () => {
+ cy.mount(
+
+
+
+
+ );
+ cy.get("[ui5-user-settings-dialog]").shadow()
+ .find("[ui5-toolbar]")
+ .should("have.attr", "data-sap-ui-fastnavgroup", "true");
+ });
+
+ it("tests lists have fastnavgroup false", () => {
+ cy.mount(
+
+
+
+
+ );
+ cy.get("[ui5-user-settings-dialog]").shadow()
+ .find("[ui5-list]")
+ .each($list => {
+ cy.wrap($list).should("have.attr", "data-sap-ui-fastnavgroup", "false");
+ });
+ });
+
+ it("tests selected item has fastnavgroup attribute", () => {
+ cy.mount(
+
+
+
+
+ );
+ cy.get("[ui5-user-settings-dialog]").find("[ui5-user-settings-item]")
+ .should("have.attr", "data-sap-ui-fastnavgroup", "true");
+ });
+
+ it("tests non-selected items do not have fastnavgroup attribute", () => {
+ cy.mount(
+
+
+
+
+
+
+
+
+ );
+ cy.get("[ui5-user-settings-dialog]").find("[ui5-user-settings-item]").first()
+ .should("have.attr", "data-sap-ui-fastnavgroup", "true");
+ cy.get("[ui5-user-settings-dialog]").find("[ui5-user-settings-item]").last()
+ .should("not.have.attr", "data-sap-ui-fastnavgroup");
+ });
+
+ it("tests fastnavgroup moves to newly selected item", () => {
+ cy.mount(
+
+
+
+
+
+
+
+
+ );
+ cy.get("[ui5-user-settings-dialog]").as("settings");
+ cy.get("@settings").find("[ui5-user-settings-item]").first()
+ .should("have.attr", "data-sap-ui-fastnavgroup", "true");
+ cy.get("@settings").find("[ui5-user-settings-item]").last()
+ .should("not.have.attr", "data-sap-ui-fastnavgroup");
+
+ cy.get("@settings").shadow()
+ .find("[ui5-list]")
+ .find("[ui5-li]").last()
+ .click();
+
+ cy.get("@settings").find("[ui5-user-settings-item]").first()
+ .should("not.have.attr", "data-sap-ui-fastnavgroup");
+ cy.get("@settings").find("[ui5-user-settings-item]").last()
+ .should("have.attr", "data-sap-ui-fastnavgroup", "true");
+ });
+
+ it("F6 navigation", () => {
+ cy.mount(
+
+
+
+
+
+ );
+
+ // Initial focus: side panel (first list item)
+ cy.get("[ui5-user-settings-dialog]").shadow()
+ .find("[ui5-li]").first()
+ .should("be.focused");
+
+ // F6: side → content
+ cy.realPress("F6");
+ cy.get("#content-btn").should("be.focused");
+
+ // 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, 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");
+ });
+});
diff --git a/packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx b/packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx
index e1e225304caa..74370164c8e0 100644
--- a/packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx
+++ b/packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx
@@ -7,7 +7,7 @@ export default function UserSettingsAppearanceViewTemplate(this: UserSettingsApp
-
+
{this.text && }
diff --git a/packages/fiori/src/UserSettingsDialog.ts b/packages/fiori/src/UserSettingsDialog.ts
index 6f8ee7ed6c7b..50833bb02c9f 100644
--- a/packages/fiori/src/UserSettingsDialog.ts
+++ b/packages/fiori/src/UserSettingsDialog.ts
@@ -193,6 +193,10 @@ class UserSettingsDialog extends UI5Element {
@property({ type: String })
_mediaRange?: any;
+ onEnterDOM() {
+ this.setAttribute("data-sap-ui-fastnavgroup-container", "true");
+ }
+
onBeforeRendering() {
this._mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS);
const searchValue = this._searchValue.toLowerCase();
@@ -229,6 +233,15 @@ class UserSettingsDialog extends UI5Element {
if (!this._selectedSetting) {
this._selectedSetting = this.items[0] || this.fixedItems[0];
}
+
+ const allItems = [...this.items, ...this.fixedItems];
+ allItems.forEach(item => {
+ if (item === this._selectedSetting) {
+ item.setAttribute("data-sap-ui-fastnavgroup", "true");
+ } else {
+ item.removeAttribute("data-sap-ui-fastnavgroup");
+ }
+ });
}
_handleItemClick(e: CustomEvent) {
diff --git a/packages/fiori/src/UserSettingsDialogTemplate.tsx b/packages/fiori/src/UserSettingsDialogTemplate.tsx
index 43d87df4ab8e..09a31411afda 100644
--- a/packages/fiori/src/UserSettingsDialogTemplate.tsx
+++ b/packages/fiori/src/UserSettingsDialogTemplate.tsx
@@ -25,7 +25,7 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
initialFocus={`setting-${this._selectedSetting?._id}`}
>
-
+
-
+
@@ -60,7 +60,7 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
}
function renderList(this: UserSettingsDialog, items: Array = [], classes: string) {
- return
+ return
{items.map(item => (