feat(ui5-li): add support for F2 key (#8619)

* feat(ui5-li): add support for F2 key Related to: #7736 * feat(ui5-li): resolve post-merge issue
SAP · Apr 16, 2024 · 24c3807 · 24c3807
1 parent ce55755
commit 24c3807
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 14 deletions.
diff --git a/packages/base/src/Keys.ts b/packages/base/src/Keys.ts
@@ -206,6 +206,10 @@ const isShow = (event: KeyboardEvent): boolean => {
 	return (event.keyCode === KeyCodes.F4 && !hasModifierKeys(event)) || (event.keyCode === KeyCodes.ARROW_DOWN && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false));
 };
 
+const isF2 = (event: KeyboardEvent): boolean => {
+	return event.key === "F2" && !hasModifierKeys(event);
+};
+
 const isF4 = (event: KeyboardEvent): boolean => {
 	return event.key === "F4" && !hasModifierKeys(event);
 };
@@ -282,6 +286,7 @@ export {
 	isBackSpace,
 	isDelete,
 	isShow,
+	isF2,
 	isF4,
 	isF4Shift,
 	isF6Previous,

diff --git a/packages/main/src/CustomListItem.ts b/packages/main/src/CustomListItem.ts
@@ -1,4 +1,4 @@
-import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isTabNext, isTabPrevious, isF2 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
@@ -43,14 +43,14 @@ class CustomListItem extends ListItem {
 	@property()
 	declare accessibleName: string;
 
-	_onkeydown(e: KeyboardEvent) {
+	async _onkeydown(e: KeyboardEvent) {
 		const isTab = isTabNext(e) || isTabPrevious(e);
 
-		if (!isTab && !this.focused) {
+		if (!isTab && !this.focused && !isF2(e)) {
 			return;
 		}
 
-		super._onkeydown(e);
+		await super._onkeydown(e);
 	}
 
 	_onkeyup(e: KeyboardEvent) {

diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts
@@ -1,6 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
-import { isSpace, isEnter, isDelete } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	isSpace, isEnter, isDelete, isF2,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { PassiveEventListenerObject } from "@ui5/webcomponents-base/dist/types.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -287,7 +290,7 @@ abstract class ListItem extends ListItemBase {
 		document.removeEventListener("touchend", this.deactivate);
 	}
 
-	_onkeydown(e: KeyboardEvent) {
+	async _onkeydown(e: KeyboardEvent) {
 		super._onkeydown(e);
 
 		const itemActive = this.type === ListItemType.Active,
@@ -304,6 +307,15 @@ abstract class ListItem extends ListItemBase {
 		if (isEnter(e)) {
 			this.fireItemPress(e);
 		}
+
+		if (isF2(e)) {
+			const focusDomRef = this.getFocusDomRef()!;
+			if (this.focused) {
+				(await getFirstFocusableElement(focusDomRef))?.focus(); // start content editing
+			} else {
+				focusDomRef.focus(); // stop content editing
+			}
+		}
 	}
 
 	_onkeyup(e: KeyboardEvent) {

diff --git a/packages/main/src/TreeItemBase.ts b/packages/main/src/TreeItemBase.ts
@@ -284,8 +284,8 @@ class TreeItemBase extends ListItem {
 		this.fireEvent<TreeItemBaseToggleEventDetail>("toggle", { item: this });
 	}
 
-	_onkeydown(e: KeyboardEvent) {
-		super._onkeydown(e);
+	async _onkeydown(e: KeyboardEvent) {
+		await super._onkeydown(e);
 
 		if (!this._fixed && this.showToggleButton && isRight(e)) {
 			if (!this.expanded) {

diff --git a/packages/main/src/TreeItemCustom.ts b/packages/main/src/TreeItemCustom.ts
@@ -1,7 +1,7 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isTabNext, isTabPrevious, isF2 } from "@ui5/webcomponents-base/dist/Keys.js";
 import TreeItemBase from "./TreeItemBase.js";
 
 // Template
@@ -50,14 +50,14 @@ class TreeItemCustom extends TreeItemBase {
 	@slot()
 	content!: Array<HTMLElement>;
 
-	_onkeydown(e: KeyboardEvent) {
+	async _onkeydown(e: KeyboardEvent) {
 		const isTab = isTabNext(e) || isTabPrevious(e);
 
-		if (!isTab && !this.focused) {
+		if (!isTab && !this.focused && !isF2(e)) {
 			return;
 		}
 
-		super._onkeydown(e);
+		await super._onkeydown(e);
 	}
 
 	_onkeyup(e: KeyboardEvent) {

diff --git a/packages/main/test/pages/Tree.html b/packages/main/test/pages/Tree.html
@@ -186,8 +186,9 @@
 					hide-selection-element
 					type="Active"
 					level="3"
+					class="item"
 				>
-					<ui5-button slot="content">Level 3</ui5-button>
+					<ui5-button slot="content" class="itemBtn">Level 3</ui5-button>
 				</ui5-tree-item-custom>
 			</ui5-tree-item-custom>
 		</ui5-tree-item-custom>

diff --git a/packages/main/test/specs/List.spec.js b/packages/main/test/specs/List.spec.js
@@ -335,6 +335,22 @@ describe("List Tests", () => {
 		assert.ok(await afterBtn.isFocused(), "element outside of the list is focused");
 	});
 
+	it("keyboard handling on F2", async () => {
+		const item = await browser.$("ui5-li-custom.item");
+		const itemBtn = await browser.$("ui5-button.itemBtn");
+
+		await item.click();
+		assert.ok(await item.isFocused(), "item is focused");
+
+		// act: F2 from item -> the focus should go to "Click me" button
+		await item.keys("F2");
+		assert.ok(await itemBtn.isFocused(), "the 1st tabbable element (button) is focused");
+
+		// act: f2 from the "Click me" button - the focus should go back to the parent item
+		await itemBtn.keys("F2");
+		assert.ok(await item.isFocused(), "the parent item is focused");
+	});
+
 	it("keyboard handling on TAB when 2 level nested UI5Element is focused", async () => {
 		const list = await browser.$("#focusAfterList");
 		const breadcrumbsItem = await list.$(".breadcrumbsItem");

diff --git a/packages/main/test/specs/Tree.spec.js b/packages/main/test/specs/Tree.spec.js
@@ -44,7 +44,23 @@ describe("Tree general interaction", () => {
 		await toggleButton.click();
 		const listItemsAfter = await getItemsCount("#tree");
 		assert.isAbove(listItemsAfter, listItemsBefore, "After expanding a node, there are more items in the list");
-	})
+	});
+
+	it("keyboard handling on F2", async () => {
+		const item = await browser.$("ui5-tree-item-custom.item");
+		const itemBtn = await browser.$("ui5-button.itemBtn");
+
+		await item.click();
+		assert.ok(await item.isFocused(), "item is focused");
+
+		// act: F2 from item -> the focus should go to "Click me" button
+		await item.keys("F2");
+		assert.ok(await itemBtn.isFocused(), "the 1st tabbable element (button) is focused");
+
+		// act: f2 from the "Click me" button - the focus should go back to the parent item
+		await itemBtn.keys("F2");
+		assert.ok(await item.isFocused(), "the parent item is focused");
+	});
 
 });