fix(ui5-date-*): components accessibility improved (#3163)

- ui5-date-picker: Replace aria-owns with aria-controls.
 - ui5-datetime-picker: Change aria-roledescription's value to Date Time Input
 - ui5-daterange-picker: Change aria-roledescription's value to Date Range Input

Fixes #3002

Author: unazko

packages/main/src/DatePicker.js

@@ -633,7 +633,7 @@ class DatePicker extends DateComponentBase {
 			"ariaHasPopup": "true",
 			"ariaAutoComplete": "none",
 			"role": "combobox",
-			"ariaOwns": `${this._id}-responsive-popover`,
+			"ariaControls": `${this._id}-responsive-popover`,
 			"ariaExpanded": this.isOpen(),
 			"ariaRequired": this.required,
 			"ariaLabel": getEffectiveAriaLabelText(this),

packages/main/src/DateRangePicker.js

@@ -2,6 +2,7 @@ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 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";
 
 // Styles
 import DateRangePickerCss from "./generated/themes/DateRangePicker.css.js";
@@ -150,6 +151,10 @@ class DateRangePicker extends DatePicker {
 		return this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;
 	}
 
+	get dateAriaDescription() {
+		return this.i18nBundle.getText(DATERANGE_DESCRIPTION);
+	}
+
 	/**
 	 * @override
 	 */

packages/main/src/DateTimePicker.js

@@ -15,6 +15,7 @@ import TimeSelection from "./TimeSelection.js";
 import {
 	TIMEPICKER_SUBMIT_BUTTON,
 	TIMEPICKER_CANCEL_BUTTON,
+	DATETIME_DESCRIPTION,
 	DATETIME_PICKER_DATE_BUTTON,
 	DATETIME_PICKER_TIME_BUTTON,
 } from "./generated/i18n/i18n-defaults.js";
@@ -295,6 +296,10 @@ class DateTimePicker extends DatePicker {
 		return super.phone || this._phoneMode;
 	}
 
+	get dateAriaDescription() {
+		return this.i18nBundle.getText(DATETIME_DESCRIPTION);
+	}
+
 	/**
 	 * Defines whether the dialog on mobile should have header
 	 * @private

packages/main/src/Input.hbs

@@ -18,7 +18,7 @@
 			placeholder="{{_placeholder}}"
 			maxlength="{{maxlength}}"
 			role="{{accInfo.input.role}}"
-			aria-owns="{{accInfo.input.ariaOwns}}"
+			aria-controls="{{accInfo.input.ariaControls}}"
 			?aria-invalid="{{accInfo.input.ariaInvalid}}"
 			aria-haspopup="{{accInfo.input.ariaHasPopup}}"
 			aria-describedby="{{accInfo.input.ariaDescribedBy}}"

packages/main/src/Input.js

@@ -1093,7 +1093,7 @@ class Input extends UI5Element {
 				"ariaHasPopup": this._inputAccInfo.ariaHasPopup ? this._inputAccInfo.ariaHasPopup : ariaHasPopupDefault,
 				"ariaAutoComplete": this._inputAccInfo.ariaAutoComplete ? this._inputAccInfo.ariaAutoComplete : ariaAutoCompleteDefault,
 				"role": this._inputAccInfo && this._inputAccInfo.role,
-				"ariaOwns": this._inputAccInfo && this._inputAccInfo.ariaOwns,
+				"ariaControls": this._inputAccInfo && this._inputAccInfo.ariaControls,
 				"ariaExpanded": this._inputAccInfo && this._inputAccInfo.ariaExpanded,
 				"ariaDescription": this._inputAccInfo && this._inputAccInfo.ariaDescription,
 				"ariaLabel": (this._inputAccInfo && this._inputAccInfo.ariaLabel) || getEffectiveAriaLabelText(this),

packages/main/src/i18n/messagebundle.properties

@@ -67,6 +67,12 @@ DATEPICKER_OPEN_ICON_TITLE=Open Picker
 #XACT: Aria information for the Date Picker
 DATEPICKER_DATE_DESCRIPTION=Date Input
 
+#XACT: Aria information for the Date Time Picker
+DATETIME_DESCRIPTION=Date Time Input
+
+#XACT: Aria information for the Date Range Picker
+DATERANGE_DESCRIPTION=Date Range Input
+
 DELETE=Delete
 
 FILEUPLOAD_BROWSE=Browse...