From 43fe0e7a1d2b6a853016d5102655f170f0e438c6 Mon Sep 17 00:00:00 2001
From: Diana Petcheva <diana.petcheva@sap.com>
Date: Tue, 14 Jul 2026 13:18:49 +0300
Subject: [PATCH 1/2] fix(ui5-dynamic-date-range): label-for now works on
 component

---
 .../cypress/specs/DynamicDateRange.cy.tsx     | 18 +++++++++++++++
 packages/main/src/DynamicDateRange.ts         | 22 +++++++++++++++++++
 .../src/DynamicDateRangeInputTemplate.tsx     |  1 +
 .../main/test/pages/DynamicDateRange.html     |  9 ++++++++
 4 files changed, 50 insertions(+)

diff --git a/packages/main/cypress/specs/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/DynamicDateRange.cy.tsx
index 2d10e919ab014..55e39ff5c5728 100644
--- a/packages/main/cypress/specs/DynamicDateRange.cy.tsx
+++ b/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,23 @@ 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");
+	});
 });
 
 describe("DynamicDateRange Last/Next Options", () => {
diff --git a/packages/main/src/DynamicDateRange.ts b/packages/main/src/DynamicDateRange.ts
index 2368c172c1dbf..ba69310e1820a 100644
--- a/packages/main/src/DynamicDateRange.ts
+++ b/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,14 @@ class DynamicDateRange extends UI5Element {
 	@property({ type: Boolean })
 	open = false;
 
+	/**
+	 * Receives id(or many ids) of the elements that label the component.
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	accessibleNameRef?: string;
+
 	@property({ type: Object })
 	_currentOption?: IDynamicDateRangeOption;
 
@@ -285,6 +297,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);
 	}
diff --git a/packages/main/src/DynamicDateRangeInputTemplate.tsx b/packages/main/src/DynamicDateRangeInputTemplate.tsx
index 3d3389913a76d..ba9096b001dd2 100644
--- a/packages/main/src/DynamicDateRangeInputTemplate.tsx
+++ b/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}
 			>
diff --git a/packages/main/test/pages/DynamicDateRange.html b/packages/main/test/pages/DynamicDateRange.html
index 6a69decd28d32..4505590d15942 100644
--- a/packages/main/test/pages/DynamicDateRange.html
+++ b/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) => {

From bf841bcd48550097d660a6e6873d6288473ea958 Mon Sep 17 00:00:00 2001
From: Diana Petcheva <diana.petcheva@sap.com>
Date: Thu, 16 Jul 2026 17:27:59 +0300
Subject: [PATCH 2/2] chore: add since and test for property

---
 .../main/cypress/specs/DynamicDateRange.cy.tsx  | 17 +++++++++++++++++
 packages/main/src/DynamicDateRange.ts           |  1 +
 2 files changed, 18 insertions(+)

diff --git a/packages/main/cypress/specs/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/DynamicDateRange.cy.tsx
index 55e39ff5c5728..0be4615806d71 100644
--- a/packages/main/cypress/specs/DynamicDateRange.cy.tsx
+++ b/packages/main/cypress/specs/DynamicDateRange.cy.tsx
@@ -289,6 +289,23 @@ describe("DynamicDateRange Component", () => {
 			.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", () => {
diff --git a/packages/main/src/DynamicDateRange.ts b/packages/main/src/DynamicDateRange.ts
index ba69310e1820a..ca7dced5834db 100644
--- a/packages/main/src/DynamicDateRange.ts
+++ b/packages/main/src/DynamicDateRange.ts
@@ -192,6 +192,7 @@ class DynamicDateRange extends UI5Element {
 	 * Receives id(or many ids) of the elements that label the component.
 	 * @default undefined
 	 * @public
+	 * @since 2.25.0
 	 */
 	@property()
 	accessibleNameRef?: string;