diff --git a/packages/main/cypress/specs/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/DynamicDateRange.cy.tsx
index 2d10e919ab014..0be4615806d71 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,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(
+ <>
+
+
+ >
+ );
+
+ 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(
+ <>
+
+
+
+ >
+ );
+
+ 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 2368c172c1dbf..ca7dced5834db 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,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);
}
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 @@
Single Last/Next Options
>
+
+
Label For
+ Pick a date
+
+
+