@ui5/webcomponents 0.0.0-b4cbc43ba → 0.0.0-b6f02e4b3

package/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";
@@ -47,7 +48,7 @@ const metadata = {
  * For the <code>ui5-daterange-picker</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/DateRangePicker.js";</code>
+ * <code>import "@ui5/webcomponents/dist/DateRangePicker.js";</code>
  *
  * <h3>Keyboard Handling</h3>
  * The <code>ui5-daterange-picker</code> provides advanced keyboard handling.
@@ -83,14 +84,45 @@ class DateRangePicker extends DatePicker {
 		return [DatePicker.styles, DateRangePickerCss];
 	}
 
-	get _firstDateTimestamp() {
+	constructor() {
+		super();
+		this._prevDelimiter = null;
+	}
+
+	/**
+	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
+	 *
+	 * @readonly
+	 * @type { Date }
+	 * @public
+	 */
+	get dateValue() {
+		return null;
+	}
+
+	/**
+	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
+	 *
+	 * @readonly
+	 * @type { Date }
+	 * @public
+	 */
+	get dateValueUTC() {
+		return null;
+	}
+
+	get _startDateTimestamp() {
 		return this._extractFirstTimestamp(this.value);
 	}
 
-	get _lastDateTimestamp() {
+	get _endDateTimestamp() {
 		return this._extractLastTimestamp(this.value);
 	}
 
+	get _tempTimestamp() {
+		return this._tempValue && this.getFormat().parse(this._tempValue, true).getTime() / 1000;
+	}
+
 	/**
 	 * Required by DatePicker.js
 	 * @override
@@ -104,7 +136,7 @@ class DateRangePicker extends DatePicker {
 	 * @override
 	 */
 	get _calendarTimestamp() {
-		return this._firstDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
+		return this._tempTimestamp || this._startDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
 	}
 
 	/**
@@ -122,25 +154,25 @@ class DateRangePicker extends DatePicker {
 	}
 
 	/**
-	 * Currently selected first date represented as JavaScript Date instance.
+	 * Returns the start date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
-	get firstDateValue() {
-		return CalendarDate.fromTimestamp(this._firstDateTimestamp * 1000).toLocalJSDate();
+	get startDateValue() {
+		return CalendarDate.fromTimestamp(this._startDateTimestamp * 1000).toLocalJSDate();
 	}
 
 	/**
-	 * Currently selected last date represented as JavaScript Date instance.
+	 * Returns the end date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
-	get lastDateValue() {
-		return CalendarDate.fromTimestamp(this._lastDateTimestamp * 1000).toLocalJSDate();
+	get endDateValue() {
+		return CalendarDate.fromTimestamp(this._endDateTimestamp * 1000).toLocalJSDate();
 	}
 
 	/**
@@ -150,6 +182,10 @@ class DateRangePicker extends DatePicker {
 		return this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;
 	}
 
+	get dateAriaDescription() {
+		return DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION);
+	}
+
 	/**
 	 * @override
 	 */
@@ -160,6 +196,14 @@ class DateRangePicker extends DatePicker {
 		input.setCaretPosition(caretPos); // Return the caret on the previous position after rendering
 	}
 
+	/**
+	 * @override
+	 */
+	 onResponsivePopoverAfterClose() {
+		this._tempValue = ""; // reset _tempValue on popover close
+		super.onResponsivePopoverAfterClose();
+	}
+
 	/**
 	 * @override
 	 */
@@ -206,8 +250,6 @@ class DateRangePicker extends DatePicker {
 
 		const newValue = this._buildValue(...event.detail.dates); // the value will be normalized so we don't need to order them here
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
-		this._tempValue = "";
-		this._focusInputAfterClose = true;
 		this.closePicker();
 	}
 
@@ -215,7 +257,7 @@ class DateRangePicker extends DatePicker {
 	 * @override
 	 */
 	async _modifyDateValue(amount, unit) {
-		if (!this._lastDateTimestamp) { // If empty or only one date -> treat as datepicker entirely
+		if (!this._endDateTimestamp) { // If empty or only one date -> treat as datepicker entirely
 			return super._modifyDateValue(amount, unit);
 		}
 
@@ -224,17 +266,17 @@ class DateRangePicker extends DatePicker {
 		let newValue;
 
 		if (caretPos <= this.value.indexOf(this._effectiveDelimiter)) { // The user is focusing the first date -> change it and keep the seoond date
-			const firstDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._firstDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
-			const newFirstDateTimestamp = firstDateModified.valueOf() / 1000;
-			if (newFirstDateTimestamp > this._lastDateTimestamp) { // dates flipped -> move the caret to the same position but on the last date
+			const startDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._startDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
+			const newStartDateTimestamp = startDateModified.valueOf() / 1000;
+			if (newStartDateTimestamp > this._endDateTimestamp) { // dates flipped -> move the caret to the same position but on the last date
 				caretPos += Math.ceil(this.value.length / 2);
 			}
-			newValue = this._buildValue(newFirstDateTimestamp, this._lastDateTimestamp); // the value will be normalized so we don't try to order them here
+			newValue = this._buildValue(newStartDateTimestamp, this._endDateTimestamp); // the value will be normalized so we don't try to order them here
 		} else {
-			const lastDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._lastDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
-			const newLastDateTimestamp = lastDateModified.valueOf() / 1000;
-			newValue = this._buildValue(this._firstDateTimestamp, newLastDateTimestamp); // the value will be normalized so we don't try to order them here
-			if (newLastDateTimestamp < this._firstDateTimestamp) { // dates flipped -> move the caret to the same position but on the first date
+			const endDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._endDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
+			const newEndDateTimestamp = endDateModified.valueOf() / 1000;
+			newValue = this._buildValue(this._startDateTimestamp, newEndDateTimestamp); // the value will be normalized so we don't try to order them here
+			if (newEndDateTimestamp < this._startDateTimestamp) { // dates flipped -> move the caret to the same position but on the first date
 				caretPos -= Math.ceil(this.value.length / 2);
 			}
 		}
@@ -249,7 +291,13 @@ class DateRangePicker extends DatePicker {
 	}
 
 	_splitValueByDelimiter(value) {
-		return value.split(this._effectiveDelimiter).map(date => date.trim()); // just split by delimiter and trim spaces
+		const valuesArray = [];
+		const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
+
+		valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
+		valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+
+		return valuesArray;
 	}
 
 	/**
@@ -287,6 +335,7 @@ class DateRangePicker extends DatePicker {
 	 * @private
 	 */
 	_buildValue(firstDateTimestamp, lastDateTimestamp) {
+		this._prevDelimiter = this._effectiveDelimiter;
 		if (firstDateTimestamp) {
 			const firstDateString = this._getStringFromTimestamp(firstDateTimestamp * 1000);
 

package/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";
@@ -101,9 +102,6 @@ const metadata = {
  * </ul>
  *
  * Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
- * <br><br>
- * As most of the input based components, the <code>DateTimePicker</code> supports properties,
- * such as: <code>disabled</code>, <code>readonly</code>, <code>valueState</code> and  <code>placeholder</code>.
  *
  * <h3>Formatting</h3>
  *
@@ -145,7 +143,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/DateTimePicker.js";</code>
+ * <code>import "@ui5/webcomponents/dist/DateTimePicker.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -236,6 +234,9 @@ class DateTimePicker extends DatePicker {
 				"ui5-dt-cal--hidden": this.phone && this.showTimeView,
 				"ui5-dt-time--hidden": this.phone && this.showDateView,
 			},
+			footer: {
+				"ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView),
+			},
 		};
 	}
 
@@ -264,19 +265,19 @@ class DateTimePicker extends DatePicker {
 	}
 
 	get btnOKLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+		return DateTimePicker.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
 	}
 
 	get btnCancelLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+		return DateTimePicker.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
 	}
 
 	get btnDateLabel() {
-		return this.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
+		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
 	}
 
 	get btnTimeLabel() {
-		return this.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
+		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
 	}
 
 	get showFooter() {
@@ -295,6 +296,10 @@ class DateTimePicker extends DatePicker {
 		return super.phone || this._phoneMode;
 	}
 
+	get dateAriaDescription() {
+		return DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);
+	}
+
 	/**
 	 * Defines whether the dialog on mobile should have header
 	 * @private
@@ -312,11 +317,13 @@ class DateTimePicker extends DatePicker {
 	 */
 	onSelectedDatesChange(event) {
 		event.preventDefault();
+		const dateTimePickerContent = event.path ? event.path[1] : event.composedPath()[1];
 
 		this._previewValues = {
 			...this._previewValues,
 			calendarTimestamp: event.detail.timestamp,
 			calendarValue: event.detail.values[0],
+			timeSelectionValue: dateTimePickerContent.lastChild.value,
 		};
 	}
 
@@ -363,7 +370,7 @@ class DateTimePicker extends DatePicker {
 			this.fireEvent("value-changed", { value: this.value, valid });
 		}
 
-		this._focusInputAfterClose = true;
+		this._updateValueState();
 		this.closePicker();
 	}
 
@@ -387,7 +394,6 @@ class DateTimePicker extends DatePicker {
 		}
 	}
 
-
 	/**
 	 * @override
 	 */

package/src/DateTimePickerPopover.hbs

@@ -4,10 +4,10 @@
 {{#*inline "header"}}
 	{{#if phone}}
 		<div class="ui5-dt-picker-header">
-			<ui5-segmentedbutton style="width: 8rem">
-				<ui5-togglebutton key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-togglebutton>
-				<ui5-togglebutton key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-togglebutton>
-			</ui5-segmentedbutton>
+			<ui5-segmented-button class="ui5-dt-picker-toggle-button">
+				<ui5-toggle-button key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-toggle-button>
+				<ui5-toggle-button key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-toggle-button>
+			</ui5-segmented-button>
 		</div>
 	{{/if}}
 {{/inline}}
@@ -18,12 +18,15 @@
 			class="ui5-dt-cal {{classes.dateTimeView}}"
 			id="{{_id}}-calendar"
 			primary-calendar-type="{{_primaryCalendarType}}"
+			secondary-calendar-type="{{secondaryCalendarType}}"
 			format-pattern="{{_formatPattern}}"
 			timestamp="{{_calendarTimestamp}}"
 			.selectionMode="{{_calendarSelectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
+			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-press="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"
 			._currentPicker="{{_calendarCurrentPicker}}"
 		>
@@ -42,6 +45,7 @@
 				value="{{_timeSelectionValue}}"
 				format-pattern="{{_formatPattern}}"
 				._currentSlider="{{_currentTimeSlider}}"
+				._calendarType="{{_primaryCalendarType}}"
 				@ui5-change="{{onTimeSelectionChange}}"
 				@ui5-slider-change="{{onTimeSliderChange}}"
 		></ui5-time-selection>
@@ -49,7 +53,7 @@
 {{/inline}}
 
 {{#*inline "footer"}}
-	<div slot="footer" class="ui5-dt-picker-footer">
+	<div slot="footer" class="ui5-dt-picker-footer {{classes.footer}}">
 		<ui5-button
 			id="ok"
 			class="ui5-dt-picker-action"

package/src/DayPicker.hbs

@@ -6,9 +6,10 @@
 	@click={{_onclick}}
 	@mouseover={{_onmouseover}}
 	@focusin={{_onfocusin}}
+	@focusout={{_onfocusout}}
 >
 
-	<div id="{{_id}}-content" class="ui5-dp-content" role="grid" aria-roledescription="Calendar">
+	<div id="{{_id}}-content" class="ui5-dp-content" role="grid" aria-roledescription="{{ariaRoledescription}}">
 		<div role="row" class="ui5-dp-days-names-container">
 			{{#each _dayNames}}
 				<div
@@ -22,7 +23,7 @@
 		</div>
 		{{#each _weeks}}
 			{{#if this.length}}
-				<div style="display: flex;" role="row">
+				<div class="ui5-dp-weeks-row" role="row">
 					{{#each this}}
 						{{#if this.timestamp}}
 							<div
@@ -38,8 +39,13 @@
 										class="ui5-dp-daytext"
 										data-sap-timestamp="{{this.timestamp}}"
 									>
-											{{this.iDay}}
+										{{this.day}}
 									</span>
+									{{#if this._isSecondaryCalendarType}}
+										<span class="ui5-dp-daytext ui5-dp-daysectext" >
+											{{this.secondDay}}
+										</span>
+									{{/if}}
 							</div>
 						{{else}}
 							{{#unless this.isHidden}}

package/src/DayPicker.js

@@ -17,8 +17,10 @@ import {
 	isPageUp,
 	isPageDown,
 	isPageUpShift,
+	isPageUpAlt,
 	isPageUpShiftCtrl,
 	isPageDownShift,
+	isPageDownAlt,
 	isPageDownShiftCtrl,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -184,14 +186,17 @@ class DayPicker extends CalendarPart {
 
 		const firstDayOfWeek = this._getFirstDayOfWeek();
 		const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
-		const nonWorkingDayLabel = this.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
-		const todayLabel = this.i18nBundle.getText(DAY_PICKER_TODAY);
+		const secondaryMonthsNames = this.hasSecondaryCalendarType && localeData.getMonths("wide", this.secondaryCalendarType);
+		const nonWorkingDayLabel = DayPicker.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
+		const todayLabel = DayPicker.i18nBundle.getText(DAY_PICKER_TODAY);
 		const tempDate = this._getFirstDay(); // date that will be changed by 1 day 42 times
 		const todayDate = CalendarDate.fromLocalJSDate(new Date(), this._primaryCalendarType); // current day date - calculate once
 		const calendarDate = this._calendarDate; // store the _calendarDate value as this getter is expensive and degrades IE11 perf
 		const minDate = this._minDate; // store the _minDate (expensive getter)
 		const maxDate = this._maxDate; // store the _maxDate (expensive getter)
 
+		const tempSecondDate = this.hasSecondaryCalendarType && this._getSecondaryDay(tempDate);
+
 		let week = [];
 		for (let i = 0; i < DAYS_IN_WEEK * 6; i++) { // always show 6 weeks total, 42 days to avoid jumping
 			const timestamp = tempDate.valueOf() / 1000; // no need to round because CalendarDate does it
@@ -212,15 +217,20 @@ class DayPicker extends CalendarPart {
 
 			const nonWorkingAriaLabel = isWeekend ? `${nonWorkingDayLabel} ` : "";
 			const todayAriaLabel = isToday ? `${todayLabel} ` : "";
+			const ariaLabel = this.hasSecondaryCalendarType
+				? `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}; ${secondaryMonthsNames[tempSecondDate.getMonth()]} ${tempSecondDate.getDate()}, ${tempSecondDate.getYear()}`
+				: `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`;
 
 			const day = {
 				timestamp: timestamp.toString(),
 				focusRef: isFocused,
 				_tabIndex: isFocused ? "0" : "-1",
 				selected: isSelected,
-				iDay: tempDate.getDate(),
+				day: tempDate.getDate(),
+				secondDay: this.hasSecondaryCalendarType && tempSecondDate.getDate(),
+				_isSecondaryCalendarType: this.hasSecondaryCalendarType,
 				classes: `ui5-dp-item ui5-dp-wday${dayOfTheWeek}`,
-				ariaLabel: `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`,
+				ariaLabel,
 				ariaSelected: isSelected ? "true" : "false",
 				ariaDisabled: isOtherMonth ? "true" : undefined,
 				disabled: isDisabled,
@@ -249,10 +259,15 @@ class DayPicker extends CalendarPart {
 			if (isWeekend) {
 				day.classes += " ui5-dp-item--weeekend";
 			}
+
 			if (isDisabled) {
 				day.classes += " ui5-dp-item--disabled";
 			}
 
+			if (this.hasSecondaryCalendarType) {
+				day.classes += " ui5-dp-item--withsecondtype";
+			}
+
 			week.push(day);
 
 			if (dayOfTheWeek === DAYS_IN_WEEK - 1) { // 0-indexed so 6 is the last day of the week
@@ -268,6 +283,9 @@ class DayPicker extends CalendarPart {
 			}
 
 			tempDate.setDate(tempDate.getDate() + 1);
+			if (this.hasSecondaryCalendarType) {
+				tempSecondDate.setDate(tempSecondDate.getDate() + 1);
+			}
 		}
 	}
 
@@ -290,7 +308,7 @@ class DayPicker extends CalendarPart {
 		this._dayNames = [];
 		this._dayNames.push({
 			classes: "ui5-dp-dayname",
-			name: this.i18nBundle.getText(DAY_PICKER_WEEK_NUMBER_TEXT),
+			name: DayPicker.i18nBundle.getText(DAY_PICKER_WEEK_NUMBER_TEXT),
 		});
 		for (let i = 0; i < DAYS_IN_WEEK; i++) {
 			dayOfTheWeek = i + this._getFirstDayOfWeek();
@@ -307,6 +325,10 @@ class DayPicker extends CalendarPart {
 		}
 
 		this._dayNames[1].classes += " ui5-dp-firstday";
+
+		if (this.shouldHideWeekNumbers) {
+			this._dayNames.shift();
+		}
 	}
 
 	onAfterRendering() {
@@ -319,6 +341,10 @@ class DayPicker extends CalendarPart {
 		this._autoFocus = true;
 	}
 
+	_onfocusout() {
+		this._autoFocus = false;
+	}
+
 	/**
 	 * Tells if the day is selected (dark blue)
 	 * @param timestamp
@@ -430,7 +456,6 @@ class DayPicker extends CalendarPart {
 		}
 	}
 
-
 	_addTimestampToSelection(timestamp) {
 		if (!this.selectedDates.includes(timestamp)) {
 			this.selectedDates = [...this.selectedDates, timestamp];
@@ -482,7 +507,6 @@ class DayPicker extends CalendarPart {
 		}
 	}
 
-
 	/**
 	 * Set the hovered day as the _secondTimestamp
 	 * @param event
@@ -514,9 +538,9 @@ class DayPicker extends CalendarPart {
 			this._modifyTimestampBy(-1, "month");
 		} else if (isPageDown(event)) {
 			this._modifyTimestampBy(1, "month");
-		} else if (isPageUpShift(event)) {
+		} else if (isPageUpShift(event) || isPageUpAlt(event)) {
 			this._modifyTimestampBy(-1, "year");
-		} else if (isPageDownShift(event)) {
+		} else if (isPageDownShift(event) || isPageDownAlt(event)) {
 			this._modifyTimestampBy(1, "year");
 		} else if (isPageUpShiftCtrl(event)) {
 			this._modifyTimestampBy(-10, "year");
@@ -656,6 +680,10 @@ class DayPicker extends CalendarPart {
 		return this.hideWeekNumbers;
 	}
 
+	get hasSecondaryCalendarType() {
+		return !!this.secondaryCalendarType;
+	}
+
 	_isWeekend(oDate) {
 		const localeData = getCachedLocaleDataInstance(getLocale());
 
@@ -672,6 +700,10 @@ class DayPicker extends CalendarPart {
 		return (target.className.indexOf("ui5-dp-item") > -1) || (targetParent && targetParent.classList && targetParent.classList.contains("ui5-dp-item"));
 	}
 
+	_getSecondaryDay(tempDate) {
+		return new CalendarDate(tempDate, this.secondaryCalendarType);
+	}
+
 	_getFirstDay() {
 		let daysFromPreviousMonth;
 
@@ -702,12 +734,19 @@ class DayPicker extends CalendarPart {
 		return {
 			wrapper: {
 				display: this._hidden ? "none" : "flex",
+				"justify-content": "center",
 			},
 			main: {
 				width: "100%",
 			},
 		};
 	}
+
+	get ariaRoledescription() {
+		return this.hasSecondaryCalendarType
+			? `${this._primaryCalendarType} calendar with secondary ${this.secondaryCalendarType} calendar`
+			: `${this._primaryCalendarType} calendar`;
+	}
 }
 
 DayPicker.define();

package/src/Dialog.hbs

@@ -5,11 +5,14 @@
 		<header
 			class="ui5-popup-header-root"
 			id="ui5-popup-header"
-			@mousedown="{{_onDragMouseDown}}">
+			tabindex="{{_headerTabIndex}}"
+			@keydown="{{_onDragOrResizeKeyDown}}"
+			@mousedown="{{_onDragMouseDown}}"
+			part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
-				<h2 class="ui5-popup-header-text">{{headerText}}</h2>
+				<h2 id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</h2>
 			{{/if}}
 		</header>
 	{{/if}}
@@ -17,14 +20,13 @@
 
 {{#*inline "afterContent"}}
 	{{#if footer.length }}
-		<footer class="ui5-popup-footer-root">
+		<footer class="ui5-popup-footer-root" part="footer">
 			<slot name="footer"></slot>
 		</footer>
 	{{/if}}
-	{{#if resizable}}
+	{{#if _showResizeHandle }}
 		<ui5-icon
 			name="resize-corner"
-			dir="{{effectiveDir}}"
 			class="ui5-popup-resize-handle"
 			@mousedown="{{_onResizeMouseDown}}">
 		</ui5-icon>