fix(ui5-date-picker): provide accessible name to the popover (#8693)

Fixes: #8598

packages/main/src/DatePicker.ts

@@ -38,6 +38,7 @@ import {
 	DATEPICKER_DATE_DESCRIPTION,
 	INPUT_SUGGESTIONS_TITLE,
 	FORM_TEXTFIELD_REQUIRED,
+	DATEPICKER_POPOVER_ACCESSIBLE_NAME,
 } from "./generated/i18n/i18n-defaults.js";
 import DateComponentBase from "./DateComponentBase.js";
 import Icon from "./Icon.js";
@@ -704,6 +705,10 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 		return DatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
 	}
 
+	get pickerAccessibleName() {
+		return DatePicker.i18nBundle.getText(DATEPICKER_POPOVER_ACCESSIBLE_NAME);
+	}
+
 	/**
 	 * Defines whether the dialog on mobile should have header
 	 * @private

packages/main/src/DatePickerPopover.hbs

@@ -5,6 +5,7 @@
 	allow-target-overlap
 	placement="Bottom"
 	horizontal-align="Start"
+	accessible-name="{{pickerAccessibleName}}"
 	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"

packages/main/src/DateRangePicker.ts

@@ -5,7 +5,10 @@ import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/In
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
-import { DATERANGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
+import {
+	DATERANGE_DESCRIPTION,
+	DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME,
+} from "./generated/i18n/i18n-defaults.js";
 import DateRangePickerTemplate from "./generated/templates/DateRangePickerTemplate.lit.js";
 
 // Styles
@@ -191,10 +194,20 @@ class DateRangePicker extends DatePicker implements IFormInputElement {
 		return this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;
 	}
 
+	/**
+	 * @override
+	 */
 	get dateAriaDescription() {
 		return DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION);
 	}
 
+	/**
+	 * @override
+	 */
+	get pickerAccessibleName() {
+		return DateRangePicker.i18nBundle.getText(DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME);
+	}
+
 	/**
 	 * @override
 	 */

packages/main/src/DateTimePicker.ts

@@ -31,6 +31,7 @@ import {
 	DATETIME_DESCRIPTION,
 	DATETIME_PICKER_DATE_BUTTON,
 	DATETIME_PICKER_TIME_BUTTON,
+	DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -276,10 +277,20 @@ class DateTimePicker extends DatePicker implements IFormInputElement {
 		return super.phone || this._phoneMode;
 	}
 
+	/**
+	 * @override
+	 */
 	get dateAriaDescription() {
 		return DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);
 	}
 
+	/**
+	 * @override
+	 */
+	get pickerAccessibleName() {
+		return DateTimePicker.i18nBundle.getText(DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME);
+	}
+
 	/**
 	 * Defines whether the dialog on mobile should have header
 	 * @private

packages/main/src/TimePicker.ts

@@ -43,6 +43,7 @@ import {
 	TIMEPICKER_SUBMIT_BUTTON,
 	TIMEPICKER_CANCEL_BUTTON,
 	TIMEPICKER_INPUT_DESCRIPTION,
+	TIMEPICKER_POPOVER_ACCESSIBLE_NAME,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -326,6 +327,10 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		return TimePicker.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
 	}
 
+	get pickerAccessibleName() {
+		return TimePicker.i18nBundle.getText(TIMEPICKER_POPOVER_ACCESSIBLE_NAME);
+	}
+
 	get accInfo() {
 		return {
 			"ariaRoledescription": this.dateAriaDescription,

packages/main/src/TimePickerPopover.hbs

@@ -8,6 +8,7 @@
 	allow-target-overlap
 	_hide-header
 	hide-arrow
+	accessible-name="{{pickerAccessibleName}}"
 	@ui5-close="{{onResponsivePopoverAfterClose}}"
 	@ui5-open="{{onResponsivePopoverAfterOpen}}"
 	@wheel="{{_handleWheel}}"

packages/main/src/i18n/messagebundle.properties

@@ -154,6 +154,15 @@ DATETIME_DESCRIPTION=Date Time Input
 #XACT: Aria information for the Date Range Picker
 DATERANGE_DESCRIPTION=Date Range Input
 
+#XACT: Aria information for the Date Picker popover
+DATEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date
+
+#XACT: Aria information for the Date Time Picker popover
+DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date and Time
+
+#XACT: Aria information for the Date Range Picker popover
+DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date Range
+
 DELETE=Delete
 
 FILEUPLOAD_BROWSE=Browse...
@@ -373,6 +382,9 @@ TIMEPICKER_CANCEL_BUTTON=Cancel
 #XACT: Aria information for the Time Picker
 TIMEPICKER_INPUT_DESCRIPTION=Time Input
 
+#XACT: Aria information for the Time Picker popover
+TIMEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Time
+
 #XACT: Aria information for the Time Picker Clock Dial
 TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial
 

packages/main/test/specs/DatePicker.spec.js

@@ -1393,4 +1393,15 @@ describe("Date Picker Tests", () => {
 		assert.ok(await datepicker.isPickerOpen(), "Datepicker is open");
 		assert.equal(currentPicker, "day", "calendar is opened on days");
 	});
+
+	it("picker popover should have accessible name", async () => {
+		datepicker.id = "#dp";
+		await datepicker.openPicker();
+
+		const popover = await datepicker.getPopover();
+
+		assert.strictEqual(await popover.getAttribute("accessible-name"), "Choose Date", "Picker popover has an accessible name");
+
+		await datepicker.closePicker();
+	});
 });

packages/main/test/specs/DateRangePicker.spec.js

@@ -261,4 +261,16 @@ describe("DateRangePicker general interaction", () => {
 
 		assert.strictEqual(await dateRangePickerInput.getProperty("valueState"), "Negative", "Min and max dates are set correctly");
 	});
+
+	it("picker popover should have accessible name", async () => {
+		const daterangepicker = await browser.$("#daterange-picker3");
+		await daterangepicker.click();
+		await browser.keys("F4");
+
+		const popover = await daterangepicker.shadow$("ui5-responsive-popover");
+
+		assert.strictEqual(await popover.getAttribute("accessible-name"), "Choose Date Range", "Picker popover has an accessible name");
+
+		await browser.keys("Escape");
+	});
 });

packages/main/test/specs/DateTimePicker.spec.js

@@ -289,5 +289,15 @@ describe("DateTimePicker general interaction", () => {
 		assert.strictEqual(await nextButton.hasClass("ui5-calheader-arrowbtn-disabled"), true, "The next button is disabled.");
 	});
 
+	it("picker popover should have accessible name", async () => {
+		await openPickerById("dt1");
+
+		const popover = await getPicker("dt1");
+
+		assert.strictEqual(await popover.getAttribute("accessible-name"), "Choose Date and Time", "Picker popover has an accessible name");
+
+		await closePickerById("dt1");
+	});
+
 	// TO DO: Create new testing page test secondary calendar type behaviour.
 });

packages/main/test/specs/TimePicker.spec.js

@@ -233,4 +233,16 @@ describe("TimePicker general interaction", () => {
 
 		assert.strictEqual(await timepickerPopover.getProperty("open"), true, "The popover is opened");
 	})
+
+	it("picker popover should have accessible name", async () => {
+		const timepicker = await browser.$("#timepicker");
+		await timepicker.click();
+		await browser.keys("F4");
+
+		const popover = await timepicker.shadow$("ui5-responsive-popover");
+
+		assert.strictEqual(await popover.getAttribute("accessible-name"), "Choose Time", "Picker popover has an accessible name");
+
+		await browser.keys("Escape");
+	});
 });