feat(ui5-wizard): added accessbileName and accessibleNameRef properties

packages/fiori/cypress/specs/Wizard.cy.tsx

@@ -105,6 +105,67 @@ describe("Wizard general interaction", () => {
             .should("have.attr", "role", "region");
     });
 
+    it("should use accessibleName property as aria-label", () => {
+        cy.mount(
+            <Wizard accessibleName="Registration Process">
+                <WizardStep icon="sap-icon://product" selected titleText="Product type"/>
+                <WizardStep titleText="Product Information" disabled/>
+            </Wizard>
+        );
+
+        cy.get("[ui5-wizard]")
+            .shadow()
+            .find(".ui5-wiz-root")
+            .should("have.attr", "aria-label", "Registration Process");
+    });
+
+    it("should use accessibleNameRef to reference external element for aria-label", () => {
+        cy.mount(
+            <div>
+                <h2 id="wizard-label">Order Completion Wizard</h2>
+                <Wizard accessibleNameRef="wizard-label">
+                    <WizardStep icon="sap-icon://product" selected titleText="Product type"/>
+                    <WizardStep titleText="Product Information" disabled/>
+                </Wizard>
+            </div>
+        );
+
+        cy.get("[ui5-wizard]")
+            .shadow()
+            .find(".ui5-wiz-root")
+            .should("have.attr", "aria-label", "Order Completion Wizard");
+    });
+
+    it("should use accessibleNameRef over accessibleName when both are provided", () => {
+        cy.mount(
+            <div>
+                <span id="external-label">External Wizard Label</span>
+                <Wizard accessibleName="Internal Label" accessibleNameRef="external-label">
+                    <WizardStep icon="sap-icon://product" selected titleText="Product type"/>
+                    <WizardStep titleText="Product Information" disabled/>
+                </Wizard>
+            </div>
+        );
+
+        cy.get("[ui5-wizard]")
+            .shadow()
+            .find(".ui5-wiz-root")
+            .should("have.attr", "aria-label", "External Wizard Label");
+    });
+
+    it("should fall back to default i18n label when no accessibleName or accessibleNameRef is provided", () => {
+        cy.mount(
+            <Wizard>
+                <WizardStep icon="sap-icon://product" selected titleText="Product type"/>
+            </Wizard>
+        );
+
+        cy.get("[ui5-wizard]")
+            .shadow()
+            .find(".ui5-wiz-root")
+            .should("have.attr", "aria-label", "Wizard");
+    });
+
     it("Disabled step should not be interactive", () => {
         cy.mount(
             <Wizard>

packages/fiori/src/Wizard.ts

@@ -15,6 +15,7 @@ import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import type Button from "@ui5/webcomponents/dist/Button.js";
 import type WizardContentLayout from "./types/WizardContentLayout.js";
@@ -210,6 +211,24 @@ class Wizard extends UI5Element {
 	@property()
 	contentLayout: `${WizardContentLayout}` = "MultipleSteps";
 
+	/**
+	 * Defines the accessible ARIA name of the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.14.0
+	 */
+	@property()
+	accessibleName?: string;
+
+	/**
+	 * Receives id(or many ids) of the elements that label the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.14.0
+	 */
+	@property()
+	accessibleNameRef?: string;
+
 	/**
 	 * Defines the width of the `ui5-wizard`.
 	 * @private
@@ -811,7 +830,11 @@ class Wizard extends UI5Element {
 		return Wizard.i18nBundle.getText(WIZARD_STEP_INACTIVE);
 	}
 
-	get ariaLabelText() {
+	get ariaLabelText(): string {
+		if (this.accessibleName || this.accessibleNameRef) {
+			return getEffectiveAriaLabelText(this) || Wizard.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+		}
+
 		return Wizard.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
 	}