@ui5/webcomponents-fiori 0.31.25 → 0.31.26

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.31.26](https://github.com/SAP/ui5-webcomponents/compare/v0.31.25...v0.31.26) (2021-12-06)
+
+
+### Bug Fixes
+
+* **ui5-wizard:** announce active step when navigating via a button ([#4298](https://github.com/SAP/ui5-webcomponents/issues/4298)) ([#4420](https://github.com/SAP/ui5-webcomponents/issues/4420)) ([1998db4](https://github.com/SAP/ui5-webcomponents/commit/1998db4))
+
+
+
+
+
 ## [0.31.25](https://github.com/SAP/ui5-webcomponents/compare/v0.31.24...v0.31.25) (2021-11-29)
 
 **Note:** Version bump only for package @ui5/webcomponents-fiori

package/dist/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;
 		});
 	}

package/dist/generated/templates/WizardTemplate.lit.js

@@ -4,7 +4,7 @@ import ifDefined from '@ui5/webcomponents-base/dist/renderer/ifDefined.js';
 import { html, svg, repeat, classMap, styleMap, unsafeHTML, setTags, setSuffix } from '@ui5/webcomponents-base/dist/renderer/LitRenderer.js';
 const block0 = (context) => { return html`<div class="ui5-wiz-root" aria-label="${ifDefined(context.ariaLabelText)}" role="region"><nav class="ui5-wiz-nav" aria-label="${ifDefined(context.navAriaLabelText)}" tabindex="-1"><div class="ui5-wiz-nav-list" role="list" aria-label="${ifDefined(context.listAriaLabelText)}" aria-controls="${ifDefined(context._id)}-wiz-content">${ repeat(context._stepsInHeader, (item, index) => item._id || index, (item, index) => block1(item, index, context)) }</div></nav><div id="${ifDefined(context._id)}-wiz-content" class="ui5-wiz-content" @scroll="${context.onScroll}">${ repeat(context._steps, (item, index) => item._id || index, (item, index) => block2(item, index, context)) }</div></div>`; };
 const block1 = (item, index, context) => { return html`<ui5-wizard-tab heading="${ifDefined(item.heading)}" subheading="${ifDefined(item.subheading)}" icon="${ifDefined(item.icon)}" number="${ifDefined(item.number)}" ?disabled="${item.disabled}" ?selected="${item.selected}" ?hide-separator="${item.hideSeparator}" ?active-separator="${item.activeSeparator}" ?branching-separator="${item.branchingSeparator}" ._wizardTabAccInfo="${ifDefined(item.accInfo)}" data-ui5-content-ref-id="${ifDefined(item.refStepId)}" data-ui5-index="${ifDefined(item.pos)}" _tab-index="${ifDefined(item.tabIndex)}" @selection-change-requested="${context.onSelectionChangeRequested}" @focused="${context.onStepInHeaderFocused}" @click="${context._onGroupedTabClick}" style=${ifDefined(item.styles)}></ui5-wizard-tab>`; };
-const block2 = (item, index, context) => { return html`<div class="ui5-wiz-content-item" ?hidden="${item.disabled}" ?selected="${item.selected}" ?stretch="${item.stretch}" data-ui5-content-item-ref-id="${ifDefined(item._id)}"><slot name="${ifDefined(item._individualSlot)}"></slot></div>`; };
+const block2 = (item, index, context) => { return html`<div class="ui5-wiz-content-item" ?hidden="${item.disabled}" ?selected="${item.selected}" ?stretch="${item.stretch}" aria-label="${ifDefined(item.stepContentAriaLabel)}" role="region" data-ui5-content-item-ref-id="${ifDefined(item._id)}"><slot name="${ifDefined(item._individualSlot)}"></slot></div>`; };
 
 
 const main = (context, tags, suffix) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "0.31.25",
+  "version": "0.31.26",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -30,14 +30,14 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "0.31.25",
-    "@ui5/webcomponents-base": "0.31.25",
-    "@ui5/webcomponents-icons": "0.31.25",
-    "@ui5/webcomponents-ie11": "0.31.25",
-    "@ui5/webcomponents-theme-base": "0.31.25"
+    "@ui5/webcomponents": "0.31.26",
+    "@ui5/webcomponents-base": "0.31.26",
+    "@ui5/webcomponents-icons": "0.31.26",
+    "@ui5/webcomponents-ie11": "0.31.26",
+    "@ui5/webcomponents-theme-base": "0.31.26"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.31.25",
+    "@ui5/webcomponents-tools": "0.31.26",
     "chromedriver": "96.0.0"
   }
 }

package/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>

package/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;
 		});
 	}