fix(ui5-wizard): disabled steps are no longer clickable

packages/fiori/src/Wizard.hbs

@@ -15,7 +15,6 @@
 					._wizardTabAccInfo="{{accInfo}}"
 					data-ui5-content-ref-id="{{this.refStepId}}"
 					data-ui5-index="{{pos}}"
-					_tab-index="{{tabIndex}}"
 					@ui5-selection-change-requested="{{../onSelectionChangeRequested}}"
 					@ui5-focused="{{../onStepInHeaderFocused}}"
 					@click="{{../_onGroupedTabClick}}"

packages/fiori/src/Wizard.ts

@@ -95,7 +95,6 @@ type StepInfo = {
 	pos: number,
 	accInfo: AccessibilityInformation,
 	refStepId: string,
-	tabIndex: string,
 	styles: object,
 }
 
@@ -413,6 +412,10 @@ class Wizard extends UI5Element {
 
 		// Place for improvement: If the selected step is not the first, enable all the prior steps
 		this.selectedStepIndex = this.getSelectedStepIndex();
+
+		if (this.selectedStep && this.stepsInHeaderDOM.length) {
+			this._itemNavigation.setCurrentItem(this.stepsInHeaderDOM.find(el => el.selected) as WizardTab);
+		}
 	}
 
 	/**
@@ -811,7 +814,7 @@ class Wizard extends UI5Element {
 	}
 
 	get enabledStepsInHeaderDOM() {
-		return this.stepsInHeaderDOM;
+		return this.stepsInHeaderDOM.filter(step => !step.disabled);
 	}
 
 	get navAriaRoleDescription() {
@@ -902,7 +905,6 @@ class Wizard extends UI5Element {
 				pos,
 				accInfo,
 				refStepId: step._id,
-				tabIndex: this.selectedStepIndex === idx ? "0" : "-1",
 				styles: {
 					zIndex: isAfterCurrent ? --inintialZIndex : 1,
 				},

packages/fiori/src/WizardTab.hbs

@@ -1,6 +1,6 @@
 <div class="ui5-wiz-step-root"
 	role="listitem"
-	tabindex="{{tabIndex}}"
+	tabindex="{{effectiveTabIndex}}"
 	aria-current="{{accInfo.ariaCurrent}}"
 	aria-setsize="{{accInfo.ariaSetsize}}"
 	aria-posinset="{{accInfo.ariaPosinset}}"

packages/fiori/src/WizardTab.ts

@@ -150,14 +150,22 @@ class WizardTab extends UI5Element implements ITabbable {
 		this.fireEvent("focused");
 	}
 
-	get tabIndex() {
-		return Number(this.forcedTabIndex);
-	}
-
 	get hasTexts() {
 		return this.titleText || this.subtitleText;
 	}
 
+	get effectiveTabIndex() {
+		if (this.disabled) {
+			return;
+		}
+
+		if (this.selected || this.forcedTabIndex === "0") {
+			return "0";
+		}
+
+		return "-1";
+	}
+
 	get accInfo() {
 		return {
 			"ariaSetsize": this._wizardTabAccInfo && this._wizardTabAccInfo.ariaSetsize,

packages/fiori/test/specs/Wizard.spec.js

@@ -61,6 +61,19 @@ describe("Wizard general interaction", () => {
 			"Step has aria-label set to the number of the step and its title.");
 	});
 
+	it("Disabled step should not be interactive", async () => {
+		const wiz = await $("#wizTest");
+		const disabledStep = await wiz.shadow$(`[data-ui5-index="2"]`);
+
+		await disabledStep.click();
+
+		const isTabActiveElement = await browser.executeAsync((done) => {
+			done(document.activeElement.shadowRoot.activeElement === document.querySelector("#wizTest").shadowRoot.querySelector("[data-ui5-index='2']"));
+		});
+
+		assert.notOk(isTabActiveElement, "Second tab should not be active element");
+	});
+
 	it("move to next step by API", async () => {
 		const wiz = await browser.$("#wizTest");
 		const btnToStep2 = await browser.$("#toStep2");