feat(ui5-dynamic-date-range): support label for

packages/main/cypress/specs/DynamicDateRange.cy.tsx

@@ -1,4 +1,5 @@
 import DynamicDateRange, { IDynamicDateRangeOption } from '../../src/DynamicDateRange.js';
+import Label from "../../src/Label.js";
 import SingleDate from '../../src/dynamic-date-range-options/SingleDate.js';
 import DateRange from '../../src/dynamic-date-range-options/DateRange.js';
 import Today from '../../src/dynamic-date-range-options/Today.js';
@@ -271,6 +272,40 @@ describe("DynamicDateRange Component", () => {
 			.find("div[data-sap-timestamp='1747267200']")
 			.should("have.class", "ui5-dp-item--selected"); // Timestamp for May 15, 2025
 	});
+
+	it("should focus the input when the associated label is clicked", () => {
+		cy.mount(
+			<>
+				<Label for="ddr">Pick a date</Label>
+				<DynamicDateRange id="ddr" options="TODAY, DATE, DATERANGE"></DynamicDateRange>
+			</>
+		);
+
+		cy.get("[ui5-label]")
+			.realClick();
+
+		cy.get("[ui5-dynamic-date-range]")
+			.shadow()
+			.find("[ui5-input]")
+			.should("be.focused");
+	});
+
+	it("should apply accessibleNameRef as aria-label on the inner input", () => {
+		cy.mount(
+			<>
+				<Label id="ddr-label-1">Date Range</Label>
+				<Label id="ddr-label-2">Label</Label>
+				<DynamicDateRange options="TODAY, DATE" accessibleNameRef="ddr-label-1 ddr-label-2"></DynamicDateRange>
+			</>
+		);
+
+		cy.get("[ui5-dynamic-date-range]")
+			.shadow()
+			.find("[ui5-input]")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-label", "Date Range Label");
+	});
 });
 
 describe("DynamicDateRange Last/Next Options", () => {

packages/main/src/DynamicDateRange.ts

@@ -10,6 +10,10 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
 import { isF4, isShow } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	getAssociatedLabelForTexts,
+	getAllAccessibleNameRefTexts,
+} from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import DynamicDateRangeTemplate from "./DynamicDateRangeTemplate.js";
 import IconMode from "./types/IconMode.js";
 import type Input from "./Input.js";
@@ -184,6 +188,15 @@ class DynamicDateRange extends UI5Element {
 	@property({ type: Boolean })
 	open = false;
 
+	/**
+	 * Receives id(or many ids) of the elements that label the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.25.0
+	 */
+	@property()
+	accessibleNameRef?: string;
+
 	@property({ type: Object })
 	_currentOption?: IDynamicDateRangeOption;
 
@@ -285,6 +298,16 @@ class DynamicDateRange extends UI5Element {
 		return isDesktop() ? IconMode.Decorative : IconMode.Interactive;
 	}
 
+	get _ariaLabelText() {
+		return getAllAccessibleNameRefTexts(this) || getAssociatedLabelForTexts(this) || "";
+	}
+
+	get _accInfo() {
+		return {
+			ariaLabel: this._ariaLabelText || undefined,
+		};
+	}
+
 	get tooltipNavigationIcon() {
 		return DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP);
 	}

packages/main/src/DynamicDateRangeInputTemplate.tsx

@@ -11,6 +11,7 @@ export default function DynamicDateRangeInputTemplate(this: DynamicDateRange) {
 				id={`${this._id}-inner`}
 				class="ui5-dynamic-date-range-input"
 				value={this.value && this.getOption(this.value?.operator)?.format(this.value)}
+				_inputAccInfo={this._accInfo}
 				onChange={this.onInputChange}
 				onKeyDown={this.onInputKeyDown}
 			>

packages/main/test/pages/DynamicDateRange.html

@@ -51,6 +51,15 @@ <h3>Single Last/Next Options</h3>
 			></ui5-dynamic-date-range>
 		</div>
 
+		<div>
+			<h3>Label For</h3>
+			<ui5-label for="ddr-with-label">Pick a date</ui5-label>
+			<ui5-dynamic-date-range
+				id="ddr-with-label"
+				options="TODAY, YESTERDAY, TOMORROW, DATE, DATERANGE"
+			></ui5-dynamic-date-range>
+		</div>
+
 		<script>
 			const lastNext = document.getElementById("last-next");
 			lastNext.addEventListener("ui5-change", (event) => {