fix(ui5-wizard): announce active step when navigating via a button (#4298) (#4420)

* fix(ui5-wizard) announce active step when navigating via a button (#4298)

* Announce active step on navigation via button

* Clean

* Beautify

* Adjust announcement, add role 'region'

* Announce only the step title as a region

* Add tests

* Fix test

* Add 'step' to the announcement

* fix failing tests

Co-authored-by: Nikolay Deshev <nikolay.deshev@sap.com>

Author: niyap

packages/fiori/src/Wizard.hbs

@@ -31,6 +31,8 @@
 				?hidden="{{disabled}}"
 				?selected="{{selected}}"
 				?stretch="{{stretch}}"
+				aria-label="{{stepContentAriaLabel}}"
+				role="region"
 				data-ui5-content-item-ref-id="{{_id}}">
 					<slot name="{{this._individualSlot}}"></slot>
 			</div>

packages/fiori/src/Wizard.js

@@ -682,7 +682,9 @@ class Wizard extends UI5Element {
 		const lastEnabledStepIndex = this.getLastEnabledStepIndex();
 
 		return this.steps.map((step, idx) => {
+			const pos = idx + 1;
 			step.stretch = idx === lastEnabledStepIndex;
+			step.stepContentAriaLabel = (step.heading ? `${this.navStepDefaultHeading} ${pos} ${step.heading}` : `${pos}`).trim();
 			return step;
 		});
 	}

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

@@ -20,11 +20,14 @@ describe("Wizard general interaction", () => {
 		const wizRoot = wiz.shadow$(".ui5-wiz-root");
 		const wizNav = wiz.shadow$(".ui5-wiz-nav");
 		const wizList = wiz.shadow$(".ui5-wiz-nav-list");
+		const wizStep = wiz.shadow$(".ui5-wiz-content-item");
 
 		const wizRootText = "Wizard";
 		const wizNavText = "Wizard Progress Bar";
 		const wizListText = "Wizard Steps";
 
+		const step1InHeader = wiz.shadow$(`[data-ui5-index="1"]`)
+
 		assert.strictEqual(wizRoot.getAttribute("role"), "region",
 			"Wizard has role set.");
 		assert.strictEqual(wizRoot.getAttribute("aria-label"), wizRootText,
@@ -37,6 +40,10 @@ describe("Wizard general interaction", () => {
 			"Wizard list has aria-controls set.");
 		assert.strictEqual(wizList.getAttribute("aria-label"), wizListText,
 			"Wizard list has aria-label set.");
+		assert.strictEqual(wizStep.getAttribute("role"), "region",
+			"Step has role 'region'");
+		assert.strictEqual(wizStep.getAttribute("aria-label"), `Step 1 ${step1InHeader.getProperty("heading")}`,
+			"Step has aria-label set to the number of the step and its title.");
 	});
 
 	it("move to next step by API", () => {