feat(ui5-time-picker): improve keyboard handling support

packages/base/src/Keys.js

@@ -129,6 +129,18 @@ const isBackSpace = event => (event.key ? event.key === "Backspace" : event.keyC
 
 const isDelete = event => (event.key ? event.key === "Delete" : event.keyCode === KeyCodes.DELETE) && !hasModifierKeys(event);
 
+const isPageUp = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && !hasModifierKeys(event);
+
+const isPageDown = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && !hasModifierKeys(event);
+
+const isPageUpShift = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, false, true);
+
+const isPageDownShift = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, false, true);
+
+const isPageUpShiftCtrl = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, true, false, true);
+
+const isPageDownShiftCtrl = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, true, false, true);
+
 const isShow = event => {
 	if (event.key) {
 		return isF4(event) || isShowByArrows(event);
@@ -167,4 +179,10 @@ export {
 	isDelete,
 	isShow,
 	isF4,
+	isPageUp,
+	isPageDown,
+	isPageUpShift,
+	isPageDownShift,
+	isPageUpShiftCtrl,
+	isPageDownShiftCtrl,
 };

packages/main/src/TimePicker.js

@@ -14,6 +14,12 @@ import {
 	isTabNext,
 	isTabPrevious,
 	isShow,
+	isPageUp,
+	isPageDown,
+	isPageUpShift,
+	isPageDownShift,
+	isPageUpShiftCtrl,
+	isPageDownShiftCtrl,
 } from "@ui5/webcomponents-base/src/Keys.js";
 import "@ui5/webcomponents-icons/dist/icons/time-entry-request.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
@@ -674,6 +680,46 @@ class TimePicker extends UI5Element {
 			e.preventDefault();
 			this.togglePicker();
 		}
+
+		if (isPageUpShiftCtrl(e)) {
+			e.preventDefault();
+			this._incrementValue(true, false, false, true);
+		} else if (isPageUpShift(e)) {
+			e.preventDefault();
+			this._incrementValue(true, false, true, false);
+		} else if (isPageUp(e)) {
+			e.preventDefault();
+			this._incrementValue(true, true, false, false);
+		}
+
+		if (isPageDownShiftCtrl(e)) {
+			e.preventDefault();
+			this._incrementValue(false, false, false, true);
+		} else if (isPageDownShift(e)) {
+			e.preventDefault();
+			this._incrementValue(false, false, true, false);
+		} else if (isPageDown(e)) {
+			e.preventDefault();
+			this._incrementValue(false, true, false, false);
+		}
+	}
+
+	_incrementValue(increment, hours, minutes, seconds) {
+		const date = this.dateValue;
+		const incrementStep = increment ? 1 : -1;
+
+		if (hours && this.shouldBuildHoursSlider) {
+			date.setHours(date.getHours() + incrementStep);
+		} else if (minutes && this.shouldBuildMinutesSlider) {
+			date.setMinutes(date.getMinutes() + incrementStep);
+		} else if (seconds && this.shouldBuildSecondsSlider) {
+			date.setSeconds(date.getSeconds() + incrementStep);
+		} else {
+			return;
+		}
+
+		this.setValue(this.formatValue(date));
+		this.fireEvent("change", { value: this.value, valid: true });
 	}
 
 	_handleWheel(e) {

packages/main/src/TimePickerPopover.hbs

@@ -13,7 +13,7 @@
 	@keydown="{{_ontimepickerpopoverkeydown}}"
 	@wheel="{{_handleWheel}}"
 >
-	<div class="{{classes.container}}" @keydown={{_oncontainerkeydown}} tabindex="0" @focusin="{{_onfocuscontainerin}}">
+	<div class="{{classes.container}}" @keydown={{_oncontainerkeydown}} tabindex="-1" @focusin="{{_onfocuscontainerin}}">
 		{{#if shouldBuildHoursSlider}}
 			<ui5-wheelslider 
 				label = "{{hoursSliderTitle}}"

packages/main/test/specs/TimePicker.spec.js

@@ -123,4 +123,53 @@ describe("TimePicker general interaction", () => {
 		// assert
 		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("valueState"), "None", "The value state is None");
 	});
+
+	it("tests input keyboard handling", () => {
+		const timepicker = browser.$("#timepicker5");
+
+		// act
+		timepicker.click();
+		timepicker.keys(['Shift', 'PageUp']);
+		timepicker.keys('Shift');
+
+		// assert
+		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("value"), "12:01:01", "The value of minutes is +1");
+		// act
+		timepicker.click();
+		timepicker.keys(['Shift', 'PageDown']);
+		timepicker.keys('Shift');
+
+		// assert
+		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("value"), "12:00:01", "The value of minutes is -1");
+
+		// act
+		timepicker.click();
+		timepicker.keys('PageUp');
+
+		// assert
+		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("value"), "01:00:01", "The value of hours is +1");
+		// act
+		timepicker.click();
+		timepicker.keys('PageDown');
+
+		// assert
+		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("value"), "12:00:01", "The value of hours is -1");
+
+		// act
+		timepicker.click();
+		timepicker.keys(['Shift', 'Control', 'PageUp']);
+		timepicker.keys('Shift');
+		timepicker.keys('Control');
+
+		// assert
+		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("value"), "12:00:02", "The value of seconds is +1");
+		// act
+		timepicker.click();
+		timepicker.keys(['Shift', 'Control', 'PageDown']);
+		timepicker.keys('Shift');
+		timepicker.keys('Control');
+
+		// assert
+		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("value"), "12:00:01", "The value of seconds is -1");
+	});
 });