feat(ui5-date-picker): keyboard handling improvement (#2146)

the following keyboard handling enhancements are implemented:
DatePicker
[PAGEDOWN] - Decrements the corresponding day of the month by one
[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one
[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one
[PAGEUP] - Increments the corresponding day of the month by one
[SHIFT] + [PAGEUP] - Increments the corresponding month by one
[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one
Calendar
[F4] - Shows month picker
[SHIFT] + [F4] - Shows year picker
Day picker
[PAGEUP] - Navigate to the previous month
[PAGEDOWN] - Navigate to the next month
[SHIFT] + [PAGEUP] - Navigate to the previous year
[SHIFT] + [PAGEDOWN] - Navigate to the next year
[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards
[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards
 Month picker
[PAGEUP] - Navigate to the previous month
[PAGEDOWN] - Navigate to the next month
 Year picker
[PAGEUP] - Navigate to the previous year range
[PAGEDOWN] - Navigate the next year range

Related to: #1534

Author: unazko

packages/base/src/Keys.js

@@ -119,6 +119,10 @@ const isHome = event => (event.key ? event.key === "Home" : event.keyCode === Ke
 
 const isEnd = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && !hasModifierKeys(event);
 
+const isHomeCtrl = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && checkModifierKeys(event, true, false, false);
+
+const isEndCtrl = event => (event.key ? event.key === "End" : event.keyCode === KeyCodes.END) && checkModifierKeys(event, true, false, false);
+
 const isEscape = event => (event.key ? event.key === "Escape" || event.key === "Esc" : event.keyCode === KeyCodes.ESCAPE) && !hasModifierKeys(event);
 
 const isTabNext = event => (event.key ? event.key === "Tab" : event.keyCode === KeyCodes.TAB) && !hasModifierKeys(event);
@@ -153,6 +157,8 @@ const isF4 = event => {
 	return event.key === "F4" && !hasModifierKeys(event);
 };
 
+const isF4Shift = event => (event.key ? event.key === "F4" : event.keyCode === KeyCodes.F4) && checkModifierKeys(event, false, false, true);
+
 const isShowByArrows = event => {
 	return ((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false);
 };
@@ -172,13 +178,16 @@ export {
 	isDown,
 	isHome,
 	isEnd,
+	isHomeCtrl,
+	isEndCtrl,
 	isEscape,
 	isTabNext,
 	isTabPrevious,
 	isBackSpace,
 	isDelete,
 	isShow,
 	isF4,
+	isF4Shift,
 	isPageUp,
 	isPageDown,
 	isPageUpShift,

packages/base/src/delegate/ItemNavigation.js

@@ -6,6 +6,8 @@ import {
 	isRight,
 	isHome,
 	isEnd,
+	isPageUp,
+	isPageDown,
 } from "../Keys.js";
 
 import EventProvider from "../EventProvider.js";
@@ -52,9 +54,9 @@ class ItemNavigation extends EventProvider {
 
 	async _onKeyPress(event) {
 		if (this.currentIndex >= this._getItems().length) {
-			this.onOverflowBottomEdge();
+			this.onOverflowBottomEdge(event);
 		} else if (this.currentIndex < 0) {
-			this.onOverflowTopEdge();
+			this.onOverflowTopEdge(event);
 		}
 
 		event.preventDefault();
@@ -63,6 +65,7 @@ class ItemNavigation extends EventProvider {
 
 		this.update();
 		this.focusCurrent();
+		this.fireEvent(ItemNavigation.AFTER_FOCUS);
 	}
 
 	onkeydown(event) {
@@ -89,6 +92,14 @@ class ItemNavigation extends EventProvider {
 		if (isEnd(event)) {
 			return this._handleEnd(event);
 		}
+
+		if (isPageUp(event)) {
+			return this._handlePageUp(event);
+		}
+
+		if (isPageDown(event)) {
+			return this._handlePageDown(event);
+		}
 	}
 
 	_handleUp(event) {
@@ -135,6 +146,20 @@ class ItemNavigation extends EventProvider {
 		}
 	}
 
+	_handlePageUp(event) {
+		if (this._canNavigate()) {
+			this.currentIndex -= this.pageSize;
+			this._onKeyPress(event);
+		}
+	}
+
+	_handlePageDown(event) {
+		if (this._canNavigate()) {
+			this.currentIndex += this.pageSize;
+			this._onKeyPress(event);
+		}
+	}
+
 	update(current) {
 		const origItems = this._getItems();
 
@@ -217,9 +242,9 @@ class ItemNavigation extends EventProvider {
 		this.currentIndex = val;
 	}
 
-	onOverflowBottomEdge() {
+	onOverflowBottomEdge(event) {
 		const items = this._getItems();
-		const offset = this.currentIndex - items.length;
+		const offset = (this.currentIndex - items.length) % this.rowSize;
 
 		if (this.behavior === ItemNavigationBehavior.Cyclic) {
 			this.currentIndex = 0;
@@ -232,12 +257,18 @@ class ItemNavigation extends EventProvider {
 			this.currentIndex = items.length - 1;
 		}
 
-		this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset });
+		this.fireEvent(ItemNavigation.BORDER_REACH, {
+			start: false,
+			end: true,
+			originalEvent: event,
+			offset,
+		});
 	}
 
-	onOverflowTopEdge() {
+	onOverflowTopEdge(event) {
 		const items = this._getItems();
-		const offset = this.currentIndex + this.rowSize;
+		const offsetRight = (this.currentIndex + this.rowSize) % this.rowSize;
+		const offset = offsetRight < 0 ? (this.rowSize + offsetRight) : offsetRight;
 
 		if (this.behavior === ItemNavigationBehavior.Cyclic) {
 			this.currentIndex = items.length - 1;
@@ -250,7 +281,12 @@ class ItemNavigation extends EventProvider {
 			this.currentIndex = 0;
 		}
 
-		this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset });
+		this.fireEvent(ItemNavigation.BORDER_REACH, {
+			start: true,
+			end: false,
+			originalEvent: event,
+			offset,
+		});
 	}
 
 	_handleNextPage() {
@@ -278,5 +314,6 @@ class ItemNavigation extends EventProvider {
 ItemNavigation.PAGE_TOP = "PageTop";
 ItemNavigation.PAGE_BOTTOM = "PageBottom";
 ItemNavigation.BORDER_REACH = "_borderReach";
+ItemNavigation.AFTER_FOCUS = "_afterFocus";
 
 export default ItemNavigation;

packages/localization/src/dates/CalendarDate.js

@@ -64,9 +64,29 @@ class CalendarDate {
 		return this._oUDate.getUTCMonth();
 	}
 
-	setMonth(month) {
+	/**
+	 * Sets the given month as ordinal month of the year.
+	 * @param {int} month An integer between 0 and 11, representing the months January through December( or their
+	 * equivalent month names for the given calendar).
+	 * If the specified value is is outside of the expected range, this method attempts to update the date information
+	 * accordingly. For example, if 12 is given as a month, the year will be incremented by 1, and 1 will be used for month.
+	 * @param {int} [date] An integer between 1 and 31, representing the day of the month, but other values are allowed.
+	 * 0 will result in the previous month's last day.
+	 * -1 will result in the day before the previous month's last day.
+	 * 32 will result in:
+	 * - first day of the next month if the current month has 31 days.
+	 * - second day of the next month if the current month has 30 days.
+	 * Other value will result in adding or subtracting days according to the given value.
+	 * @returns {sap.ui.unified.calendar.CalendarDate} <code>this</code> for method chaining.
+	 */
+	setMonth(month, date) {
 		checkNumericLike(month, `Invalid month: ${month}`);
-		this._oUDate.setUTCMonth(month);
+		if (date || date === 0) {
+			checkNumericLike(date, `Invalid date: ${date}`);
+			this._oUDate.setUTCMonth(month, date);
+		} else {
+			this._oUDate.setUTCMonth(month);
+		}
 		return this;
 	}
 

packages/main/src/Calendar.hbs

@@ -1,4 +1,8 @@
-<div class="{{classes.main}}" style="{{styles.main}}">
+<div
+	class="{{classes.main}}"
+	style="{{styles.main}} "
+	@keydown={{_onkeydown}}	
+>
 
 	<ui5-calendar-header
 		id="{{_id}}-head"
@@ -39,6 +43,7 @@
 			.maxDate="{{_oMonth.maxDate}}"
 			timestamp="{{_monthPicker.timestamp}}"
 			@ui5-change="{{_monthPicker.onSelectedMonthChange}}"
+			@ui5-navigate="{{_monthPicker.onNavigate}}"
 		></ui5-monthpicker>
 
 		<ui5-yearpicker
@@ -52,6 +57,7 @@
 			timestamp="{{_yearPicker.timestamp}}"
 			._selectedYear="{{_yearPicker._selectedYear}}"
 			@ui5-change="{{_yearPicker.onSelectedYearChange}}"
+			@ui5-navigate="{{_yearPicker.onNavigate}}"
 		></ui5-yearpicker>
 	</div>
 </div>