feat(ui5-wizard): Extend keyboard handling (#4444)

* feat(ui5-wizard): Extend keyboard handling This change aims to cover the missing keyboard handling functionality. * Add KH documentation * Update packages/fiori/src/Wizard.js Co-authored-by: Simona Rangelova <[email protected]> * Update packages/fiori/src/Wizard.js Co-authored-by: Simona Rangelova <[email protected]> * Update packages/fiori/src/Wizard.js Co-authored-by: Simona Rangelova <[email protected]> * Update packages/fiori/src/Wizard.js Co-authored-by: Simona Rangelova <[email protected]> * Update packages/fiori/src/Wizard.js Co-authored-by: Simona Rangelova <[email protected]> * Update packages/fiori/src/Wizard.js Co-authored-by: Simona Rangelova <[email protected]> * Update packages/fiori/src/Wizard.js Co-authored-by: Simona Rangelova <[email protected]> * Update packages/fiori/src/Wizard.js Co-authored-by: Simona Rangelova <[email protected]> * Update packages/fiori/src/Wizard.js Co-authored-by: Simona Rangelova <[email protected]> * Simplify KH documentation * Enable focus on disabled items * Cancle Space action on Shift hold * Fix ESLint errors Co-authored-by: Simona Rangelova <[email protected]>
SAP · Dec 13, 2021 · 57151a3 · 57151a3
1 parent 133e45d
commit 57151a3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 21 deletions.
diff --git a/packages/fiori/src/Wizard.js b/packages/fiori/src/Wizard.js
@@ -160,6 +160,19 @@ const metadata = {
  * <br>
  * <b>Note:</b> If multiple selected steps are defined, the last step will be selected.
  *
+ * <h3>Keyboard Handling</h3>
+ * The user can navigate using the following keyboard shortcuts:
+ * <br>
+ *
+ * <h4>Wizard Progress Navigation</h4>
+ * <ul>
+ * 	<li>[LEFT], [DOWN] - Focus moves backward to the WizardProgressNavAnchors.</li>
+ * 	<li>[UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor.</li>
+ * 	<li>[SPACE] or [ENTER], [RETURN] - Selects an active step</li>
+ * 	<li>[HOME] or [PAGE UP] - Focus goes to the first step</li>
+ * 	<li>[END] or [PAGE DOWN] - Focus goes to the last step</li>
+ * </ul>
+ *
  * <h4>Content</h4>
  * The content occupies the main part of the page. It can hold any type of HTML elements.
  * It's defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.
@@ -243,7 +256,7 @@ class Wizard extends UI5Element {
 		this.selectionRequestedByScroll = false;
 
 		this._itemNavigation = new ItemNavigation(this, {
-			navigationMode: NavigationMode.Horizontal,
+			navigationMode: NavigationMode.Auto,
 			getItemsCallback: () => this.enabledStepsInHeaderDOM,
 		});
 
@@ -747,7 +760,7 @@ class Wizard extends UI5Element {
 	}
 
 	get enabledStepsInHeaderDOM() {
-		return this.stepsInHeaderDOM.filter(step => !step.disabled);
+		return this.stepsInHeaderDOM;
 	}
 
 	get phoneMode() {

diff --git a/packages/fiori/src/WizardTab.js b/packages/fiori/src/WizardTab.js
@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
 
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import WizardTabTemplate from "./generated/templates/WizardTabTemplate.lit.js";
@@ -178,37 +178,23 @@ class WizardTab extends UI5Element {
 		}
 	}
 
-	_onkeydown(event) {
-		if (this.disabled) {
-			return;
-		}
-
-		if (isSpace(event) || isEnter(event)) {
-			event.preventDefault();
-			this.fireEvent("selection-change-requested");
-		}
-	}
-
 	_onkeyup(event) {
 		if (this.disabled) {
 			return;
 		}
 
-		if (isSpace(event)) {
+		if ((isSpace(event) || isEnter(event)) && !isSpaceShift(event)) {
+			event.preventDefault();
 			this.fireEvent("selection-change-requested");
 		}
 	}
 
 	_onfocusin() {
-		if (this.disabled) {
-			return;
-		}
-
 		this.fireEvent("focused");
 	}
 
 	get tabIndex() {
-		return this.disabled ? undefined : this._tabIndex;
+		return this._tabIndex;
 	}
 
 	get hasTexts() {

diff --git a/packages/theming/hash.txt b/packages/theming/hash.txt
@@ -1 +1 @@
-CQhk8M6oN0XzkZBkgImthR2kdTs=
+rZnyMTmoc2CFM82C+7zGHcw3GGY=
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		CQhk8M6oN0XzkZBkgImthR2kdTs=
		rZnyMTmoc2CFM82C+7zGHcw3GGY=