Skip to content

Commit 32c6b8e

Browse files
SvilenDarvenyashkiSvilenDarvenyashki
authored
chore(ui5-user-settings-dialog): skipping groups with F6 is now correct (#13310)
* chore(ui5-user-settings-dialog): Group skipping is not correct * chore(ui5-user-settings-dialog): group skipping with F6 is now correct * chore(user-settings-dialog): tests issue fixed * chore(user-settings-dialog): adds tests for F6
1 parent c5ec5f3 commit 32c6b8e

4 files changed

Lines changed: 172 additions & 4 deletions

File tree

‎packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
12
import UserSettingsItem from "../../src/UserSettingsItem.js";
23
import UserSettingsView from "../../src/UserSettingsView.js";
34
import UserSettingsAccountView from "../../src/UserSettingsAccountView.js";
@@ -1340,3 +1341,157 @@ describe("Appearance view", () => {
13401341
cy.get("@list").should("have.class", "user-settings-appearance-view-list");
13411342
});
13421343
});
1344+
1345+
describe("F6 Navigation", () => {
1346+
it("tests host has fastnavgroup-container attribute", () => {
1347+
cy.mount(<UserSettingsDialog open>
1348+
<UserSettingsItem text="Setting">
1349+
<UserSettingsView>
1350+
</UserSettingsView>
1351+
</UserSettingsItem>
1352+
</UserSettingsDialog>);
1353+
cy.get("[ui5-user-settings-dialog]")
1354+
.should("have.attr", "data-sap-ui-fastnavgroup-container", "true");
1355+
});
1356+
1357+
it("tests side panel has fastnavgroup attribute", () => {
1358+
cy.mount(<UserSettingsDialog open>
1359+
<UserSettingsItem text="Setting">
1360+
<UserSettingsView>
1361+
</UserSettingsView>
1362+
</UserSettingsItem>
1363+
</UserSettingsDialog>);
1364+
cy.get("[ui5-user-settings-dialog]").shadow()
1365+
.find(".ui5-user-settings-side")
1366+
.should("have.attr", "data-sap-ui-fastnavgroup", "true");
1367+
});
1368+
1369+
it("tests footer toolbar has fastnavgroup attribute", () => {
1370+
cy.mount(<UserSettingsDialog open>
1371+
<UserSettingsItem text="Setting">
1372+
<UserSettingsView>
1373+
</UserSettingsView>
1374+
</UserSettingsItem>
1375+
</UserSettingsDialog>);
1376+
cy.get("[ui5-user-settings-dialog]").shadow()
1377+
.find("[ui5-toolbar]")
1378+
.should("have.attr", "data-sap-ui-fastnavgroup", "true");
1379+
});
1380+
1381+
it("tests lists have fastnavgroup false", () => {
1382+
cy.mount(<UserSettingsDialog open>
1383+
<UserSettingsItem text="Setting">
1384+
<UserSettingsView>
1385+
</UserSettingsView>
1386+
</UserSettingsItem>
1387+
</UserSettingsDialog>);
1388+
cy.get("[ui5-user-settings-dialog]").shadow()
1389+
.find("[ui5-list]")
1390+
.each($list => {
1391+
cy.wrap($list).should("have.attr", "data-sap-ui-fastnavgroup", "false");
1392+
});
1393+
});
1394+
1395+
it("tests selected item has fastnavgroup attribute", () => {
1396+
cy.mount(<UserSettingsDialog open>
1397+
<UserSettingsItem text="Setting">
1398+
<UserSettingsView>
1399+
</UserSettingsView>
1400+
</UserSettingsItem>
1401+
</UserSettingsDialog>);
1402+
cy.get("[ui5-user-settings-dialog]").find("[ui5-user-settings-item]")
1403+
.should("have.attr", "data-sap-ui-fastnavgroup", "true");
1404+
});
1405+
1406+
it("tests non-selected items do not have fastnavgroup attribute", () => {
1407+
cy.mount(<UserSettingsDialog open>
1408+
<UserSettingsItem text="Setting 1" selected>
1409+
<UserSettingsView>
1410+
</UserSettingsView>
1411+
</UserSettingsItem>
1412+
<UserSettingsItem text="Setting 2">
1413+
<UserSettingsView>
1414+
</UserSettingsView>
1415+
</UserSettingsItem>
1416+
</UserSettingsDialog>);
1417+
cy.get("[ui5-user-settings-dialog]").find("[ui5-user-settings-item]").first()
1418+
.should("have.attr", "data-sap-ui-fastnavgroup", "true");
1419+
cy.get("[ui5-user-settings-dialog]").find("[ui5-user-settings-item]").last()
1420+
.should("not.have.attr", "data-sap-ui-fastnavgroup");
1421+
});
1422+
1423+
it("tests fastnavgroup moves to newly selected item", () => {
1424+
cy.mount(<UserSettingsDialog open>
1425+
<UserSettingsItem text="Setting 1" selected>
1426+
<UserSettingsView>
1427+
</UserSettingsView>
1428+
</UserSettingsItem>
1429+
<UserSettingsItem text="Setting 2">
1430+
<UserSettingsView>
1431+
</UserSettingsView>
1432+
</UserSettingsItem>
1433+
</UserSettingsDialog>);
1434+
cy.get("[ui5-user-settings-dialog]").as("settings");
1435+
cy.get("@settings").find("[ui5-user-settings-item]").first()
1436+
.should("have.attr", "data-sap-ui-fastnavgroup", "true");
1437+
cy.get("@settings").find("[ui5-user-settings-item]").last()
1438+
.should("not.have.attr", "data-sap-ui-fastnavgroup");
1439+
1440+
cy.get("@settings").shadow()
1441+
.find("[ui5-list]")
1442+
.find("[ui5-li]").last()
1443+
.click();
1444+
1445+
cy.get("@settings").find("[ui5-user-settings-item]").first()
1446+
.should("not.have.attr", "data-sap-ui-fastnavgroup");
1447+
cy.get("@settings").find("[ui5-user-settings-item]").last()
1448+
.should("have.attr", "data-sap-ui-fastnavgroup", "true");
1449+
});
1450+
1451+
it("F6 navigation", () => {
1452+
cy.mount(<UserSettingsDialog open>
1453+
<UserSettingsItem text="Setting" selected>
1454+
<UserSettingsView>
1455+
<Button id="content-btn">Content</Button>
1456+
</UserSettingsView>
1457+
</UserSettingsItem>
1458+
</UserSettingsDialog>);
1459+
1460+
// Initial focus: side panel (first list item)
1461+
cy.get("[ui5-user-settings-dialog]").shadow()
1462+
.find("[ui5-li]").first()
1463+
.should("be.focused");
1464+
1465+
// F6: side → content
1466+
cy.realPress("F6");
1467+
cy.get("#content-btn").should("be.focused");
1468+
1469+
// F6: content → footer (Close button)
1470+
cy.realPress("F6");
1471+
cy.get("[ui5-user-settings-dialog]").shadow()
1472+
.find("[ui5-toolbar-button]")
1473+
.should("be.focused");
1474+
1475+
// F6: footer → side (wraps, focus stays inside dialog)
1476+
cy.realPress("F6");
1477+
cy.get("[ui5-user-settings-dialog]").shadow()
1478+
.find("[ui5-li]").first()
1479+
.should("be.focused");
1480+
1481+
// Shift+F6: side → footer (wraps backward)
1482+
cy.realPress(["Shift", "F6"]);
1483+
cy.get("[ui5-user-settings-dialog]").shadow()
1484+
.find("[ui5-toolbar-button]")
1485+
.should("be.focused");
1486+
1487+
// Shift+F6: footer → content
1488+
cy.realPress(["Shift", "F6"]);
1489+
cy.get("#content-btn").should("be.focused");
1490+
1491+
// Shift+F6: content → side (back to starting point)
1492+
cy.realPress(["Shift", "F6"]);
1493+
cy.get("[ui5-user-settings-dialog]").shadow()
1494+
.find("[ui5-li]").first()
1495+
.should("be.focused");
1496+
});
1497+
});

‎packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function UserSettingsAppearanceViewTemplate(this: UserSettingsApp
77
<div class="ui5-user-settings-view-container">
88
<div class="ui5-user-settings-view">
99
<slot name="additionalContent"></slot>
10-
<List class="user-settings-appearance-view-list" onItemClick={this._handleItemClick} >
10+
<List class="user-settings-appearance-view-list" onItemClick={this._handleItemClick} data-sap-ui-fastnavgroup="false">
1111
{this.text && <Title slot="header" level="H3" class="user-settings-appearance-view-list-header">{this.text}</Title>}
1212
<slot></slot>
1313
</List>

‎packages/fiori/src/UserSettingsDialog.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,10 @@ class UserSettingsDialog extends UI5Element {
193193
@property({ type: String })
194194
_mediaRange?: any;
195195

196+
onEnterDOM() {
197+
this.setAttribute("data-sap-ui-fastnavgroup-container", "true");
198+
}
199+
196200
onBeforeRendering() {
197201
this._mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS);
198202
const searchValue = this._searchValue.toLowerCase();
@@ -229,6 +233,15 @@ class UserSettingsDialog extends UI5Element {
229233
if (!this._selectedSetting) {
230234
this._selectedSetting = this.items[0] || this.fixedItems[0];
231235
}
236+
237+
const allItems = [...this.items, ...this.fixedItems];
238+
allItems.forEach(item => {
239+
if (item === this._selectedSetting) {
240+
item.setAttribute("data-sap-ui-fastnavgroup", "true");
241+
} else {
242+
item.removeAttribute("data-sap-ui-fastnavgroup");
243+
}
244+
});
232245
}
233246

234247
_handleItemClick(e: CustomEvent<ListItemClickEventDetail>) {

‎packages/fiori/src/UserSettingsDialogTemplate.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
2525
initialFocus={`setting-${this._selectedSetting?._id}`}
2626
>
2727
<div class="ui5-user-settings-root">
28-
<div class="ui5-user-settings-side" aria-orientation="vertical" aria-roledescription={this.ariaRoleDescList}>
28+
<div class="ui5-user-settings-side" data-sap-ui-fastnavgroup="true" aria-orientation="vertical" aria-roledescription={this.ariaRoleDescList}>
2929
<div class="ui5-user-settings-side-header">
3030
{this.headerText &&
3131
<Title level="H1" size="H4">{this.headerText}</Title>
@@ -52,15 +52,15 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
5252
</div>
5353
</div>
5454

55-
<Toolbar slot="footer" design="Transparent">
55+
<Toolbar slot="footer" design="Transparent" data-sap-ui-fastnavgroup="true">
5656
<ToolbarButton design="Transparent" text={this.closeButtonText} tooltip={this.closeButtonText} onClick={this._handleCloseButtonClick} />
5757
</Toolbar>
5858
</Dialog>
5959
);
6060
}
6161

6262
function renderList(this: UserSettingsDialog, items: Array<UserSettingsItem> = [], classes: string) {
63-
return <List accessibleRole="Menu" onItemClick={this._handleItemClick} class={classes} separators="None">
63+
return <List accessibleRole="Menu" onItemClick={this._handleItemClick} class={classes} separators="None" data-sap-ui-fastnavgroup="false">
6464
{items.map(item => (
6565
<ListItemStandard
6666
class={!item._icon && item._siblingsWithIcon ? "ui5-user-settings-item-no-icon" : ""}

0 commit comments

Comments
 (0)