fix(ui5-wizard): correct aria-controls value (#3180)

Author: ivoplashkov

packages/fiori/src/Wizard.hbs

@@ -1,6 +1,6 @@
 <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" >
+		<div class="ui5-wiz-nav-list" role="list" aria-label="{{listAriaLabelText}}" aria-controls="{{_id}}-wiz-content">
 			{{#each _stepsInHeader}}
 				<ui5-wizard-tab
 					heading="{{heading}}"
@@ -25,7 +25,7 @@
 		</div>
 	</nav>
 
-	<div class="ui5-wiz-content" @scroll="{{onScroll}}">
+	<div id="{{_id}}-wiz-content" class="ui5-wiz-content" @scroll="{{onScroll}}">
 	{{#each _steps}}
 			<div class="ui5-wiz-content-item"
 				?hidden="{{disabled}}"

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

@@ -33,7 +33,7 @@ describe("Wizard general interaction", () => {
 			"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",
+		assert.strictEqual(wizList.getAttribute("aria-controls"), `${wiz.getProperty("_id")}-wiz-content`,
 			"Wizard list has aria-controls set.");
 		assert.strictEqual(wizList.getAttribute("aria-label"), wizListText,
 			"Wizard list has aria-label set.");