fix(ui5-wizard): improve focus and keyboard handling (#9758)

FIXES: #9670 FIXES: #9571
SAP · Sep 2, 2024 · 6573a6e · 6573a6e
1 parent a4b4028
commit 6573a6e
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 8 deletions.
diff --git a/packages/fiori/src/Wizard.hbs b/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}}"

diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts
@@ -92,7 +92,6 @@ type StepInfo = {
 	pos: number,
 	accInfo: AccessibilityInformation,
 	refStepId: string,
-	tabIndex: string,
 	styles: object,
 }
 
@@ -409,6 +408,14 @@ 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) {
+			if (this._itemNavigation._getItems().includes(this.stepsInHeaderDOM[this.selectedStepIndex])) {
+				this._itemNavigation.setCurrentItem(this.stepsInHeaderDOM[this.selectedStepIndex]);
+			} else {
+				this._itemNavigation.setCurrentItem(this.stepsInHeaderDOM.find(el => el.selected) as WizardTab);
+			}
+		}
 	}
 
 	/**
@@ -900,7 +907,6 @@ class Wizard extends UI5Element {
 				pos,
 				accInfo,
 				refStepId: step._id,
-				tabIndex: this.selectedStepIndex === idx ? "0" : "-1",
 				styles: {
 					zIndex: isAfterCurrent ? --inintialZIndex : 1,
 				},

diff --git a/packages/fiori/src/WizardTab.hbs b/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}}"

diff --git a/packages/fiori/src/WizardTab.ts b/packages/fiori/src/WizardTab.ts
@@ -146,12 +146,20 @@ class WizardTab extends UI5Element implements ITabbable {
 		}
 	}
 
-	_onfocusin() {
-		this.fireEvent("focused");
+	get effectiveTabIndex() {
+		if (this.disabled) {
+			return;
+		}
+
+		if (this.selected || this.forcedTabIndex === "0") {
+			return "0";
+		}
+
+		return "-1";
 	}
 
-	get tabIndex() {
-		return Number(this.forcedTabIndex);
+	_onfocusin() {
+		this.fireEvent("focused");
 	}
 
 	get hasTexts() {

diff --git a/packages/fiori/test/specs/Wizard.spec.js b/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("Disabled step should not be interactive", async () => {
 		const wiz = await browser.$("#wizTest");
 		const disabledStep = await wiz.shadow$(`[data-ui5-index="2"]`);
@@ -325,6 +338,33 @@ describe("Wizard general interaction", () => {
 			"No scrolling occures after re-rendering when the selected step remains the same.");
 	});
 
+	it("Tests if initial focus is set on the second (selected) step", async () => {
+		browser.url("test/pages/WizardPageMode_test.html");
+
+		const wiz = await browser.$("#wiz2");
+
+		// open the dialog
+		const btnOpenDialog = await browser.$("#button");
+		await btnOpenDialog.click();
+
+		// go to second step
+		const step2 = await browser.$("#nextButton");
+		await step2.click();
+
+		// close the dialog by escape
+		await browser.keys("Escape");
+
+		// open the dialog again
+		await btnOpenDialog.click();
+
+		// check if second wizard tab is focused
+		const isTabActiveElement = await browser.executeAsync((done) => {
+			done(document.activeElement.shadowRoot.activeElement === document.querySelector("#wiz2").shadowRoot.querySelector("[data-ui5-index='2']"));
+		});
+
+		assert.ok(isTabActiveElement, "Second step is focused.");
+	});
+
 	it("Tests if second step is scrolled into view when first step's height is bigger than viewport", async () => {
 		await browser.url(`test/pages/WizardScrolling.html`);