fix(ui5-date-picker): adjust value state message text

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

@@ -1757,4 +1757,85 @@ describe("Accessibility", () => {
 			.find("span#descr")
 			.should("have.text", DESCRIPTION);
 	});
+
+	describe("Accessibility - ariaValueStateHiddenText", () => {
+		it("should correctly extract text from nested slot structure in value state messages", () => {
+			const ERROR_MESSAGE = "Invalid date format";
+
+			cy.mount(
+				<DatePicker valueState="Negative">
+					<div slot="valueStateMessage">{ERROR_MESSAGE}</div>
+				</DatePicker>
+			);
+
+			cy.get("[ui5-date-picker]")
+				.as("datePicker");
+
+			// Get the inner datetime input
+			cy.get<DatePicker>("@datePicker")
+				.shadow()
+				.find("[ui5-datetime-input]")
+				.as("datetimeInput");
+
+			// Verify the input has proper value state
+			cy.get("@datetimeInput")
+				.should("have.attr", "value-state", "Negative");
+
+			// Test the ariaValueStateHiddenText getter directly
+			cy.get("@datetimeInput")
+				.then(($input) => {
+					const datetimeInput = $input[0] as any;
+					const ariaText = datetimeInput.ariaValueStateHiddenText;
+
+					// Should contain both the value state type and the custom message
+					expect(ariaText).to.include("Error");
+					expect(ariaText).to.include(ERROR_MESSAGE);
+				});
+
+			// Verify the aria-describedby points to an element with the correct text
+			cy.get("@datetimeInput")
+				.shadow()
+				.find("input")
+				.should("have.attr", "aria-describedby")
+				.then((describedBy) => {
+					cy.get("@datetimeInput")
+						.shadow()
+						.find(`#${describedBy}`)
+						.should("contain.text", "Error")
+						.and("contain.text", ERROR_MESSAGE);
+				});
+		});
+
+		it("should handle complex nested slot structure from DatePicker forwarding", () => {
+			const CUSTOM_ERROR = "Please select a valid date";
+
+			cy.mount(
+				<DatePicker valueState="Critical">
+					<div slot="valueStateMessage">
+						<span>{CUSTOM_ERROR}</span>
+					</div>
+				</DatePicker>
+			);
+
+			cy.get("[ui5-date-picker]")
+				.as("datePicker");
+
+			cy.get<DatePicker>("@datePicker")
+				.shadow()
+				.find("[ui5-datetime-input]")
+				.as("datetimeInput");
+
+			// Test nested slot content extraction
+			cy.get("@datetimeInput")
+				.then(($input) => {
+					const datetimeInput = $input[0] as any;
+					const ariaText = datetimeInput.ariaValueStateHiddenText;
+
+					// Should extract text from nested structure
+					expect(ariaText).to.include("Warning");
+					expect(ariaText).to.include(CUSTOM_ERROR);
+					expect(ariaText.trim()).to.not.be.empty;
+				});
+		});
+	});
 });

packages/main/src/DateTimeInput.ts

@@ -1,4 +1,5 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
 // Styles
 import Input from "./Input.js";
@@ -34,6 +35,40 @@ class DateTimeInput extends Input {
 	get _isMobileDevice() {
 		return !isDesktop() && (isPhone() || isTablet());
 	}
+
+	/**
+	 * Override to handle nested slot structure from DatePicker -> DateTimeInput slot forwarding.
+	 * Assumes DateTimeInput always has slot-within-slot structure for valueStateMessage.
+	 * @override
+	 */
+	get ariaValueStateHiddenText(): string | undefined {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		const valueState = this.valueState !== ValueState.None ? this.valueStateTypeMappings[this.valueState] : "";
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return this.valueStateText ? `${valueState} ${this.valueStateText}` : valueState;
+		}
+
+		// Handle the specific nested slot case: outer slot -> inner slot -> actual content
+		if (this.valueStateMessage.length) {
+			const outerSlot = this.valueStateMessage[0];
+			if (outerSlot.tagName === "SLOT") {
+				const assignedNodes = (outerSlot as HTMLSlotElement).assignedNodes({ flatten: true });
+				const textContent = assignedNodes
+					.map(node => node.textContent || "")
+					.join(" ")
+					.trim();
+				return textContent ? `${valueState} ${textContent}` : valueState;
+			}
+			// Fallback for non-slot content
+			return `${valueState} ${outerSlot.textContent || ""}`.trim();
+		}
+
+		return valueState;
+	}
 }
 
 DateTimeInput.define();

packages/main/test/pages/DatePicker.html

@@ -30,6 +30,10 @@
 <body class="datepicker1auto">
 	<div style='width:600px;'>
 
+		<ui5-date-picker value-state="Negative">
+			<div slot="valueStateMessage">Hi</div>
+		</ui5-date-picker>
+
 		<ui5-label for="dpLabel">Deadline</ui5-label>
 		<ui5-date-picker id="dpLabel"></ui5-date-picker>