feat: focus current date if the calendar is opened from popover

Author: GDamyanov

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

@@ -1363,11 +1363,7 @@ describe("Date Picker Tests", () => {
 			.realPress("ArrowDown");
 
 		cy.get<DatePicker>("@datePicker")
-			.shadow()
-			.find("ui5-calendar")
-			.as("calendar")
-			.shadow()
-			.find("[data-ui5-cal-header-btn-month]")
+			.ui5DatePickerGetDisplayedDay(13)
 			.should("have.focus");
 	});
 

packages/main/src/Calendar.ts

@@ -57,6 +57,10 @@ import {
 	CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT,
 	CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE,
 	CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT,
+	CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE,
+	CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE,
+	CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE,
+	CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 import type { YearRangePickerChangeEventDetail } from "./YearRangePicker.js";
 
@@ -307,6 +311,9 @@ class Calendar extends CalendarPart {
 	@property({ noAttribute: true })
 	_pickersMode: `${CalendarPickersMode}` = "DAY_MONTH_YEAR";
 
+	@property({ type: Boolean, noAttribute: true })
+	_isOpenedFromPopover?: boolean = false;
+
 	_valueIsProcessed = false;
 
 	_rangeStartYear?: number;
@@ -842,8 +849,16 @@ class Calendar extends CalendarPart {
 		const monthLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_MONTH_BUTTON, headerMonthButtonText);
 		const yearLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_YEAR_BUTTON, this._headerYearButtonText as string);
 		const yearRangeLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_BUTTON, rangeStartText, rangeEndText);
-		const nextBtnLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE);
-		const prevBtnLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE);
+		let nextBtnLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE);
+		let prevBtnLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE);
+
+		if (this._currentPicker === "month") {
+			nextBtnLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE);
+			prevBtnLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE);
+		} else if (this._currentPicker === "year") {
+			nextBtnLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE);
+			prevBtnLabel = Calendar.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE);
+		}
 
 		// Get shortcuts
 		const monthShortcut = Calendar.i18nBundle?.getText(CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT);
@@ -856,11 +871,15 @@ class Calendar extends CalendarPart {
 			ariaLabelMonthButton: monthLabel,
 			ariaLabelYearButton: yearLabel,
 			ariaLabelYearRangeButton: yearRangeLabel,
+			ariaLabelNextButton: nextBtnLabel,
+			ariaLabelPrevButton: prevBtnLabel,
 
 			// Keyboard shortcuts for aria-keyshortcuts
 			keyShortcutMonthButton: monthShortcut,
 			keyShortcutYearButton: yearShortcut,
 			keyShortcutYearRangeButton: yearRangeShortcut,
+			keyShortcutNextButton: nextBtnShortcut,
+			keyShortcutPrevButton: prevBtnShortcut,
 
 			// Tooltips combining label and shortcut
 			tooltipMonthButton: `${monthLabel} (${monthShortcut})`,

packages/main/src/CalendarHeaderTemplate.tsx

@@ -18,6 +18,9 @@ export default function CalendarTemplate(this: Calendar) {
 				onMouseDown={this.onPrevButtonClick}
 				tabindex={this._previousButtonDisabled ? -1 : 0}
 				title={this.accInfo.tooltipPrevButton}
+				aria-label={this.accInfo.ariaLabelPrevButton}
+				aria-description={this.accInfo.ariaLabelPrevButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutPrevButton}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
 			</div>
@@ -97,6 +100,9 @@ export default function CalendarTemplate(this: Calendar) {
 				onMouseDown={this.onNextButtonClick}
 				tabindex={this._nextButtonDisabled ? -1 : 0}
 				title={this.accInfo.tooltipNextButton}
+				aria-label={this.accInfo.ariaLabelNextButton}
+				aria-description={this.accInfo.ariaLabelNextButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutNextButton}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowRight}/>
 			</div>

packages/main/src/DateComponentBase.ts

@@ -170,6 +170,10 @@ class DateComponentBase extends UI5Element {
 		return this._displayFormat !== "medium" && this._displayFormat !== "short" && this._displayFormat !== "long";
 	}
 
+	get initialFocusId(): string {
+		return `${this._id}-calendar`;
+	}
+
 	get hasSecondaryCalendarType() {
 		return !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType;
 	}

packages/main/src/DatePickerTemplate.tsx

@@ -6,6 +6,6 @@ import type DatePicker from "./DatePicker.js";
 export default function DatePickerTemplate(this: DatePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this),
+		DatePickerPopoverTemplate.call(this, { initialFocus: this.initialFocusId }),
 	];
 }

packages/main/src/DateRangePickerTemplate.tsx

@@ -8,7 +8,7 @@ import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
 export default function DateRangePickerTemplate(this: DateRangePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content }),
+		DatePickerPopoverTemplate.call(this, { content, initialFocus: this.initialFocusId }),
 	];
 }
 

packages/main/src/DateTimePicker.ts

@@ -322,14 +322,6 @@ class DateTimePicker extends DatePicker implements IFormInputElement {
 		return false;
 	}
 
-	/**
-	 * Returns the ID of the element to focus initially when the picker opens in phone mode
-	 * @private
-	 */
-	get _initialFocusId() {
-		return this._phoneMode ? `${this._id}-calendar` : undefined;
-	}
-
 	/**
 	 * EVENT HANDLERS
 	 */

packages/main/src/DateTimePickerTemplate.tsx

@@ -12,7 +12,7 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate(this: DateTimePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this._initialFocusId }),
+		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this.initialFocusId }),
 	];
 }
 

packages/main/src/i18n/messagebundle.properties

@@ -682,12 +682,24 @@ CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT = Shift + F4
 #XACT: Title for month next button in the Calendar Header
 CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE = Next Month
 
+#XACT: Title for year next button in the Calendar Header
+CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE = Next Year
+
+#XACT: Title for year range next button in the Calendar Header
+CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE = Next Year Range
+
 #XACT: Keyboard shortcut for month next button in the Calendar Header
 CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT = Pageup
 
 #XACT: Title for month previous button in the Calendar Header
 CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE = Previous Month
 
+#XACT: Title for year previous button in the Calendar Header
+CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE = Previous Year
+
+#XACT: Title for year range previous button in the Calendar Header
+CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE = Previous Year Range
+
 #XACT: Keyboard shortcut for month previous button in the Calendar Header
 CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT = Pagedown
 

packages/main/src/themes/Calendar.css

@@ -16,7 +16,6 @@
     padding: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
     overflow: hidden;
 }