fix(ui5-carousel): navigateTo method no longer moves the focus (#12920)

Author: dimovpetar

packages/main/cypress/specs/Carousel.cy.tsx

@@ -702,4 +702,32 @@ describe("Carousel general interaction", () => {
 			.find(".ui5-carousel-navigation-dot")
 			.should("have.length", 3);
 	});
+
+	it("navigateTo method should NOT move the focus", () => {
+		cy.mount(
+			<>
+				<Button id="outsideButton">Outside Button</Button>
+				<Carousel id="carousel">
+					<div>item 1</div>
+					<div>item 2</div>
+					<div>item 3</div>
+				</Carousel>
+			</>
+		);
+
+		cy.get("#outsideButton").realClick();
+		cy.get("#outsideButton").should("be.focused");
+
+		cy.get<Carousel>("#carousel")
+			.then($carousel => {
+				$carousel[0].navigateTo(2);
+			});
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-item[aria-posinset='3'][data-sap-focus-ref]")
+			.should("exist")
+
+		cy.get("#outsideButton").should("be.focused");
+	});
 });

packages/main/src/Carousel.ts

@@ -550,24 +550,32 @@ class Carousel extends UI5Element {
 		return this.content.every(item => observableContentSet.has(item));
 	}
 
-	_handleHome(e: KeyboardEvent) {
+	async _handleHome(e: KeyboardEvent) {
 		e.preventDefault();
 		this.navigateTo(0);
+		await renderFinished();
+		this.focusItem();
 	}
 
-	_handleEnd(e: KeyboardEvent) {
+	async _handleEnd(e: KeyboardEvent) {
 		e.preventDefault();
 		this.navigateTo(this.items.length - 1);
+		await renderFinished();
+		this.focusItem();
 	}
 
-	_handlePageUp(e: KeyboardEvent) {
+	async _handlePageUp(e: KeyboardEvent) {
 		e.preventDefault();
 		this.navigateTo(this._focusedItemIndex	+ this._pageStep < this.items.length ? this._focusedItemIndex + this._pageStep : this.items.length - 1);
+		await renderFinished();
+		this.focusItem();
 	}
 
-	_handlePageDown(e: KeyboardEvent) {
+	async _handlePageDown(e: KeyboardEvent) {
 		e.preventDefault();
 		this.navigateTo(this._focusedItemIndex	- this._pageStep > 0 ? this._focusedItemIndex - this._pageStep : 0);
+		await renderFinished();
+		this.focusItem();
 	}
 
 	get _backgroundDesign() {
@@ -586,7 +594,7 @@ class Carousel extends UI5Element {
 		return this._focusedItemIndex;
 	}
 
-	navigateLeft() {
+	async navigateLeft() {
 		this._resizing = false;
 
 		const previousSelectedIndex = this._focusedItemIndex;
@@ -605,11 +613,13 @@ class Carousel extends UI5Element {
 
 		if (previousSelectedIndex !== this._focusedItemIndex) {
 			this.skipToItem(this._focusedItemIndex, -1);
+			await renderFinished();
+			this.focusItem();
 			this.fireDecoratorEvent("navigate", { selectedIndex: this._focusedItemIndex });
 		}
 	}
 
-	navigateRight() {
+	async navigateRight() {
 		this._resizing = false;
 
 		const previousSelectedIndex = this._focusedItemIndex;
@@ -630,27 +640,33 @@ class Carousel extends UI5Element {
 
 		if (previousSelectedIndex !== this._focusedItemIndex) {
 			this.skipToItem(this._focusedItemIndex, 1);
+			await renderFinished();
+			this.focusItem();
 			this.fireDecoratorEvent("navigate", { selectedIndex: this._focusedItemIndex });
 		}
 	}
 
 	navigateArrowRight() {
 		if (this._focusedItemIndex === this._visibleItemsIndexes[0]) {
 			this.navigateTo(this._focusedItemIndex + 1);
+			this.focusItem();
 			this._moveToItem(this._currentSlideIndex + 1);
 		} else {
 			this._moveToItem(this._currentSlideIndex + 1);
 			this.navigateTo(this._focusedItemIndex);
+			this.focusItem();
 		}
 	}
 
 	navigateArrowLeft() {
 		if (this._focusedItemIndex > 0 && this._focusedItemIndex === this._visibleItemsIndexes[this._visibleItemsIndexes.length - 1]) {
 			this.navigateTo(this._focusedItemIndex - 1);
+			this.focusItem();
 			this._moveToItem(this._currentSlideIndex - 1);
 		} else {
 			this._moveToItem(this._currentSlideIndex === 0 ? this.pagesCount - 1 : this._currentSlideIndex - 1);
 			this.navigateTo(this._focusedItemIndex === 0 ? this.items.length - 1 : this._focusedItemIndex);
+			this.focusItem();
 		}
 	}
 
@@ -731,7 +747,7 @@ class Carousel extends UI5Element {
 
 	/**
 	 * Changes the currently displayed page.
-	 * @param itemIndex The index of the target page
+	 * @param itemIndex The index of the target item
 	 * @since 1.0.0-rc.15
 	 * @public
 	 */
@@ -745,26 +761,22 @@ class Carousel extends UI5Element {
 		}
 		this._focusedItemIndex = itemIndex;
 		this._currentSlideIndex = itemIndex - this._itemIndicator;
+
 		if (this.isItemInViewport(itemIndex)) {
 			this._currentSlideIndex = this._visibleItemsIndexes[0];
-			this.focusItem();
-			return;
+		} else {
+			this.skipToItem(this._focusedItemIndex, 1);
 		}
-		this.skipToItem(this._focusedItemIndex, 1);
 	}
 
-	async skipToItem(focusIndex: number, offset: number) {
+	skipToItem(focusIndex: number, offset: number) {
 		if (!this.isItemInViewport(focusIndex)) {
 			let slideIndex = this._calculateItemSlideIndex(this._currentSlideIndex, offset);
 			if (focusIndex === 0) {
 				slideIndex = 0;
 			}
 			this._moveToItem(slideIndex);
 		}
-
-		await renderFinished();
-
-		this.focusItem();
 	}
 
 	/**

packages/main/src/CarouselTemplate.tsx

@@ -22,9 +22,9 @@ export default function CarouselTemplate(this: Carousel) {
 		>
 			<div class={this.classes.viewport} part="content">
 				<div role="list" aria-label={this._ariaListLabel} class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentSlideIndex * (this._itemWidth || 0)}px, 0, 0` }}>
-					{this.items.map(itemInfo =>
+					{this.items.map((itemInfo, i) =>
 						<div
-							data-sap-focus-ref
+							data-sap-focus-ref={this._focusedItemIndex === i ? true : undefined}
 							id={itemInfo.id}
 							class={{
 								"ui5-carousel-item": true,