fix(ui5-wizard): implement revised accessibility spec (#2990)

* ui5-wizard: implement revised accessibility spec

* (fix)ui5-wizard: implement revised accessibility spec

* fix typo

* fix linter

* fix tests

* apply comments

* apply comments

Author: ivoplashkov

packages/fiori/src/Wizard.hbs

@@ -1,6 +1,6 @@
-<div class="ui5-wiz-root" aria-label="{{ariaLabelText}}">
-	<nav class="ui5-wiz-nav" role="navigation" aria-roledescription="{{navAriaRoleDescription}}" tabindex="-1">
-		<ul class="ui5-wiz-nav-list" role="list">
+<div class="ui5-wiz-root" aria-label="{{ariaLabelText}}" role="region">
+	<nav class="ui5-wiz-nav" aria-label="{{navAriaLabelText}}" tabindex="-1">
+		<div class="ui5-wiz-nav-list" role="list" aria-label="{{listAriaLabelText}}" aria-controls="ui5-wiz-content" >
 			{{#each _stepsInHeader}}
 				<ui5-wizard-tab
 					heading="{{heading}}"
@@ -12,11 +12,7 @@
 					?hide-separator="{{hideSeparator}}"
 					?active-separator="{{activeSeparator}}"
 					?branching-separator="{{branchingSeparator}}"
-					role="listitem"
-					aria-posinset="{{pos}}"
-					aria-setsize="{{size}}"
-					aria-roledescription="{{roleDescription}}"
-					aria-label="{{ariaLabel}}"
+					._wizardTabAccInfo="{{accInfo}}"
 					data-ui5-content-ref-id="{{this.refStepId}}"
 					data-ui5-index="{{pos}}"
 					_tab-index="{{tabIndex}}"
@@ -26,7 +22,7 @@
 					style={{styles}}
 				></ui5-wizard-tab>
 			{{/each}}
-		</ul>
+		</div>
 	</nav>
 
 	<div class="ui5-wiz-content" @scroll="{{onScroll}}">

packages/fiori/src/Wizard.js

@@ -1,7 +1,6 @@
 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 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";
@@ -16,6 +15,11 @@ import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import {
 	WIZARD_NAV_STEP_DEFAULT_HEADING,
 	WIZARD_NAV_ARIA_ROLE_DESCRIPTION,
+	WIZARD_NAV_ARIA_LABEL,
+	WIZARD_LIST_ARIA_LABEL,
+	WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL,
+	WIZARD_STEP_ARIA_LABEL,
+	WIZARD_CURRENT_STEP_ARIA_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Step in header and content
@@ -678,6 +682,14 @@ class Wizard extends UI5Element {
 		return contentHeight;
 	}
 
+	getStepAriaLabelText(step, ariaLabel) {
+		if (step.selected) {
+			return this.i18nBundle.getText(WIZARD_CURRENT_STEP_ARIA_LABEL, ariaLabel);
+		}
+
+		return this.i18nBundle.getText(WIZARD_STEP_ARIA_LABEL, ariaLabel);
+	}
+
 	get stepsDOM() {
 		return Array.from(this.shadowRoot.querySelectorAll(".ui5-wiz-content-item"));
 	}
@@ -755,6 +767,18 @@ class Wizard extends UI5Element {
 		return this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
 	}
 
+	get navAriaLabelText() {
+		return this.i18nBundle.getText(WIZARD_NAV_ARIA_LABEL);
+	}
+
+	get listAriaLabelText() {
+		return this.i18nBundle.getText(WIZARD_LIST_ARIA_LABEL);
+	}
+
+	get actionSheetStepsText() {
+		return this.i18nBundle.getText(WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL);
+	}
+
 	get navStepDefaultHeading() {
 		return this.i18nBundle.getText(WIZARD_NAV_STEP_DEFAULT_HEADING);
 	}
@@ -778,6 +802,7 @@ class Wizard extends UI5Element {
 		const stepsCount = this.stepsCount;
 		const selectedStepIndex = this.getSelectedStepIndex();
 		let inintialZIndex = this.steps.length + 10;
+		let accInfo;
 
 		this._adjustHeaderOverflow();
 
@@ -787,10 +812,16 @@ class Wizard extends UI5Element {
 			// 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.subheading ? "Optional" : "";
+			const ariaLabel = (step.heading ? `${pos} ${step.heading} ${isOptional}` : `${this.navStepDefaultHeading} ${pos} ${isOptional}`).trim();
 			const isAfterCurrent = (idx > selectedStepIndex);
 
+			accInfo = {
+				"ariaSetsize": stepsCount,
+				"ariaPosinset": pos,
+				"ariaLabel": this.getStepAriaLabelText(step, ariaLabel),
+			};
+
 			return {
 				icon: step.icon,
 				heading: step.heading,
@@ -802,9 +833,7 @@ 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: `z-index: ${isAfterCurrent ? --inintialZIndex : 1}`,

packages/fiori/src/WizardPopover.hbs

@@ -1,6 +1,7 @@
 <ui5-responsive-popover
 	horizontal-align="Center"
 	placement-type="Bottom"
+	aria-label="{{actionSheetStepsText}}"
 	class="{{classes.popover}}"
 	@ui5-after-close={{_afterClosePopover}}
 	content-only-on-desktop
@@ -15,7 +16,7 @@
 					icon="{{this.icon}}"
 					?disabled="{{this.disabled}}"
 					design="Transparent"
-					data-ui5-header-tab-ref-id="{{this.ariaPosinset}}"
+					data-ui5-header-tab-ref-id="{{pos}}"
 					@click="{{../_onOverflowStepButtonClick}}"
 				>
 				{{this.heading}}

packages/fiori/src/WizardTab.hbs

@@ -1,12 +1,11 @@
 <div class="ui5-wiz-step-root"
-	role="{{role}}"
+	role="listitem"
 	tabindex="{{tabIndex}}"
-	aria-current="{{ariaCurrent}}"
-	aria-setsize="{{ariaSetsize}}"
-	aria-posinset="{{ariaPosinset}}"
-	aria-disabled="{{ariaDisabled}}"
-	aria-label="{{ariaLabel}}"
-	aria-roledescription="{{ariaRoledescription}}"
+	aria-current="{{accInfo.ariaCurrent}}"
+	aria-setsize="{{accInfo.ariaSetsize}}"
+	aria-posinset="{{accInfo.ariaPosinset}}"
+	aria-disabled="{{accInfo.ariaDisabled}}"
+	aria-label="{{accInfo.ariaLabel}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"

packages/fiori/src/WizardTab.js

@@ -1,7 +1,6 @@
 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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 
 import WizardTabTemplate from "./generated/templates/WizardTabTemplate.lit.js";
@@ -102,69 +101,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * Defines the role of the step.
-		 * @type {boolean}
-		 * @defaultvalue listitem
-		 * @private
-		 */
-		role: {
-			type: String,
-			defaultValue: "listitem",
-		},
-
-		/**
-		 * Defines the aria-roledescription of the step.
-		 * @type {boolean}
-		 * @defaultvalue ""
-		 * @private
-		 */
-		ariaRoledescription: {
-			type: String,
-		},
-
-		/**
-		 * Defines the aria-label of the step.
-		 * @type {boolean}
-		 * @defaultvalue undefined
-		 * @private
-		 */
-		ariaLabel: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * Defines the aria-labelledby of the step.
-		 * @type {boolean}
-		 * @defaultvalue undefined
-		 * @private
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * Defines the aria-setsize of the step.
-		 * @type {boolean}
-		 * @defaultvalue undefined
-		 * @private
-		 */
-		ariaSetsize: {
-			type: Integer,
-		},
-
-		/**
-		 * Defines the aria-posinset of the step.
-		 * @type {boolean}
-		 * @defaultvalue undefined
-		 * @private
-		 */
-		ariaPosinset: {
-			type: Integer,
-		},
-
 		/**
 		 * Defines the tabindex of the step.
 		 * @type {String}
@@ -175,6 +111,10 @@ const metadata = {
 			type: String,
 			defaultValue: "-1",
 		},
+
+		_wizardTabAccInfo: {
+			type: Object,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.WizardTab.prototype */ {
 	},
@@ -273,17 +213,19 @@ class WizardTab extends UI5Element {
 		return this.disabled ? undefined : this._tabIndex;
 	}
 
-	get ariaCurrent() {
-		return this.selected ? "step" : undefined;
-	}
-
-	get ariaDisabled() {
-		return this.disabled ? "true" : undefined;
-	}
-
 	get hasTexts() {
 		return this.heading || this.subheading;
 	}
+
+	get accInfo() {
+		return {
+			"ariaSetsize": this._wizardTabAccInfo && this._wizardTabAccInfo.ariaSetsize,
+			"ariaPosinset": this._wizardTabAccInfo && this._wizardTabAccInfo.ariaPosinset,
+			"ariaLabel": this._wizardTabAccInfo && this._wizardTabAccInfo.ariaLabel,
+			"ariaCurrent": this.selected ? "true" : undefined,
+			"ariaDisabled": this.disabled ? "true" : undefined,
+		};
+	}
 }
 
 WizardTab.define();

packages/fiori/src/i18n/messagebundle.properties

@@ -132,6 +132,21 @@ SHELLBAR_OVERFLOW = More
 #XACT: ARIA announcement for the cancel button
 SHELLBAR_CANCEL = Cancel
 
+#XACT: ARIA announcement for aria-label attribute of Wizard navigation header
+WIZARD_NAV_ARIA_LABEL = Wizard Progress Bar
+
+#XACT: ARIA announcement for aria-label attribute of Wizard list
+WIZARD_LIST_ARIA_LABEL = Wizard Steps
+
+#XACT: ARIA announcement for aria-label attribute of Wizard ActionSheet steps
+WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL = Steps
+
+#XACT: ARIA announcement for aria-label attribute of Wizard steps
+WIZARD_STEP_ARIA_LABEL=Step {0}
+
+#XACT: ARIA announcement for aria-label attribute of Wizard current step
+WIZARD_CURRENT_STEP_ARIA_LABEL=Step {0} current
+
 #XACT: ARIA announcement for roledescription attribute of Wizard navigation header
 WIZARD_NAV_ARIA_ROLE_DESCRIPTION = Wizard
 

packages/fiori/src/themes/WizardPopover.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 .ui5-wizard-responsive-popover {
 	box-shadow: var(--sapContent_Shadow1);
 }

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

@@ -18,13 +18,43 @@ describe("Wizard general interaction", () => {
 			"First step  in the header is selected.");
 	});
 
+	it("ARIA Attributes", () => {
+		const wiz = browser.$("#wizTest");
+		const wizRoot = wiz.shadow$(".ui5-wiz-root");
+		const wizNav = wiz.shadow$(".ui5-wiz-nav");
+		const wizList = wiz.shadow$(".ui5-wiz-nav-list");
+
+		const wizRootText = "Wizard";
+		const wizNavText = "Wizard Progress Bar";
+		const wizListText = "Wizard Steps";
+
+		assert.strictEqual(wizRoot.getAttribute("role"), "region",
+			"Wizard has role set.");
+		assert.strictEqual(wizRoot.getAttribute("aria-label"), wizRootText,
+			"Wizard has aria-label set.");
+		assert.strictEqual(wizNav.getAttribute("aria-label"), wizNavText,
+			"Wizard nav has aria-label set.");
+		assert.strictEqual(wizList.getAttribute("role"), "list",
+			"Wizard list has role set..");
+		assert.strictEqual(wizList.getAttribute("aria-controls"), "ui5-wiz-content",
+			"Wizard list has aria-controls set.");
+		assert.strictEqual(wizList.getAttribute("aria-label"), wizListText,
+			"Wizard list has aria-label set.");
+	});
+
 	it("move to next step by API", () => {
 		const wiz = browser.$("#wizTest");
 		const btnToStep2 = browser.$("#toStep2");
 		const step1 = browser.$("#st1");
 		const step2 = browser.$("#st2");
 		const step1InHeader = wiz.shadow$(`[data-ui5-index="1"]`);
 		const step2InHeader = wiz.shadow$(`[data-ui5-index="2"]`);
+		const step1InHeaderRoot = step1InHeader.shadow$(`.ui5-wiz-step-root`);
+		const step2InHeaderRoot = step2InHeader.shadow$(`.ui5-wiz-step-root`);
+
+		const stepText = "Step 1 Product type";
+		const currentStepText = "Step 2 Product Information current";
+
 
 		// act - the click handler calls the API
 		btnToStep2.click();
@@ -35,6 +65,12 @@ describe("Wizard general interaction", () => {
 		assert.strictEqual(step1InHeader.getAttribute("selected"), null,
 			"First step  in the header not is selected.");
 
+		// assert - check if aria-attributes are applied correctly when step is not selected
+		assert.strictEqual(step1InHeaderRoot.getAttribute("role"), "listitem",
+			"First step in the header has role.");
+		assert.strictEqual(step1InHeaderRoot.getAttribute("aria-label"), stepText,
+			"First step in the header has aria-label.");
+
 		// assert - that second step in the content and in the header are properly selected
 		assert.strictEqual(step2.getAttribute("selected"), "true",
 			"Second step in the content is selected.");
@@ -44,6 +80,10 @@ describe("Wizard general interaction", () => {
 			"Second step is enabled.");
 		assert.strictEqual(step2InHeader.getAttribute("disabled"), null,
 			"Second step in header is enabled.");
+
+		// assert - check if aria-label is applied correctly when step is selected
+		assert.strictEqual(step2InHeaderRoot.getAttribute("aria-label"), currentStepText,
+			"Second step in the header has aria-label.");
 	});
 
 	it("move to next step by click", () => {