fix(ui5-list): focus after element when TAB key is pressed (#3220)

If the "More" growing button is currently focused and the TAB key is pressed, focus is returning to the last focused ui5-li in the same list (focus trap). The focus is now moved to the next interactive element after the ui5-list, when TAB key is pressed.

Author: dobrinyonkov

packages/main/src/List.js

@@ -666,6 +666,11 @@ class List extends UI5Element {
 			this._onLoadMoreClick();
 			this._loadMoreActive = true;
 		}
+
+		if (isTabNext(event)) {
+			this.setPreviouslyFocusedItem(event.target);
+			this.focusAfterElement();
+		}
 	}
 
 	_onLoadMoreKeyup(event) {

packages/main/test/pages/List_test_page.html

@@ -39,6 +39,14 @@
 
 	<br><br><br>
 
+	<ui5-list id="growingListButton" growing="Button" style="height: 300px;">
+		<ui5-li>Javascript</ui5-li>
+		<ui5-li>PHP</ui5-li>
+	</ui5-list>
+
+	<button id="nextInteractiveElement">Next Interactive element</button>
+
+	<br><br><br>
 
 	<br/>
 	<ui5-list id="listEvents" mode="SingleSelectEnd">

packages/main/test/specs/List.spec.js

@@ -354,4 +354,14 @@ describe("List Tests", () => {
 
 		assert.strictEqual(item3.getProperty("focused"), true, "disabled item is skipped");
 	});
+
+	it.only('should focus next interactive element if TAB is pressed when focus is on "More" growing button', () => {
+		const growingListButton = $('#growingListButton').shadow$("div[load-more-inner]");
+		const nextInteractiveElement = $('#nextInteractiveElement');
+			
+		growingListButton.click() // focus growing button
+		growingListButton.keys("Tab") // focus next list
+
+		assert.strictEqual(nextInteractiveElement.isFocused(), true, "Focus is moved to next interactive element.");
+	});
 });