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 + +
+