@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/src/Wizard.js

@@ -1,17 +1,29 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
+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";
 
 // Texts
 import {
 	WIZARD_NAV_STEP_DEFAULT_HEADING,
 	WIZARD_NAV_ARIA_ROLE_DESCRIPTION,
+	WIZARD_NAV_ARIA_LABEL,
+	WIZARD_LIST_ARIA_LABEL,
+	WIZARD_LIST_ARIA_DESCRIBEDBY,
+	WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL,
+	WIZARD_OPTIONAL_STEP_ARIA_LABEL,
+	WIZARD_STEP_ARIA_LABEL,
+	WIZARD_STEP_ACTIVE,
+	WIZARD_STEP_INACTIVE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Step in header and content
@@ -20,7 +32,23 @@ import WizardStep from "./WizardStep.js";
 
 // Template and Styles
 import WizardTemplate from "./generated/templates/WizardTemplate.lit.js";
+import WizardPopoverTemplate from "./generated/templates/WizardPopoverTemplate.lit.js";
 import WizardCss from "./generated/themes/Wizard.css.js";
+import WizardPopoverCss from "./generated/themes/WizardPopover.css.js";
+
+const MIN_STEP_WIDTH_NO_TITLE = 64;
+const MIN_STEP_WIDTH_WITH_TITLE = 200;
+
+const EXPANDED_STEP = "data-ui5-wizard-expanded-tab";
+const AFTER_EXPANDED_STEP = "data-ui5-wizard-expanded-tab-next";
+const AFTER_CURRENT_STEP = "data-ui5-wizard-after-current-tab";
+const BEFORE_EXPANDED_STEP = "data-ui5-wizard-expanded-tab-prev";
+
+const STEP_SWITCH_THRESHOLDS = {
+	MIN: 0.5,
+	DEFAULT: 0.7,
+	MAX: 1,
+};
 
 /**
  * @public
@@ -28,26 +56,50 @@ import WizardCss from "./generated/themes/Wizard.css.js";
 const metadata = {
 	tag: "ui5-wizard",
 	managedSlots: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
 		/**
-		 * Defines the aria-label text of the <code>ui5-wizard</code>.
+		 * Defines the width of the <code>ui5-wizard</code>.
+		 * @private
+		 */
+		width: {
+			type: Float,
+		},
+
+		/**
+		 * Defines the threshold to switch between steps upon user scrolling.
+		 * <br><br>
 		 *
-		 * @type {String}
-		 * @defaultvalue undefined
+		 * <b>For Example:</b>
+		 * <br>
+		 * (1) To switch to the next step, when half of the step is scrolled out - set <code>step-switch-threshold="0.5"</code>.
+		 * (2) To switch to the next step, when the entire current step is scrolled out - set <code>step-switch-threshold="1"</code>.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> Supported values are between 0.5 and 1
+		 * and values out of the range will be normalized to 0.5 and 1 respectively.
 		 * @private
+		 * @type {Float}
+		 * @defaultvalue 0.7
+		 * @since 1.0.0-rc.13
 		 */
-		ariaLabel: {
-			type: String,
-			defaultValue: undefined,
+		stepSwitchThreshold: {
+			type: Float,
+			defaultValue: STEP_SWITCH_THRESHOLDS.DEFAULT,
 		},
 
 		/**
-		 * Defines the width of the <code>ui5-wizard</code>.
+		 * Defines the height of the <code>ui5-wizard</code> content.
 		 * @private
 		 */
-		width: {
+		contentHeight: {
 			type: Float,
 		},
+
+		_groupedTabs: {
+			type: String,
+			multiple: true,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
 		/**
@@ -55,31 +107,33 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Use the available <code>ui5-wizard-step</code> component.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.fiori.IWizardStep[]}
 		 * @public
-		 * @slot
+		 * @slot steps
 		 */
 		"default": {
 			propertyName: "steps",
 			type: HTMLElement,
 			"individualSlots": true,
-			listenFor: { include: ["*"] },
+			invalidateOnChildChange: true,
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
 		/**
-		 * Fired when the step selection is changed by user interaction - either with scrolling,
+		 * Fired when the step is changed by user interaction - either with scrolling,
 		 * or by clicking on the steps within the component header.
 		 *
-		 * @event sap.ui.webcomponents.fiori.Wizard#selection-change
-		 * @param {HTMLElement} selectedStep the newly selected step
-		 * @param {HTMLElement} previouslySelectedStep the previously selected step
+		 * @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 or 'Enter'/'Space' key press on step within the navigation.
 		 * @public
 		 */
-		"selection-change": {
+		"step-change": {
 			detail: {
-				selectedStep: { type: HTMLElement },
-				previouslySelectedStep: { type: HTMLElement },
+				step: { type: HTMLElement },
+				previousStep: { type: HTMLElement },
+				changeWithClick: { Boolean },
 			},
 		},
 	},
@@ -90,7 +144,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-wizard</code> helps users complete a complex task by dividing it into sections and guiding the user through it.
+ * The <code>ui5-wizard</code> helps users to complete a complex task by dividing it into sections and guiding them through it.
  * It has two main areas - a navigation area at the top showing the step sequence and a content area below it.
  *
  * <h3>Structure</h3>
@@ -99,14 +153,32 @@ const metadata = {
  * It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.
  * <ul>
  * <li> Steps can have different visual representations - numbers or icons.
- * <li> Steps might have labels for better readability - heading and subheding.</li>
- * <li> Steps are defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code></li>
+ * <li> Steps might have labels for better readability - titleText and subTitleText.</li>
+ * <li> Steps are defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.</li>
  * </ul>
  *
  * <b>Note:</b> If no selected step is defined, the first step will be auto selected.
  * <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>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ *
  * <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>.
@@ -128,7 +200,7 @@ const metadata = {
  * <h4>Moving to next step</h4>
  * The <code>ui5-wizard-step</code> provides the necessary API and it's up to the user of the component to use it to move to the next step.
  * You have to set its <code>selected</code> property (and remove the <code>disabled</code> one if set) to <code>true</code>.
- * And, the <code>ui5-wizard</code> will automatically scroll to the content of the newly selected step.
+ * The <code>ui5-wizard</code> will automatically scroll to the content of the newly selected step.
  * <br><br>
  *
  * The Fiori 3 guidelines recommends having a "nextStep" button in the content area.
@@ -137,16 +209,17 @@ const metadata = {
  *
  * <h3>Usage</h3>
  * <h4>When to use:</h4>
- * When the user has to accomplish a long set of tasks.
+ * When the user has to accomplish a long or unfamiliar task.
+ *
  * <h4>When not to use:</h4>
  * When the task has less than 3 steps.
  *
  * <h3>Responsive Behavior</h3>
- * On small widths the step's heading, subheading and separators in the navigation area
- * will start truncate and shrink and from particular point they will hide to free as much space as possible.
+ * On small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.
+ * Tapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.
  *
  * <h3>ES6 Module Import</h3>
- * <code>import @ui5/webcomponents-fiori/dist/Wizard.js";</code> (includes <ui5-wizard-step>)
+ * <code>import "@ui5/webcomponents-fiori/dist/Wizard.js";</code> (includes <ui5-wizard-step>)
  *
  * @constructor
  * @author SAP SE
@@ -165,22 +238,35 @@ class Wizard extends UI5Element {
 		// e.g. the steps' starting point.
 		this.stepScrollOffsets = [];
 
-		// Keeps track of the selected step index.
+		// Stores references to the grouped steps.
+		this._groupedTabs = [];
+
+		// Keeps track of the currently selected step index.
 		this.selectedStepIndex = 0;
 
+		// Keeps track of the previously selected step index.
+		this.previouslySelectedStepIndex = 0;
+
 		// Indicates that selection will be changed
 		// due to user click.
 		this.selectionRequestedByClick = false;
 
+		// Stores the previous width
+		this._prevWidth = 0;
+
+		// Stores the previous height
+		this._prevContentHeight = 0;
+
 		// Indicates that selection will be changed
 		// due to user scroll.
 		this.selectionRequestedByScroll = false;
 
-		this.initItemNavigation();
-
-		this._onResize = this.onResize.bind(this);
+		this._itemNavigation = new ItemNavigation(this, {
+			navigationMode: NavigationMode.Auto,
+			getItemsCallback: () => this.enabledStepsInHeaderDOM,
+		});
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._onStepResize = this.onStepResize.bind(this);
 	}
 
 	static get metadata() {
@@ -191,40 +277,55 @@ class Wizard extends UI5Element {
 		return litRender;
 	}
 
+	get classes() {
+		return {
+			popover: {
+				"ui5-wizard-responsive-popover": true,
+				"ui5-wizard-popover": !isPhone(),
+				"ui5-wizard-dialog": isPhone(),
+			},
+		};
+	}
+
 	static get styles() {
 		return WizardCss;
 	}
 
+	static get staticAreaStyles() {
+		return WizardPopoverCss;
+	}
+
 	static get template() {
 		return WizardTemplate;
 	}
 
 	static get dependencies() {
-		return [WizardTab, WizardStep];
+		return [
+			WizardTab,
+			WizardStep,
+			ResponsivePopover,
+			Button,
+		];
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		Wizard.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
 	static get PHONE_BREAKPOINT() {
-		return 559;
+		return 599;
 	}
 
 	static get SCROLL_DEBOUNCE_RATE() {
 		return 25;
 	}
 
-	static get CONTENT_TOP_OFFSET() {
-		return 80;
-	}
-
-	onEnterDOM() {
-		ResizeHandler.register(this, this._onResize);
+	static get staticAreaTemplate() {
+		return WizardPopoverTemplate;
 	}
 
 	onExitDOM() {
-		ResizeHandler.deregister(this, this._onResize);
+		this.detachStepsResizeObserver();
 	}
 
 	onBeforeRendering() {
@@ -233,7 +334,13 @@ class Wizard extends UI5Element {
 
 	onAfterRendering() {
 		this.storeStepScrollOffsets();
-		this.scrollToSelectedStep();
+
+		if (this.previouslySelectedStepIndex !== this.selectedStepIndex) {
+			this.scrollToSelectedStep();
+		}
+
+		this.attachStepsResizeObserver();
+		this.previouslySelectedStepIndex = this.selectedStepIndex;
 	}
 
 	/**
@@ -313,7 +420,7 @@ class Wizard extends UI5Element {
 	storeStepScrollOffsets() {
 		this.stepScrollOffsets = this.slottedSteps.map(step => {
 			const contentItem = this.getStepWrapperByRefId(step._id);
-			return contentItem.offsetTop + contentItem.offsetHeight - Wizard.CONTENT_TOP_OFFSET;
+			return contentItem.offsetTop + contentItem.offsetHeight;
 		});
 	}
 
@@ -325,7 +432,7 @@ class Wizard extends UI5Element {
 	 */
 	onSelectionChangeRequested(event) {
 		this.selectionRequestedByClick = true;
-		this.changeSelectionByStepClick(event.target);
+		this.changeSelectionByStepAction(event.target);
 	}
 
 	/**
@@ -340,7 +447,7 @@ class Wizard extends UI5Element {
 			return;
 		}
 
-		this.debounce(this.changeSelectionByScroll.bind(this, event.target.scrollTop), Wizard.SCROLL_DEBOUNCE_RATE);
+		debounce(this.changeSelectionByScroll.bind(this, event.target.scrollTop), Wizard.SCROLL_DEBOUNCE_RATE);
 	}
 
 	/**
@@ -350,17 +457,174 @@ class Wizard extends UI5Element {
 	 * @private
 	 */
 	onStepInHeaderFocused(event) {
-		this._itemNavigation.update(event.target);
+		this._itemNavigation.setCurrentItem(event.target);
 	}
 
 	/**
-	 * Handles component resize  to:
-	 * (1) trigger scroll scrollOffset reCalculation and syncSelection
-	 * (2) hide steps' separators and texts to free more space on small sizes
+	 * Handles resize in order to:
+	 * (1) sync steps' scroll offset and selection
+	 * (2) adapt navition step header
 	 * @private
 	 */
-	onResize() {
+	onStepResize() {
 		this.width = this.getBoundingClientRect().width;
+		this.contentHeight = this.getContentHeight();
+
+		if (this._prevWidth !== this.width || this.contentHeight !== this._prevContentHeight) {
+			this._closeRespPopover();
+		}
+
+		this._prevWidth = this.width;
+		this._prevContentHeight = this.contentHeight;
+	}
+
+	attachStepsResizeObserver() {
+		this.stepsDOM.forEach(stepDOM => {
+			ResizeHandler.deregister(stepDOM, this._onStepResize);
+			ResizeHandler.register(stepDOM, this._onStepResize);
+		});
+	}
+
+	detachStepsResizeObserver() {
+		this.stepsDOM.forEach(stepDOM => {
+			ResizeHandler.deregister(stepDOM, this._onStepResize);
+		});
+	}
+
+	/**
+	 * Updates the expanded attribute for each ui5-wizard-tab based on the ui5-wizard width
+	 * @private
+	 */
+	_adjustHeaderOverflow() {
+		let counter = 0;
+		let isForward = true;
+		const iWidth = this.width;
+		const iCurrStep = this.getSelectedStepIndex();
+		const iStepsToShow = this.steps.length ? Math.floor(iWidth / MIN_STEP_WIDTH_WITH_TITLE) : Math.floor(iWidth / MIN_STEP_WIDTH_NO_TITLE);
+
+		const tabs = this.shadowRoot.querySelectorAll("[ui5-wizard-tab]");
+
+		if (!tabs.length) {
+			return;
+		}
+
+		[].forEach.call(tabs, (step, index) => {
+			step.setAttribute(EXPANDED_STEP, false);
+			step.setAttribute(BEFORE_EXPANDED_STEP, false);
+			step.setAttribute(AFTER_EXPANDED_STEP, false);
+
+			// Add "data-ui5-wizard-after-current-tab" to all tabs after the current one
+			if (index > iCurrStep) {
+				tabs[index].setAttribute(AFTER_CURRENT_STEP, true);
+			} else {
+				tabs[index].removeAttribute(AFTER_CURRENT_STEP);
+			}
+		});
+
+		// Add "data-ui5-wizard-expanded-tab" to the current step
+		if (tabs[iCurrStep]) {
+			tabs[iCurrStep].setAttribute(EXPANDED_STEP, true);
+		}
+
+		// Set the "data-ui5-wizard-expanded-tab" to the steps that are expanded
+		// The algorithm is as follows:
+		// 1. A step towards the end is expanded
+		// 	1.2. If there are no available steps towards the end a step towards the beginning is expanded
+		// 2. A step towards the beginning is expanded
+		// 	2.2. If there are no available steps towards the beginning a step towards the end is expanded
+		for (let i = 1; i < iStepsToShow; i++) {
+			if (isForward) {
+				counter += 1;
+			}
+
+			if (isForward && tabs[iCurrStep + counter]) {
+				tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, true);
+				isForward = !isForward;
+			} else if (!isForward && tabs[iCurrStep - counter]) {
+				tabs[iCurrStep - counter].setAttribute(EXPANDED_STEP, true);
+				isForward = !isForward;
+			} else if (tabs[iCurrStep + counter + 1]) {
+				counter += 1;
+				tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, true);
+				isForward = true;
+			} else if (tabs[iCurrStep - counter]) {
+				tabs[iCurrStep - counter].setAttribute(EXPANDED_STEP, true);
+				counter += 1;
+				isForward = false;
+			}
+		}
+
+		// mark the topmost steps of both groups (in the beginning and the end),
+		// using the "data-ui5-wizard-after-current-tab" and "data-ui5-wizard-expanded-tab-prev" attributes
+		for (let i = 0; i < tabs.length; i++) {
+			if (tabs[i].getAttribute(EXPANDED_STEP) === "true" && tabs[i - 1] && tabs[i - 1].getAttribute(EXPANDED_STEP) === "false") {
+				tabs[i - 1].setAttribute(BEFORE_EXPANDED_STEP, true);
+			}
+
+			if (tabs[i].getAttribute(EXPANDED_STEP) === "false" && tabs[i - 1] && tabs[i - 1].getAttribute(EXPANDED_STEP) === "true") {
+				tabs[i].setAttribute(AFTER_EXPANDED_STEP, true);
+				break;
+			}
+		}
+	}
+
+	_isGroupAtStart(selectedStep) {
+		const iStepNumber = this.stepsInHeaderDOM.indexOf(selectedStep);
+
+		return selectedStep.getAttribute(EXPANDED_STEP) === "false" && selectedStep.getAttribute(BEFORE_EXPANDED_STEP) === "true" && iStepNumber > 0;
+	}
+
+	_isGroupAtEnd(selectedStep) {
+		const iStepNumber = this.stepsInHeaderDOM.indexOf(selectedStep);
+
+		return selectedStep.getAttribute(EXPANDED_STEP) === "false" && selectedStep.getAttribute(AFTER_EXPANDED_STEP) === "true" && (iStepNumber + 1 < this.steps.length);
+	}
+
+	async _showPopover(oDomTarget, bAtStart) {
+		const tabs = Array.from(this.shadowRoot.querySelectorAll("[ui5-wizard-tab]"));
+		this._groupedTabs = [];
+
+		const iFromStep = bAtStart ? 0 : this.stepsInHeaderDOM.indexOf(oDomTarget);
+		const iToStep = bAtStart ? this.stepsInHeaderDOM.indexOf(oDomTarget) : tabs.length - 1;
+
+		for (let i = iFromStep; i <= iToStep; i++) {
+			this._groupedTabs.push(tabs[i]);
+		}
+
+		const responsivePopover = await this._respPopover();
+		responsivePopover.showAt(oDomTarget);
+	}
+
+	async _onGroupedTabClick(event) {
+		if (this._isGroupAtStart(event.target)) {
+			return this._showPopover(event.target, true);
+		}
+
+		if (this._isGroupAtEnd(event.target)) {
+			return this._showPopover(event.target, false);
+		}
+	}
+
+	_onOverflowStepButtonClick(event) {
+		const tabs = Array.from(this.shadowRoot.querySelectorAll("[ui5-wizard-tab]"));
+		const stepRefId = event.target.getAttribute("data-ui5-header-tab-ref-id");
+		const stepToSelect = this.slottedSteps[stepRefId - 1];
+		const selectedStep = this.selectedStep;
+		const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
+
+		this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
+		this._closeRespPopover();
+		tabs[newlySelectedIndex].focus();
+	}
+
+	async _closeRespPopover() {
+		const responsivePopover = await this._respPopover();
+		responsivePopover && responsivePopover.close();
+	}
+
+	async _respPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector(`.ui5-wizard-responsive-popover`);
 	}
 
 	/**
@@ -378,10 +642,11 @@ class Wizard extends UI5Element {
 		}
 
 		// If the calculated index is in range,
-		// change selection and fire "selection-change".
+		// change selection and fire "step-change".
 		if (newlySelectedIndex >= 0 && newlySelectedIndex <= this.stepsCount - 1) {
 			const stepToSelect = this.slottedSteps[newlySelectedIndex];
-			this.switchSelectionFromOldToNewStep(this.selectedStep, stepToSelect, newlySelectedIndex);
+
+			this.switchSelectionFromOldToNewStep(this.selectedStep, stepToSelect, newlySelectedIndex, false);
 			this.selectionRequestedByScroll = true;
 		}
 	}
@@ -389,14 +654,22 @@ class Wizard extends UI5Element {
 	/**
 	 * Called upon <code>onSelectionChangeRequested</code>.
 	 * 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);
+
+		if (firstFocusableElement) {
+			// 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.
@@ -405,9 +678,28 @@ class Wizard extends UI5Element {
 			return;
 		}
 
-		// Change selection and fire "selection-change".
-		const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
-		this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex);
+		if (bExpanded || (!bExpanded && (newlySelectedIndex === 0 || newlySelectedIndex === this.steps.length - 1))) {
+			// Change selection and fire "step-change".
+			this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
+		}
+	}
+
+	getContentHeight() {
+		let contentHeight = 0;
+
+		this.stepsDOM.forEach(step => {
+			contentHeight += step.getBoundingClientRect().height;
+		});
+
+		return contentHeight;
+	}
+
+	getStepAriaLabelText(step, ariaLabel) {
+		return Wizard.i18nBundle.getText(WIZARD_STEP_ARIA_LABEL, ariaLabel);
+	}
+
+	get stepsDOM() {
+		return Array.from(this.shadowRoot.querySelectorAll(".ui5-wiz-content-item"));
 	}
 
 	get _stepsInHeader() {
@@ -416,9 +708,11 @@ class Wizard extends UI5Element {
 
 	get _steps() {
 		const lastEnabledStepIndex = this.getLastEnabledStepIndex();
+		const stepsInfo = this.getStepsInfo();
 
 		return this.steps.map((step, idx) => {
 			step.stretch = idx === lastEnabledStepIndex;
+			step.stepContentAriaLabel = `${this.navStepDefaultHeading} ${stepsInfo[idx].number} ${stepsInfo[idx].titleText}`;
 			return step;
 		});
 	}
@@ -468,7 +762,7 @@ class Wizard extends UI5Element {
 	}
 
 	get enabledStepsInHeaderDOM() {
-		return this.stepsInHeaderDOM.filter(step => !step.disabled);
+		return this.stepsInHeaderDOM;
 	}
 
 	get phoneMode() {
@@ -480,15 +774,47 @@ class Wizard extends UI5Element {
 	}
 
 	get navAriaRoleDescription() {
-		return this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+		return Wizard.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+	}
+
+	get navAriaLabelText() {
+		return Wizard.i18nBundle.getText(WIZARD_NAV_ARIA_LABEL);
+	}
+
+	get navAriaDescribedbyText() {
+		return Wizard.i18nBundle.getText(WIZARD_LIST_ARIA_DESCRIBEDBY);
+	}
+
+	get listAriaLabelText() {
+		return Wizard.i18nBundle.getText(WIZARD_LIST_ARIA_LABEL);
+	}
+
+	get actionSheetStepsText() {
+		return Wizard.i18nBundle.getText(WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL);
 	}
 
 	get navStepDefaultHeading() {
-		return this.i18nBundle.getText(WIZARD_NAV_STEP_DEFAULT_HEADING);
+		return Wizard.i18nBundle.getText(WIZARD_NAV_STEP_DEFAULT_HEADING);
+	}
+
+	get optionalStepText() {
+		return Wizard.i18nBundle.getText(WIZARD_OPTIONAL_STEP_ARIA_LABEL);
+	}
+
+	get activeStepText() {
+		return Wizard.i18nBundle.getText(WIZARD_STEP_ACTIVE);
+	}
+
+	get inactiveStepText() {
+		return Wizard.i18nBundle.getText(WIZARD_STEP_INACTIVE);
 	}
 
 	get ariaLabelText() {
-		return this.ariaLabel || this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+		return Wizard.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+	}
+
+	get effectiveStepSwitchThreshold() {
+		return clamp(this.stepSwitchThreshold, STEP_SWITCH_THRESHOLDS.MIN, STEP_SWITCH_THRESHOLDS.MAX);
 	}
 
 	/**
@@ -500,22 +826,33 @@ class Wizard extends UI5Element {
 	getStepsInfo() {
 		const lastEnabledStepIndex = this.getLastEnabledStepIndex();
 		const stepsCount = this.stepsCount;
+		const selectedStepIndex = this.getSelectedStepIndex();
+		let inintialZIndex = this.steps.length + 10;
+		let accInfo;
+
+		this._adjustHeaderOverflow();
 
 		return this.steps.map((step, idx) => {
 			const pos = idx + 1;
 
-			// Hide separator if:
-			// (1) its size is under the phone breakpoint
-			// (2) it's the last step and it's not a branching one
-			const hideSeparator = this.phoneMode || ((idx === stepsCount - 1) && !step.branching);
+			// Hide separator if it's the last step and it's not a branching one
+			const hideSeparator = (idx === stepsCount - 1) && !step.branching;
 
-			// Calculate the step's aria-roledectioption: "1. heading" or "Step 1".
-			const roleDescription = step.heading ? `${pos}. ${step.heading}` : `${this.navStepDefaultHeading} ${pos}`;
+			const isOptional = step.subtitleText ? this.optionalStepText : "";
+			const stepStateText = step.disabled ? this.inactiveStepText : this.activeStepText;
+			const ariaLabel = (step.titleText ? `${pos} ${step.titleText} ${stepStateText} ${isOptional}` : `${this.navStepDefaultHeading} ${pos} ${stepStateText} ${isOptional}`).trim();
+			const isAfterCurrent = (idx > selectedStepIndex);
+
+			accInfo = {
+				"ariaSetsize": stepsCount,
+				"ariaPosinset": pos,
+				"ariaLabel": this.getStepAriaLabelText(step, ariaLabel),
+			};
 
 			return {
 				icon: step.icon,
-				heading: this.phoneMode ? "" : step.heading,
-				subheading: this.phoneMode ? "" : step.subheading,
+				titleText: step.titleText,
+				subtitleText: step.subtitleText,
 				number: pos,
 				selected: step.selected,
 				disabled: step.disabled,
@@ -523,11 +860,12 @@ class Wizard extends UI5Element {
 				activeSeparator: (idx < lastEnabledStepIndex) && !step.disabled,
 				branchingSeparator: step.branching,
 				pos,
-				size: stepsCount,
-				roleDescription,
-				ariaLabel: getEffectiveAriaLabelText(step),
+				accInfo,
 				refStepId: step._id,
 				tabIndex: this.selectedStepIndex === idx ? "0" : "-1",
+				styles: {
+					zIndex: isAfterCurrent ? --inintialZIndex : 1,
+				},
 			};
 		});
 	}
@@ -569,9 +907,12 @@ class Wizard extends UI5Element {
 		return this.shadowRoot.querySelector(`[data-ui5-content-item-ref-id=${refId}]`);
 	}
 
+	getStepWrapperByIdx(idx) {
+		return this.getStepWrapperByRefId(this.steps[idx]._id);
+	}
+
 	/**
-	 * Scrolls to the content of the selected step
-	 * and it is used in <code>onAfteRendering</cod>.
+	 * Scrolls to the content of the selected step, used in <code>onAfterRendering</cod>.
 	 * @private
 	 */
 	scrollToSelectedStep() {
@@ -594,7 +935,6 @@ class Wizard extends UI5Element {
 
 	/**
 	 * Returns to closest scroll position for the given step index.
-	 * by given step index.
 	 *
 	 * @private
 	 * @param {Integer} stepIndex the index of a step
@@ -618,21 +958,25 @@ class Wizard extends UI5Element {
 
 	/**
 	 * Returns the closest step index by given scroll position.
-	 *
-	 * @param {Integer} scrollPos scroll position
-	 * @returns {Integer} closestStepIndex the closest step index
 	 * @private
+	 * @param {Integer} scrollPos the scroll position
 	 */
 	getClosestStepIndexByScrollPos(scrollPos) {
 		for (let closestStepIndex = 0; closestStepIndex <= this.stepScrollOffsets.length - 1; closestStepIndex++) {
-			const stepOffset = this.stepScrollOffsets[closestStepIndex];
+			const stepScrollOffset = this.stepScrollOffsets[closestStepIndex];
+			const step = this.getStepWrapperByIdx(closestStepIndex);
+			const switchStepBoundary = step.offsetTop + (step.offsetHeight * this.effectiveStepSwitchThreshold);
+
+			if (stepScrollOffset > 0 && scrollPos < stepScrollOffset) {
+				if (scrollPos > switchStepBoundary) {
+					return closestStepIndex + 1;
+				}
 
-			if (stepOffset > 0 && scrollPos < stepOffset) {
 				return closestStepIndex;
 			}
 		}
 
-		return 0;
+		return this.selectedStepIndex;
 	}
 
 	/**
@@ -640,48 +984,28 @@ class Wizard extends UI5Element {
 	 *
 	 * @param {HTMLElement} selectedStep the old step
 	 * @param {HTMLElement} stepToSelect the step to be selected
-	 * @param {Integer} selectedStepIndex the index of the newly selected step
+	 * @param {Integer} stepToSelectIndex the index of the newly selected step
+	 * @param {boolean} changeWithClick the selection changed due to user click in the step navigation
 	 * @private
 	 */
-	switchSelectionFromOldToNewStep(selectedStep, stepToSelect, selectedStepIndex) {
+	switchSelectionFromOldToNewStep(selectedStep, stepToSelect, stepToSelectIndex, changeWithClick) {
 		if (selectedStep && stepToSelect) {
-			selectedStep.selected = false;
-			stepToSelect.selected = true;
+			// keep the selection if next step is disabled
+			if (!stepToSelect.disabled) {
+				selectedStep.selected = false;
+				stepToSelect.selected = true;
+			}
 
-			this.fireEvent("selection-change", {
-				selectedStep: stepToSelect,
-				previouslySelectedStep: selectedStep,
+			this.fireEvent("step-change", {
+				step: stepToSelect,
+				previousStep: selectedStep,
+				changeWithClick,
 			});
 
-			this.selectedStepIndex = selectedStepIndex;
+			this.selectedStepIndex = stepToSelectIndex;
 		}
 	}
 
-	/**
-	 * Initializes the <code>ItemNavigation</code>
-	 * that controls the navigation between the steps in the navigation header.
-	 * @private
-	 */
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this, {
-			navigationMode: NavigationMode.Horizontal,
-		});
-
-		this._itemNavigation.getItemsCallback = () => this.enabledStepsInHeaderDOM;
-	}
-
-	/**
-	 * Delays function execution by given threshold - used to delay the scroll event handling.
-	 * @private
-	 */
-	debounce(fn, delay) {
-		clearTimeout(this.debounceInterval);
-		this.debounceInterval = setTimeout(() => {
-			this.debounceInterval = null;
-			fn();
-		}, delay);
-	}
-
 	/**
 	 * Sorter method for sorting an array in ascending order.
 	 * @private