feat(ui5-date-picker): provide accessible description API

docs/2-advanced/09-accessibility.md

@@ -213,6 +213,11 @@ The `accessibleDescription` property is currently supported in:
 * [Popover](https://sap.github.io/ui5-webcomponents/nightly/components/Popover/)
 * [ResponsivePopover](https://sap.github.io/ui5-webcomponents/nightly/components/ResponsivePopover/)
 * [Dialog](https://sap.github.io/ui5-webcomponents/nightly/components/Dialog/)
+* [DatePicker](https://sap.github.io/ui5-webcomponents/nightly/components/DatePicker/)
+* [DateRangePicker](https://sap.github.io/ui5-webcomponents/nightly/components/DateRangePicker/)
+* [DateTimePicker](https://sap.github.io/ui5-webcomponents/nightly/components/DateTimePicker/)
+* [TimePicker](https://sap.github.io/ui5-webcomponents/nightly/components/TimePicker/)
+* [FileUploader](https://sap.github.io/ui5-webcomponents/nightly/components/FileUploader/)
 
 ---
 
@@ -241,6 +246,11 @@ The `accessibleDescriptionRef` property is currently supported in:
 * [Popover](https://sap.github.io/ui5-webcomponents/nightly/components/Popover/)
 * [ResponsivePopover](https://sap.github.io/ui5-webcomponents/nightly/components/ResponsivePopover/)
 * [Dialog](https://sap.github.io/ui5-webcomponents/nightly/components/Dialog/)
+* [DatePicker](https://sap.github.io/ui5-webcomponents/nightly/components/DatePicker/)
+* [DateRangePicker](https://sap.github.io/ui5-webcomponents/nightly/components/DateRangePicker/)
+* [DateTimePicker](https://sap.github.io/ui5-webcomponents/nightly/components/DateTimePicker/)
+* [TimePicker](https://sap.github.io/ui5-webcomponents/nightly/components/TimePicker/)
+* [FileUploader](https://sap.github.io/ui5-webcomponents/nightly/components/FileUploader/)
 
 ---
 
@@ -302,6 +312,7 @@ The `accessibilityAttributes` property is currently supported in:
 * [Avatar](https://sap.github.io/ui5-webcomponents/nightly/components/Avatar/)
 * [AvatarGroup](https://sap.github.io/ui5-webcomponents/nightly/components/AvatarGroup/)
 * [Button](https://sap.github.io/ui5-webcomponents/nightly/components/Button/)
+* [Button](https://sap.github.io/ui5-webcomponents/nightly/components/ai/Button/)
 * [Link](https://sap.github.io/ui5-webcomponents/nightly/components/Link/)
 * [ToggleButton](https://sap.github.io/ui5-webcomponents/nightly/components/ToggleButton/)
 * [Link](https://sap.github.io/ui5-webcomponents/nightly/components/Link/)
@@ -311,6 +322,7 @@ The `accessibilityAttributes` property is currently supported in:
 * [FlexibleColumnLayout](https://sap.github.io/ui5-webcomponents/nightly/components/fiori/FlexibleColumnLayout/)
 * [ShellBar](https://sap.github.io/ui5-webcomponents/nightly/components/fiori/ShellBar/)
 * [ShellBarItem](https://sap.github.io/ui5-webcomponents/nightly/components/fiori/ShellBarItem/)
+* [SplitButton](https://sap.github.io/ui5-webcomponents/nightly/components/SplitButton/)
 * [MenuItem](https://sap.github.io/ui5-webcomponents/nightly/components/MenuItem/)
 * [List](https://sap.github.io/ui5-webcomponents/nightly/components/List/)
 

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

@@ -5,6 +5,50 @@ import DatePicker from "../../src/DatePicker.js";
 import Label from "../../src/Label.js";
 
 describe("Date Picker Tests", () => {
+
+		it("accessibleDescription property", () => {
+			const DESCRIPTION = "This is a date picker";
+			cy.mount(<DatePicker accessibleDescription={DESCRIPTION}></DatePicker>);
+
+			cy.get("[ui5-date-picker]")
+				.as("datePicker");
+
+			cy.get<DatePicker>("@datePicker")
+				.ui5DatePickerGetInnerInput()
+				.should("have.attr", "aria-describedby", "descr");
+
+			cy.get<DatePicker>("@datePicker")
+				.shadow()
+				.find("[ui5-datetime-input]")
+				.shadow()
+				.find("span#descr")
+				.should("have.text", DESCRIPTION);
+		});
+
+		it("accessibleDescriptionRef property", () => {
+			const DESCRIPTION = "This is a date picker";
+			cy.mount(
+				<>
+					<p id="datePickerDescription">{DESCRIPTION}</p>
+					<DatePicker accessibleDescriptionRef="datePickerDescription"></DatePicker>
+				</>
+			);
+
+			cy.get("[ui5-date-picker]")
+				.as("datePicker");
+
+			cy.get<DatePicker>("@datePicker")
+				.ui5DatePickerGetInnerInput()
+				.should("have.attr", "aria-describedby", "descr");
+
+			cy.get<DatePicker>("@datePicker")
+				.shadow()
+				.find("[ui5-datetime-input]")
+				.shadow()
+				.find("span#descr")
+				.should("have.text", DESCRIPTION);
+		});
+
 	it("input renders", () => {
 		cy.mount(<DatePicker></DatePicker>);
 
@@ -1549,8 +1593,31 @@ describe("Date Picker Tests", () => {
 			.should("be.visible");
 	});
 
-	it("picker popover should have accessible name", () => {
-		cy.mount(<DatePicker></DatePicker>);
+	it("picker popover accessible name with external label", () => {
+		const LABEL = "Deadline";
+
+		cy.mount(
+			<>
+				<Label for="datePicker">{LABEL}</Label>
+				<DatePicker id="datePicker"></DatePicker>
+			</>
+		);
+
+		cy.get("[ui5-date-picker]")
+			.as("datePicker")
+			.ui5DatePickerValueHelpIconPress();
+
+		cy.get<DatePicker>("@datePicker")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.should("have.attr", "accessible-name", `Choose Date for ${LABEL}`);
+	});
+
+	it("picker popover accessible name", () => {
+		const LABEL = "Deadline";
+		cy.mount(
+			<DatePicker id="datePicker" accessible-name={LABEL}></DatePicker>
+		);
 
 		cy.get("[ui5-date-picker]")
 			.as("datePicker")
@@ -1559,7 +1626,7 @@ describe("Date Picker Tests", () => {
 		cy.get<DatePicker>("@datePicker")
 			.shadow()
 			.find("ui5-responsive-popover")
-			.should("have.attr", "accessible-name", "Choose Date");
+			.should("have.attr", "accessible-name", `Choose Date for ${LABEL}`);
 	});
 });
 

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

@@ -1,6 +1,7 @@
 import "../../dist/Assets.js";
 import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import DateRangePicker from "../../src/DateRangePicker.js";
+import Label from "../../src/Label.js";
 
 type DateTimePickerTemplateOptions = Partial<{
 	formatPattern: string;
@@ -487,8 +488,9 @@ describe("DateRangePicker general interaction", () => {
 			});
 	});
 
-	it("Picker popover should have accessible name", () => {
-		cy.mount(<DateRangePicker></DateRangePicker>);
+	it("Picker popover accessible name", () => {
+		const LABEL = "Deadline";
+		cy.mount(<DateRangePicker accessible-name={LABEL}></DateRangePicker>);
 
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
@@ -505,7 +507,68 @@ describe("DateRangePicker general interaction", () => {
 		cy.get("@dateRangePicker")
 			.shadow()
 			.find("[ui5-responsive-popover]")
-			.should("have.attr", "accessible-name", "Choose Date Range");
+			.should("have.attr", "accessible-name", `Choose Date Range for ${LABEL}`);
+	});
+
+	it("Picker popover accessible name with external label", () => {
+		const LABEL = "Deadline";
+		cy.mount(<>
+			<Label for="dateRangePicker">{LABEL}</Label>
+			<DateRangePicker id="dateRangePicker"></DateRangePicker>
+		</>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerExpectToBeOpen()
+
+		cy.get("@dateRangePicker")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("have.attr", "accessible-name", `Choose Date Range for ${LABEL}`);
+	});
+
+	it("accessibleDescription property", () => {
+		const DESCRIPTION = "Some description";
+		cy.mount(<DateRangePicker accessibleDescription={DESCRIPTION}></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.ui5DatePickerGetInnerInput()
+			.should("have.attr", "aria-describedby", "descr");
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.shadow()
+			.find("span#descr")
+			.should("have.text", DESCRIPTION);
+	});
+
+	it("accessibleDescriptionRef property", () => {
+		const DESCRIPTION = "External description";
+		cy.mount(
+			<>
+				<p id="descr">{DESCRIPTION}</p>
+				<DateRangePicker accessibleDescriptionRef="descr"></DateRangePicker>
+			</>
+		);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-describedby")
+			.and("contain", "descr");
+
+		cy.get("#descr").should("have.text", DESCRIPTION);
 	});
 
 	it("Selected days: accessibility semantics", () => {

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

@@ -1,6 +1,7 @@
 import DateTimePicker from "../../src/DateTimePicker.js";
 import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import Label from "../../src/Label.js";
 
 type DateTimePickerTemplateOptions = Partial<{
 	formatPattern: string;
@@ -467,12 +468,63 @@ describe("DateTimePicker general interaction", () => {
 			});
 	});
 
-	it("picker popover should have accessible name", () => {
-		cy.mount(<DateTimePickerTemplate />);
+	it("picker popover accessible name", () => {
+		const LABEL = "Deadline";
+		cy.mount(<DateTimePicker accessible-name={LABEL}/>);
+
+		cy.get<DateTimePicker>("[ui5-datetime-picker]")
+			.ui5DateTimePickerGetPopover()
+			.should("have.attr", "accessible-name", `Choose Date and Time for ${LABEL}`);
+	});
+
+	it("picker popover accessible name with external label", () => {
+		const LABEL = "Deadline";
+		cy.mount(
+			<>
+				<Label for="dateTimePicker">{LABEL}</Label>
+				<DateTimePicker id="dateTimePicker" />
+			</>
+		);
 
 		cy.get<DateTimePicker>("[ui5-datetime-picker]")
 			.ui5DateTimePickerGetPopover()
-			.should("have.attr", "accessible-name", "Choose Date and Time");
+			.should("have.attr", "accessible-name", `Choose Date and Time for ${LABEL}`);
+	});
+
+	it("accessibleDescription property", () => {
+		const DESCRIPTION = "Some description";
+		cy.mount(<DateTimePicker accessibleDescription={DESCRIPTION}></DateTimePicker>);
+
+		cy.get<DateTimePicker>("[ui5-datetime-picker]")
+			.ui5DatePickerGetInnerInput()
+			.should("have.attr", "aria-describedby", "descr");
+
+		cy.get<DateTimePicker>("[ui5-datetime-picker]")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.shadow()
+			.find("span#descr")
+			.should("have.text", DESCRIPTION);
+	});
+
+	it("accessibleDescriptionRef property", () => {
+		const DESCRIPTION = "External description";
+		cy.mount(
+			<>
+				<p id="descr">{DESCRIPTION}</p>
+				<DateTimePicker accessibleDescriptionRef="descr"></DateTimePicker>
+			</>
+		);
+
+		cy.get<DateTimePicker>("[ui5-datetime-picker]")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-describedby")
+			.and("contain", "descr");
+
+		cy.get("#descr").should("have.text", DESCRIPTION);
 	});
 
 	it("value state", () => {

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

@@ -467,4 +467,29 @@ describe("Accessibility", () => {
 			.find("input[type='file']")
 			.should("have.attr", "aria-label", "Application context");
 	});
+
+	it("accessibleDescription", () => {
+		const DESCRIPTION = "File uploader description";
+		cy.mount(<FileUploader accessibleDescription={DESCRIPTION}></FileUploader>);
+
+		cy.get("[ui5-file-uploader]")
+			.shadow()
+			.find("input[type='file']")
+			.should("have.attr", "aria-description", DESCRIPTION)
+	});
+
+	it("accessibleDescriptionRef", () => {
+		const DESCRIPTION = "External file uploader description";
+		cy.mount(
+			<>
+				<p id="accessibleDescription">{DESCRIPTION}</p>
+				<FileUploader accessibleDescriptionRef="accessibleDescription"></FileUploader>
+			</>
+		);
+
+		cy.get("[ui5-file-uploader]")
+			.shadow()
+			.find("input[type='file']")
+			.should("have.attr", "aria-description", DESCRIPTION)
+	});
 });