feat(ui5-datepicker): implement ACC support

packages/main/src/DatePicker.hbs

@@ -11,16 +11,21 @@
 			?disabled="{{disabled}}"
 			?readonly="{{readonly}}"
 			value-state="{{valueState}}"
+			aria-autocomplete="none"
+			aria-haspopup
 			@ui5-change="{{_handleInputChange}}"
 			@ui5-input="{{_handleInputLiveChange}}"
 			data-sap-focus-ref
+			._accInfo ="{{accInfo}}"
 	>
 		{{#unless readonly}}
 			<ui5-icon
 				slot="icon"
 				src="sap-icon://appointment-2"
 				class="{{classes.icon}} ui5-datepicker-icon"
 				tabindex="-1"
+				accessible-name="{{openIconTitle}}"
+				show-tooltip
 				@click="{{togglePicker}}"
 			></ui5-icon>
 		{{/unless}}
@@ -46,6 +51,6 @@
 				@ui5-selectedDatesChange="{{_calendar.onSelectedDatesChange}}"
 		></ui5-calendar>
 	</ui5-popover>
-
+	<span id="{{_id}}-date" class="ui5-hidden-text">{{dateAriaDescriber}}</span>
 	<slot name="formSupport"></slot>
 </div>

packages/main/src/DatePicker.js

@@ -13,6 +13,8 @@ import CalendarDate from "@ui5/webcomponents-base/dist/dates/CalendarDate.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isShow } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import "./icons/appointment-2.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_TYPE } from "./generated/i18n/i18n-defaults.js";
 import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import Calendar from "./Calendar.js";
@@ -285,6 +287,8 @@ class DatePicker extends UI5Element {
 			onSelectedDatesChange: this._handleCalendarSelectedDatesChange.bind(this),
 			selectedDates: [],
 		};
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -397,6 +401,25 @@ class DatePicker extends UI5Element {
 		return this._oDateFormat;
 	}
 
+	get accInfo() {
+		return {
+			"ariaDescribedBy": `${this._id}-date`,
+			"ariaHasPopup": "true",
+			"ariaAutoComplete": "none",
+			"roleAttribute": "combobox",
+			"ariaOwns": `${this._id}-popover`,
+			"ariaExpanded": this.isOpen(),
+		};
+	}
+
+	get openIconTitle() {
+		return this.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
+	}
+
+	get dateAriaDescriber() {
+		return this.i18nBundle.getText(DATEPICKER_DATE_TYPE);
+	}
+
 	_getPopover() {
 		return this.shadowRoot.querySelector("ui5-popover");
 	}
@@ -544,6 +567,7 @@ class DatePicker extends UI5Element {
 			Popover.define(),
 			Calendar.define(),
 			Input.define(),
+			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 
 		super.define(...params);

packages/main/src/Input.hbs

@@ -16,10 +16,13 @@
 			?required="{{required}}"
 			.value="{{value}}"
 			placeholder="{{inputPlaceholder}}"
+			role="{{roleAttribute}}"
+			aria-owns="{{ariaOwns}}"
 			aria-invalid="{{ariaInvalid}}"
 			aria-haspopup="{{ariaHasPopup}}"
 			aria-describedby="{{ariaDescribedBy}}"
 			aria-autocomplete="{{ariaAutoComplete}}"
+			aria-expanded="{{ariaExpanded}}"
 			@input="{{_handleInput}}"
 			@change="{{_handleChange}}"
 			data-sap-no-tab-ref

packages/main/src/Input.js

@@ -220,6 +220,10 @@ const metadata = {
 		_popover: {
 			type: Object,
 		},
+
+		_accInfo: {
+			type: Object,
+		},
 	},
 	events: /** @lends  sap.ui.webcomponents.main.Input.prototype */ {
 		/**
@@ -581,17 +585,47 @@ class Input extends UI5Element {
 	}
 
 	get ariaDescribedBy() {
+		if (this._accInfo && this._accInfo.ariaDescribedBy) {
+			return `${this.suggestionsTextId} ${this.valueStateTextId} ${this._accInfo.ariaDescribedBy}`.trim();
+		}
 		return `${this.suggestionsTextId} ${this.valueStateTextId}`.trim();
 	}
 
 	get ariaHasPopup() {
+		if (this._accInfo && this._accInfo.ariaHasPopup) {
+			return this._accInfo.ariaHasPopup;
+		}
 		return this.showSuggestions ? "true" : undefined;
 	}
 
 	get ariaAutoComplete() {
+		if (this._accInfo && this._accInfo.ariaAutoComplete) {
+			return this._accInfo.ariaAutoComplete;
+		}
 		return this.showSuggestions ? "list" : undefined;
 	}
 
+	get roleAttribute() {
+		if (this._accInfo && this._accInfo.roleAttribute) {
+			return this._accInfo.roleAttribute;
+		}
+		return "";
+	}
+
+	get ariaOwns() {
+		if (this._accInfo && this._accInfo.ariaOwns) {
+			return this._accInfo.ariaOwns;
+		}
+		return "";
+	}
+
+	get ariaExpanded() {
+		if (this._accInfo && this._accInfo.ariaExpanded !== undefined) {
+			return this._accInfo.ariaExpanded;
+		}
+		return "";
+	}
+
 	get hasValueState() {
 		return this.valueState !== ValueState.None;
 	}

packages/main/src/i18n/messagebundle.properties

@@ -25,6 +25,12 @@ BUTTON_ARIA_TYPE_REJECT=Negative Action
 #XACT: ARIA announcement for the emphasized button
 BUTTON_ARIA_TYPE_EMPHASIZED=Emphasized
 
+#XACT: Aria information for the Date Picker
+DATEPICKER_DATE_TYPE=Date
+
+#XACT: DatePicker 'Open Picker' icon title
+DATEPICKER_OPEN_ICON_TITLE=Open Picker
+
 #XTXT
 ICON_ACTION_SETTINGS=Settings
 

packages/main/src/themes/DatePicker.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 }