feat(ui5-carousel): Implement F7 keyboard functionality

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,

packages/main/src/Carousel.hbs

@@ -3,6 +3,7 @@
     tabindex="0"
     role="listbox"
     aria-activedescendant="{{ariaActiveDescendant}}"
+    @focusin="{{_onfocusin}}"
     @keydown={{_onkeydown}}
     @mouseout="{{_onmouseout}}"
     @mouseover="{{_onmouseover}}"

packages/main/src/Carousel.js

@@ -6,13 +6,15 @@ import {
 	isRight,
 	isDown,
 	isUp,
+	isF7,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import {
 	fetchI18nBundle,
 	getI18nBundle,
 } 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;
+
+		const 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,28 @@ class Carousel extends UI5Element {
 		}
 	}
 
+	_handleF7Key(event) {
+		const 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++) {
+			const pageIndex = this._orderOfLastFocusedPages[i];
+
+			if (this.isItemInViewport(pageIndex)) {
+				return pageIndex;
+			}
+		}
+
+		return this._selectedIndex;
+	}
+
 	navigateLeft() {
 		this._resizing = false;
 

packages/main/test/pages/Carousel.html

@@ -25,7 +25,6 @@
 			height: 100%;
 		}
 	</style>
-
 	<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">
@@ -475,6 +474,70 @@
 		<ui5-button>Button 3</ui5-button>
 	</ui5-carousel>
 
+	<ui5-title style="margin-top: 2rem;">F7 keyboard navigation testing</ui5-title>
+	<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 id="carouselF7Button">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  id="carouselF7Input"></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>

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");
+	});
 });