feat(ui5-datetime-picker): improve keyboard handling support (#2137)

Now you can navigate with arrows between the sliders.

Related to #1534

Author: tsanislavgatev

packages/main/src/DateTimePicker.js

@@ -3,6 +3,10 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import "@ui5/webcomponents-icons/dist/icons/date-time.js";
+import {
+	isLeft,
+	isRight,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import Button from "./Button.js";
 import ToggleButton from "./ToggleButton.js";
 import SegmentedButton from "./SegmentedButton.js";
@@ -245,6 +249,7 @@ class DateTimePicker extends DatePicker {
 		await this.setSlidersValue();
 		this.expandHoursSlider();
 		this.storePreviousValue();
+		this._slidersDomRefs = await this.slidersDomRefs();
 	}
 
 	/**
@@ -265,6 +270,11 @@ class DateTimePicker extends DatePicker {
 		return super.isValid(value); // in order to be displayed in the DateTimePicker API reference
 	}
 
+	async slidersDomRefs() {
+		await this.getPicker();
+		return this.responsivePopover.getElementsByClassName("ui5-dt-wheel");
+	}
+
 	/**
 	 * Read-only getters
 	 */
@@ -680,6 +690,35 @@ class DateTimePicker extends DatePicker {
 		}
 	}
 
+	async _ontimekeydown(event) {
+		if (isLeft(event)) {
+			let expandedSliderIndex = 0;
+			for (let i = 0; i < this._slidersDomRefs.length; i++) {
+				if (this._slidersDomRefs[i]._expanded) {
+					expandedSliderIndex = i;
+				}
+			}
+			if (this._slidersDomRefs[expandedSliderIndex - 1]) {
+				this._slidersDomRefs[expandedSliderIndex - 1].focus();
+			} else {
+				this._slidersDomRefs[this._slidersDomRefs.length - 1].focus();
+			}
+		} else if (isRight(event)) {
+			let expandedSliderIndex = 0;
+
+			for (let i = 0; i < this._slidersDomRefs.length; i++) {
+				if (this._slidersDomRefs[i]._expanded) {
+					expandedSliderIndex = i;
+				}
+			}
+			if (this._slidersDomRefs[expandedSliderIndex + 1]) {
+				this._slidersDomRefs[expandedSliderIndex + 1].focus();
+			} else {
+				this._slidersDomRefs[0].focus();
+			}
+		}
+	}
+
 	normalizeDigit(value) {
 		const valueAsString = value.toString();
 		return valueAsString.length === 1 ? `0${value}` : valueAsString;

packages/main/src/DateTimePickerPopover.hbs

@@ -31,7 +31,7 @@
 			<span class="ui5-dt-picker-separator"></span>
 		{{/unless}}
 
-		<div class="ui5-dt-time {{classes.dateTimeView}}">
+		<div class="ui5-dt-time {{classes.dateTimeView}}" @keydown="{{_ontimekeydown}}">
 			{{#if shouldBuildHoursSlider}}
 			<ui5-wheelslider
 				label = "{{hoursLabel}}"