fix(ui5-timepicker): correct navigation to the am/pm slider (#3920)

SAP · Sep 14, 2021 · ba38d4c · ba38d4c
1 parent ea79fb3
commit ba38d4c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/packages/main/src/TimeSelection.hbs b/packages/main/src/TimeSelection.hbs
@@ -54,7 +54,7 @@
 				@ui5-select="{{onPeriodChange}}"
 				@click="{{selectSlider}}"
 				@focusin="{{selectSlider}}"
-				data-sap-slider="period"
+				data-sap-slider="periods"
 		></ui5-wheelslider>
 	{{/if}}
 </div>
diff --git a/packages/main/src/TimeSelection.js b/packages/main/src/TimeSelection.js
@@ -249,7 +249,7 @@ class TimeSelection extends UI5Element {
 	}
 
 	get _periodSliderFocused() {
-		return this._currentSlider === "period";
+		return this._currentSlider === "periods";
 	}
 
 	get _hours() {
@@ -391,7 +391,7 @@ class TimeSelection extends UI5Element {
 	}
 
 	get _activeSliders() {
-		return ["hours", "minutes", "seconds", "period"].filter(slider => this[`_has${capitalizeFirst(slider)}Slider`]);
+		return ["hours", "minutes", "seconds", "periods"].filter(slider => this[`_has${capitalizeFirst(slider)}Slider`]);
 	}
 
 	_onfocusin(event) {

diff --git a/packages/main/test/specs/DateTimePicker.spec.js b/packages/main/test/specs/DateTimePicker.spec.js
@@ -226,7 +226,7 @@ describe("DateTimePicker general interaction", () => {
 		picker.$("ui5-time-selection").shadow$(`ui5-wheelslider[data-sap-slider="seconds"]`).shadow$(`div[tabindex="0"]`).click();
 		browser.keys("PageDown");// select 00
 
-		picker.$("ui5-time-selection").shadow$(`ui5-wheelslider[data-sap-slider="period"]`).shadow$(`div[tabindex="0"]`).click();
+		picker.$("ui5-time-selection").shadow$(`ui5-wheelslider[data-sap-slider="periods"]`).shadow$(`div[tabindex="0"]`).click();
 		browser.keys("PageDown");// select AM
 
 		picker.$("#ok").click();
@@ -254,7 +254,7 @@ describe("DateTimePicker general interaction", () => {
 		picker.$("ui5-time-selection").shadow$(`ui5-wheelslider[data-sap-slider="seconds"]`).shadow$(`div[tabindex="0"]`).click();
 		browser.keys("PageDown");// select 00
 
-		picker.$("ui5-time-selection").shadow$(`ui5-wheelslider[data-sap-slider="period"]`).shadow$(`div[tabindex="0"]`).click();
+		picker.$("ui5-time-selection").shadow$(`ui5-wheelslider[data-sap-slider="periods"]`).shadow$(`div[tabindex="0"]`).click();
 		browser.keys("PageUp");// select PM
 
 

diff --git a/packages/main/test/specs/TimePicker.spec.js b/packages/main/test/specs/TimePicker.spec.js
@@ -194,4 +194,25 @@ describe("TimePicker general interaction", () => {
 		// assert
 		assert.strictEqual(timepicker.shadow$("ui5-input").getProperty("value"), "12:00:01", "The value of seconds is -1");
 	});
+
+	it("test arrow navigation", () => {
+		// arrange
+		browser.url(`http://localhost:${PORT}/test-resources/pages/TimePicker.html`);
+
+		const timepicker = browser.$("#timepicker3"); //picker with 4 sliders
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#timepicker3");
+
+		// act
+		timepicker.shadow$("ui5-input").$(".ui5-time-picker-input-icon-button").click();
+
+		browser.keys("ArrowRight");
+		browser.keys("ArrowRight");
+		browser.keys("ArrowRight");
+
+		const timepickerPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+
+		// assert
+		assert.strictEqual(timepickerPopover.$("ui5-time-selection").shadow$(`ui5-wheelslider[data-sap-slider="periods"]`).getAttribute("expanded"),
+			"", "the periods slider should be expanded");
+	});
 });