From 8649d87aba3b8c41c9f539cbe0665f3269be0a5e Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Wed, 28 Jul 2021 17:15:53 +0300
Subject: [PATCH 1/9] feat(ui5-carousel): Implement F7 keyboard functionality

---
 packages/base/hash.txt                 |  2 +-
 packages/main/src/Carousel.hbs         |  1 +
 packages/main/src/Carousel.js          | 68 +++++++++++++++++++++++++-
 packages/main/test/pages/Carousel.html | 45 +++++++++++++++++
 4 files changed, 114 insertions(+), 2 deletions(-)

diff --git a/packages/base/hash.txt b/packages/base/hash.txt
index d4c2bddc6733..d46cedb5e3ff 100644
--- a/packages/base/hash.txt
+++ b/packages/base/hash.txt
@@ -1 +1 @@
-Jo7xX6Xqjqd/+p/wSl0hl57d8ng=
+Wn536C9eiynPZolKtePcgMFYAck=
\ No newline at end of file
diff --git a/packages/main/src/Carousel.hbs b/packages/main/src/Carousel.hbs
index a4cf1b8c2046..a399d028501f 100644
--- a/packages/main/src/Carousel.hbs
+++ b/packages/main/src/Carousel.hbs
@@ -3,6 +3,7 @@
     tabindex="0"
     role="listbox"
     aria-activedescendant="{{ariaActiveDescendant}}"
+	@focusin="{{_onfocusin}}"
     @keydown={{_onkeydown}}
     @mouseout="{{_onmouseout}}"
     @mouseover="{{_onmouseover}}"
diff --git a/packages/main/src/Carousel.js b/packages/main/src/Carousel.js
index 56579158ccb9..ebb2c5a59f92 100644
--- a/packages/main/src/Carousel.js
+++ b/packages/main/src/Carousel.js
@@ -6,6 +6,7 @@ import {
 	isRight,
 	isDown,
 	isUp,
+	isF7,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import {
 	fetchI18nBundle,
@@ -13,6 +14,7 @@ import {
 } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
@@ -285,6 +287,9 @@ class Carousel extends UI5Element {
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._onResizeBound = this._onResize.bind(this);
 		this._resizing = false; // indicates if the carousel is in process of resizing
+
+		this._lastFocusedElements = [];
+		this._orderOfLastFocusedPages = []
 	}
 
 	onBeforeRendering() {
@@ -348,15 +353,53 @@ class Carousel extends UI5Element {
 		}
 	}
 
-	_onkeydown(event) {
+	async _onkeydown(event) {
+		if (isF7(event)) {
+			this._handleF7Key(event);
+			return;
+		}
+
 		if (event.target !== this.getDomRef()) {
 			return;
 		}
 
 		if (isLeft(event) || isDown(event)) {
 			this.navigateLeft();
+			await renderFinished();
+			this.getDomRef().focus();
 		} else if (isRight(event) || isUp(event)) {
 			this.navigateRight();
+			await renderFinished();
+			this.getDomRef().focus();
+		}
+	}
+
+	_onfocusin(event) {
+		if (event.target === this.getDomRef()) {
+			return;
+		}
+
+		let pageIndex = -1;
+
+		for (let i = 0; i < this.content.length; i++) {
+			if (this.content[i].contains(event.target)) {
+				pageIndex = i;
+				break;
+			}
+		}
+
+		if (pageIndex === -1) {
+			return;
+		}
+
+		// Save reference of the last focused element for each page
+		this._lastFocusedElements[pageIndex] = event.target;
+
+		let sortedPageIndex = this._orderOfLastFocusedPages.indexOf(pageIndex);
+		if (sortedPageIndex === -1) {
+			this._orderOfLastFocusedPages.unshift(pageIndex);
+		} else {
+			this._orderOfLastFocusedPages.splice(0, 0, this._orderOfLastFocusedPages.splice(sortedPageIndex, 1)[0]);
 		}
 	}
 
@@ -372,6 +415,29 @@ class Carousel extends UI5Element {
 		}
 	}
 
+	_handleF7Key(event) {
+		let lastFocusedElement = this._lastFocusedElements[this._getLastFocusedActivePageIndex];
+
+		if (event.target === this.getDomRef() && lastFocusedElement) {
+			lastFocusedElement.focus();
+		} else {
+			this.getDomRef().focus();
+		}
+	}
+
+	get _getLastFocusedActivePageIndex() {
+		for (let i = 0; i < this._orderOfLastFocusedPages.length; i++) {
+
+			let pageIndex = this._orderOfLastFocusedPages[i];
+
+			if (this.isItemInViewport(pageIndex)) {
+				return pageIndex;
+			}
+		}
+
+		return this._selectedIndex;
+	};
+
 	navigateLeft() {
 		this._resizing = false;
 
diff --git a/packages/main/test/pages/Carousel.html b/packages/main/test/pages/Carousel.html
index b8f31eaabca6..62edfa597ebf 100644
--- a/packages/main/test/pages/Carousel.html
+++ b/packages/main/test/pages/Carousel.html
@@ -26,6 +26,51 @@
 		}
 	</style>
 
+	<ui5-carousel items-per-page-s="3" items-per-page-m="3" items-per-page-l="3">
+		<ui5-card>
+			<div>
+				Page 1
+				<button>Button 1</button>
+				<button>Button 2</button>
+			</div>
+		</ui5-card>
+		<ui5-card>
+			<div>
+				Page 2
+				<button>Button 1</button>
+				<button>Button 2</button>
+			</div>
+		</ui5-card>
+		<ui5-card>
+			<div>
+				Page 3
+				<button>Button 1</button>
+				<button>Button 2</button>
+			</div>
+		</ui5-card>
+		<ui5-card>
+			<div>
+				Page 4
+				<button>Button 1</button>
+				<button>Button 2</button>
+			</div>
+		</ui5-card>
+		<ui5-card>
+			<div>
+				Page 5
+				<button>Button 1</button>
+				<button>Button 2</button>
+			</div>
+		</ui5-card>
+		<ui5-card>
+			<div>
+				Page 6
+				<button>Button 1</button>
+				<button>Button 2</button>
+			</div>
+		</ui5-card>
+	</ui5-carousel>
+
 	<ui5-carousel id="carouselCards" items-per-page-s="3" items-per-page-m="3" items-per-page-l="3">
 		<ui5-card id="card"
 			class="myCard">

From 3da2474eba27bed7dc26fa1db4a7e37daab3642f Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Wed, 28 Jul 2021 17:56:52 +0300
Subject: [PATCH 2/9] fix lint errors

---
 packages/main/src/Carousel.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/Carousel.js b/packages/main/src/Carousel.js
index ebb2c5a59f92..fb5b6e80e5b3 100644
--- a/packages/main/src/Carousel.js
+++ b/packages/main/src/Carousel.js
@@ -289,7 +289,7 @@ class Carousel extends UI5Element {
 		this._resizing = false; // indicates if the carousel is in process of resizing
 
 		this._lastFocusedElements = [];
-		this._orderOfLastFocusedPages = []
+		this._orderOfLastFocusedPages = [];
 	}
 
 	onBeforeRendering() {
@@ -395,7 +395,7 @@ class Carousel extends UI5Element {
 		// Save reference of the last focused element for each page
 		this._lastFocusedElements[pageIndex] = event.target;
 
-		let sortedPageIndex = this._orderOfLastFocusedPages.indexOf(pageIndex);
+		const sortedPageIndex = this._orderOfLastFocusedPages.indexOf(pageIndex);
 		if (sortedPageIndex === -1) {
 			this._orderOfLastFocusedPages.unshift(pageIndex);
 		} else {
@@ -416,7 +416,7 @@ class Carousel extends UI5Element {
 	}
 
 	_handleF7Key(event) {
-		let lastFocusedElement = this._lastFocusedElements[this._getLastFocusedActivePageIndex];
+		const lastFocusedElement = this._lastFocusedElements[this._getLastFocusedActivePageIndex];
 
 		if (event.target === this.getDomRef() && lastFocusedElement) {
 			lastFocusedElement.focus();
@@ -427,7 +427,6 @@ class Carousel extends UI5Element {
 
 	get _getLastFocusedActivePageIndex() {
 		for (let i = 0; i < this._orderOfLastFocusedPages.length; i++) {
-
 			let pageIndex = this._orderOfLastFocusedPages[i];
 
 			if (this.isItemInViewport(pageIndex)) {
@@ -436,7 +435,7 @@ class Carousel extends UI5Element {
 		}
 
 		return this._selectedIndex;
-	};
+	}
 
 	navigateLeft() {
 		this._resizing = false;

From fc3e1e2c680fb8710ef6d5716a50afb5a4cb20e0 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Thu, 29 Jul 2021 15:57:55 +0300
Subject: [PATCH 3/9] fix lint errors

---
 packages/main/src/Carousel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/Carousel.js b/packages/main/src/Carousel.js
index fb5b6e80e5b3..8d9462a3d867 100644
--- a/packages/main/src/Carousel.js
+++ b/packages/main/src/Carousel.js
@@ -427,7 +427,7 @@ class Carousel extends UI5Element {
 
 	get _getLastFocusedActivePageIndex() {
 		for (let i = 0; i < this._orderOfLastFocusedPages.length; i++) {
-			let pageIndex = this._orderOfLastFocusedPages[i];
+			const pageIndex = this._orderOfLastFocusedPages[i];
 
 			if (this.isItemInViewport(pageIndex)) {
 				return pageIndex;

From 02fa39a9dc2435350d571d3e31e76ed9e6901588 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Thu, 29 Jul 2021 16:07:38 +0300
Subject: [PATCH 4/9] update test page

---
 packages/main/test/pages/Carousel.html | 110 ++++++++++++++-----------
 1 file changed, 64 insertions(+), 46 deletions(-)

diff --git a/packages/main/test/pages/Carousel.html b/packages/main/test/pages/Carousel.html
index 62edfa597ebf..ddaa2c25fbde 100644
--- a/packages/main/test/pages/Carousel.html
+++ b/packages/main/test/pages/Carousel.html
@@ -25,52 +25,6 @@
 			height: 100%;
 		}
 	</style>
-
-	<ui5-carousel items-per-page-s="3" items-per-page-m="3" items-per-page-l="3">
-		<ui5-card>
-			<div>
-				Page 1
-				<button>Button 1</button>
-				<button>Button 2</button>
-			</div>
-		</ui5-card>
-		<ui5-card>
-			<div>
-				Page 2
-				<button>Button 1</button>
-				<button>Button 2</button>
-			</div>
-		</ui5-card>
-		<ui5-card>
-			<div>
-				Page 3
-				<button>Button 1</button>
-				<button>Button 2</button>
-			</div>
-		</ui5-card>
-		<ui5-card>
-			<div>
-				Page 4
-				<button>Button 1</button>
-				<button>Button 2</button>
-			</div>
-		</ui5-card>
-		<ui5-card>
-			<div>
-				Page 5
-				<button>Button 1</button>
-				<button>Button 2</button>
-			</div>
-		</ui5-card>
-		<ui5-card>
-			<div>
-				Page 6
-				<button>Button 1</button>
-				<button>Button 2</button>
-			</div>
-		</ui5-card>
-	</ui5-carousel>
-
 	<ui5-carousel id="carouselCards" items-per-page-s="3" items-per-page-m="3" items-per-page-l="3">
 		<ui5-card id="card"
 			class="myCard">
@@ -523,6 +477,70 @@
 		<ui5-button>Button 3</ui5-button>
 	</ui5-carousel>
 
+	<ui5-title style="margin-top: 2rem;">F7 keyboard navigation testing</ui5-title>
+	<ui5-carousel items-per-page-s="3" items-per-page-m="3" items-per-page-l="3">
+		<ui5-card class="myCard">
+			<div>
+				Page 1 <br />
+				<ui5-button>Button 1</ui5-button>
+				<br />
+				<ui5-button>Button 2</ui5-button>
+				<br />
+				<ui5-input></ui5-input>
+			</div>
+		</ui5-card>
+		<ui5-card class="myCard">
+			<div>
+				Page 2 <br />
+				<ui5-button>Button 1</ui5-button>
+				<br />
+				<ui5-button>Button 2</ui5-button>
+				<br />
+				<ui5-input></ui5-input>
+			</div>
+		</ui5-card>
+		<ui5-card class="myCard">
+			<div>
+				Page 3 <br />
+				<ui5-button>Button 1</ui5-button>
+				<br />
+				<ui5-button>Button 2</ui5-button>
+				<br />
+				<ui5-input></ui5-input>
+			</div>
+		</ui5-card>
+		<ui5-card class="myCard">
+			<div>
+				Page 4 <br />
+				<ui5-button>Button 1</ui5-button>
+				<br />
+				<ui5-button>Button 2</ui5-button>
+				<br />
+				<ui5-input></ui5-input>
+			</div>
+		</ui5-card>
+		<ui5-card class="myCard">
+			<div>
+				Page 5 <br />
+				<ui5-button>Button 1</ui5-button>
+				<br />
+				<ui5-button>Button 2</ui5-button>
+				<br />
+				<ui5-input></ui5-input>
+			</div>
+		</ui5-card>
+		<ui5-card class="myCard">
+			<div>
+				Page 6 <br />
+				<ui5-button>Button 1</ui5-button>
+				<br />
+				<ui5-button>Button 2</ui5-button>
+				<br />
+				<ui5-input></ui5-input>
+			</div>
+		</ui5-card>
+	</ui5-carousel>
+
 </body>
 
 <script>

From ef3975f6cc4d36bef4098a2f0ca3243479d4b268 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Thu, 29 Jul 2021 16:21:58 +0300
Subject: [PATCH 5/9] fix indentation

---
 packages/main/src/Carousel.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/Carousel.hbs b/packages/main/src/Carousel.hbs
index a399d028501f..d75c9a0ce85f 100644
--- a/packages/main/src/Carousel.hbs
+++ b/packages/main/src/Carousel.hbs
@@ -3,7 +3,7 @@
     tabindex="0"
     role="listbox"
     aria-activedescendant="{{ariaActiveDescendant}}"
-	@focusin="{{_onfocusin}}"
+    @focusin="{{_onfocusin}}"
     @keydown={{_onkeydown}}
     @mouseout="{{_onmouseout}}"
     @mouseover="{{_onmouseover}}"

From 91e41699958d6566e2b2e034a49d2014eee1cb11 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Thu, 29 Jul 2021 17:28:12 +0300
Subject: [PATCH 6/9] add missing "isF7" method

---
 packages/base/src/Keys.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/base/src/Keys.js b/packages/base/src/Keys.js
index e0961d330f2f..951d6315da0c 100644
--- a/packages/base/src/Keys.js
+++ b/packages/base/src/Keys.js
@@ -187,6 +187,8 @@ const isF4 = event => {
 
 const isF4Shift = event => (event.key ? event.key === "F4" : event.keyCode === KeyCodes.F4) && checkModifierKeys(event, false, false, true);
 
+const isF7 = event => (event.key ? event.key === "F7" : event.keyCode === KeyCodes.F7) && !hasModifierKeys(event);
+
 const isShowByArrows = event => {
 	return ((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false);
 };
@@ -230,6 +232,7 @@ export {
 	isShow,
 	isF4,
 	isF4Shift,
+	isF7,
 	isPageUp,
 	isPageDown,
 	isPageUpShift,

From 81bf54e0e30732bb1f64698b5b40286eef8229f3 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Fri, 30 Jul 2021 14:21:12 +0300
Subject: [PATCH 7/9] tests are added

---
 packages/base/hash.txt                    |  2 +-
 packages/main/test/pages/Carousel.html    |  6 +--
 packages/main/test/specs/Carousel.spec.js | 64 +++++++++++++++++++++--
 3 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/packages/base/hash.txt b/packages/base/hash.txt
index d46cedb5e3ff..6cba4c446cc1 100644
--- a/packages/base/hash.txt
+++ b/packages/base/hash.txt
@@ -1 +1 @@
-Wn536C9eiynPZolKtePcgMFYAck=
\ No newline at end of file
+cid+umRLhZObr/n62WXzhEKowQM=
\ No newline at end of file
diff --git a/packages/main/test/pages/Carousel.html b/packages/main/test/pages/Carousel.html
index 6d569ac74e0e..a4040fdda495 100644
--- a/packages/main/test/pages/Carousel.html
+++ b/packages/main/test/pages/Carousel.html
@@ -475,13 +475,13 @@
 	</ui5-carousel>
 
 	<ui5-title style="margin-top: 2rem;">F7 keyboard navigation testing</ui5-title>
-	<ui5-carousel items-per-page-s="3" items-per-page-m="3" items-per-page-l="3">
+	<ui5-carousel id="carouselF7" items-per-page-s="3" items-per-page-m="3" items-per-page-l="3">
 		<ui5-card class="myCard">
 			<div>
 				Page 1 <br />
 				<ui5-button>Button 1</ui5-button>
 				<br />
-				<ui5-button>Button 2</ui5-button>
+				<ui5-button id="carouselF7Button">Button 2</ui5-button>
 				<br />
 				<ui5-input></ui5-input>
 			</div>
@@ -503,7 +503,7 @@
 				<br />
 				<ui5-button>Button 2</ui5-button>
 				<br />
-				<ui5-input></ui5-input>
+				<ui5-input  id="carouselF7Input"></ui5-input>
 			</div>
 		</ui5-card>
 		<ui5-card class="myCard">
diff --git a/packages/main/test/specs/Carousel.spec.js b/packages/main/test/specs/Carousel.spec.js
index cfe60bb5eef1..09230f15bdb9 100644
--- a/packages/main/test/specs/Carousel.spec.js
+++ b/packages/main/test/specs/Carousel.spec.js
@@ -192,7 +192,7 @@ describe("Carousel general interaction", () => {
 		carousel.scrollIntoView();
 
 		assert.strictEqual(carousel.shadow$$(".ui5-carousel-navigation > *").length, 0, "carousel has not rendered a page indicator")
-	})
+	});
 
 	it("navigateTo method and visibleItemsIndices", () => {
 		const carousel = browser.$("#carousel9");
@@ -203,8 +203,66 @@ describe("Carousel general interaction", () => {
 
 		browser.execute(() => {
 			document.getElementById("carousel9").navigateTo(1);
-		})
+		});
 
 		assert.deepEqual(carousel.getProperty("visibleItemsIndices"), [ 1, 2 ], "The indices after navigation are correct.");
-	})
+	});
+
+	it("F7 keyboard navigation", () => {
+		const carousel = browser.$("#carouselF7");
+		const button = browser.$("#carouselF7Button");
+		const input = browser.$("#carouselF7Input");
+		carousel.scrollIntoView();
+
+		button.click();
+
+		browser.keys("F7");
+
+		let innerFocusedElement = browser.execute(() => {
+			return document.getElementById("carouselF7").shadowRoot.activeElement;
+		});
+
+		assert.ok($(innerFocusedElement).hasClass("ui5-carousel-root"), "Carousel is focused");
+
+		browser.keys("F7");
+
+		innerFocusedElement = browser.execute(() => {
+			return document.getElementById("carouselF7Button").shadowRoot.activeElement;
+		});
+
+		assert.ok($(innerFocusedElement).hasClass("ui5-button-root"), "Button is focused");
+
+		input.click();
+
+		browser.keys("F7");
+
+		innerFocusedElement = browser.execute(() => {
+			return document.getElementById("carouselF7").shadowRoot.activeElement;
+		});
+
+		assert.ok($(innerFocusedElement).hasClass("ui5-carousel-root"), "Carousel is focused");
+
+		browser.keys("F7");
+
+		innerFocusedElement = browser.execute(() => {
+			return document.getElementById("carouselF7Input").shadowRoot.activeElement;
+		});
+
+		assert.ok($(innerFocusedElement).hasClass("ui5-input-inner"), "Input is focused");
+
+		button.click();
+		browser.keys("F7");
+
+		browser.execute(() => {
+			document.getElementById("carouselF7").navigateTo(1);
+		});
+
+		browser.keys("F7");
+
+		innerFocusedElement = browser.execute(() => {
+			return document.getElementById("carouselF7Input").shadowRoot.activeElement;
+		});
+
+		assert.ok($(innerFocusedElement).hasClass("ui5-input-inner"), "Input is focused");
+	});
 });

From 951ca23289cb218de035c1aaade6f2990590c6d7 Mon Sep 17 00:00:00 2001
From: TeodorTaushanov <teodor.taushanov@sap.com>
Date: Fri, 30 Jul 2021 14:34:40 +0300
Subject: [PATCH 8/9] Update hash.txt

---
 packages/base/hash.txt | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/base/hash.txt b/packages/base/hash.txt
index a18bcb1a497e..fd02777a020f 100644
--- a/packages/base/hash.txt
+++ b/packages/base/hash.txt
@@ -1,2 +1 @@
 44n+tz3Upvb7fx9BuRR5JpZRssg=
-

From 82730f4564285056efcdc59df1d484f8bd0c8e0a Mon Sep 17 00:00:00 2001
From: TeodorTaushanov <teodor.taushanov@sap.com>
Date: Fri, 30 Jul 2021 14:42:00 +0300
Subject: [PATCH 9/9] Update hash.txt