diff --git a/packages/fiori/src/Wizard.js b/packages/fiori/src/Wizard.js
index bd7f8a41ef9a..3477f3693dcc 100644
--- a/packages/fiori/src/Wizard.js
+++ b/packages/fiori/src/Wizard.js
@@ -8,6 +8,7 @@ import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
import Button from "@ui5/webcomponents/dist/Button.js";
import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
@@ -133,7 +134,7 @@ const metadata = {
* @event sap.ui.webcomponents.fiori.Wizard#step-change
* @param {HTMLElement} step the new step
* @param {HTMLElement} previousStep the previous step
- * @param {Boolean} changeWithClick the step change occurs due to user's click on step within the navigation
+ * @param {Boolean} changeWithClick the step change occurs due to user's click or 'Enter'/'Space' key press on step within the navigation
* @public
*/
"step-change": {
@@ -427,7 +428,7 @@ class Wizard extends UI5Element {
*/
onSelectionChangeRequested(event) {
this.selectionRequestedByClick = true;
- this.changeSelectionByStepClick(event.target);
+ this.changeSelectionByStepAction(event.target);
}
/**
@@ -649,16 +650,20 @@ class Wizard extends UI5Element {
/**
* Called upon onSelectionChangeRequested
.
* Selects the external step (ui5-wizard-step),
- * based on the clicked step in the header (ui5-wizard-tab).
+ * based on the clicked or activated via keyboard step in the header (ui5-wizard-tab).
* @param {HTMLElement} stepInHeader the step equivalent in the header
* @private
*/
- changeSelectionByStepClick(stepInHeader) {
+ async changeSelectionByStepAction(stepInHeader) {
const stepRefId = stepInHeader.getAttribute("data-ui5-content-ref-id");
const selectedStep = this.selectedStep;
const stepToSelect = this.getStepByRefId(stepRefId);
const bExpanded = stepInHeader.getAttribute(EXPANDED_STEP) === "true";
const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
+ const firstFocusableElement = await getFirstFocusableElement(stepToSelect.firstElementChild);
+
+ // Focus the first focusable element within the step content corresponding to the currently focused tab
+ firstFocusableElement.focus();
// If the currently selected (active) step is clicked,
// just scroll to its starting point and stop.
diff --git a/packages/fiori/src/WizardTab.js b/packages/fiori/src/WizardTab.js
index 87d72cf67164..bf3c86f96216 100644
--- a/packages/fiori/src/WizardTab.js
+++ b/packages/fiori/src/WizardTab.js
@@ -1,8 +1,8 @@
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 Icon from "@ui5/webcomponents/dist/Icon.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
import WizardTabTemplate from "./generated/templates/WizardTabTemplate.lit.js";
import WizardTabCss from "./generated/themes/WizardTab.css.js";
@@ -181,11 +181,8 @@ class WizardTab extends UI5Element {
return;
}
- if (isSpace(event)) {
+ if (isSpace(event) || isEnter(event)) {
event.preventDefault();
- }
-
- if (isEnter(event)) {
this.fireEvent("selection-change-requested");
}
}
diff --git a/packages/fiori/test/pages/Wizard.html b/packages/fiori/test/pages/Wizard.html
index 884bcb808600..c6f65319e2bc 100644
--- a/packages/fiori/test/pages/Wizard.html
+++ b/packages/fiori/test/pages/Wizard.html
@@ -372,9 +372,6 @@