fix(ui5-table): access interactive content inside popin cell (#9428)

Pressing `Tab` key was moving the focus to the interactive content only if it was placed inside was popin cell. With this change the focus is moved to the interactive content without the need to know in which popin cell it is placed. Fixes: #9288
SAP · Jul 10, 2024 · 60c5b98 · 60c5b98
1 parent 55aa134
commit 60c5b98
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 17 deletions.
diff --git a/packages/compat/src/TableRow.ts b/packages/compat/src/TableRow.ts
@@ -199,7 +199,7 @@ class TableRow extends UI5Element implements ITableRow {
 		const target = e.target as HTMLElement;
 		const checkboxPressed = target.classList.contains("ui5-multi-select-checkbox");
 		const rowElements = Array.from(this.shadowRoot!.querySelectorAll("tr") || []);
-		const elements = rowElements.map(getLastTabbableElement);
+		const elements = rowElements.map(getLastTabbableElement).filter(Boolean);
 		const lastFocusableElement = elements.pop();
 
 		if (isTabNext(e) && activeElement === (lastFocusableElement || this.root)) {

diff --git a/packages/compat/src/bundle.esm.ts b/packages/compat/src/bundle.esm.ts
@@ -9,6 +9,7 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 import Input from "@ui5/webcomponents/dist/Input.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
+import Link from "@ui5/webcomponents/dist/Link.js";
 
 import * as defaultFioriTexts from "./generated/i18n/i18n-defaults.js";
 

diff --git a/packages/compat/test/pages/TableAllPopin.html b/packages/compat/test/pages/TableAllPopin.html
@@ -24,6 +24,7 @@
 
 <body class="tableallpopin1auto">
 
+	<ui5-button id="beforeEl">Before element</ui5-button>
 	<ui5-table class="demo-table" id="tbl">
 		<!-- Columns -->
 		<ui5-table-column class="title-column" slot="columns">
@@ -51,29 +52,32 @@
 
 		<ui5-table-row id="row1">
 			<ui5-table-cell class="title-cell">Notebook Basic 15</ui5-table-cell>
-			<ui5-table-cell>Very Best Screens</ui5-table-cell>
+			<ui5-table-cell><ui5-link href="#" id="focusedEl">I'm focus</ui5-link></ui5-table-cell>
 			<ui5-table-cell>30 x 18 x 3 cm</ui5-table-cell>
 			<ui5-table-cell>4.2 KG</ui5-table-cell>
 			<ui5-table-cell class="price-cell">956 EUR</ui5-table-cell>
 		</ui5-table-row>
 
 		<ui5-table-row id="row2">
 			<ui5-table-cell class="title-cell">Notebook Basic 17</ui5-table-cell>
-			<ui5-table-cell>Very Best Screens</ui5-table-cell>
+
+			<ui5-table-cell><ui5-link href="#">I'm focus</ui5-link></ui5-table-cell>
 			<ui5-table-cell>40 x 18 x 3 cm</ui5-table-cell>
 			<ui5-table-cell>4.6 KG</ui5-table-cell>
 			<ui5-table-cell class="price-cell">1956 EUR</ui5-table-cell>
 		</ui5-table-row>
 
 		<ui5-table-row id="row3">
 			<ui5-table-cell class="title-cell">Notebook Basic 19</ui5-table-cell>
-			<ui5-table-cell>Very Best Screens</ui5-table-cell>
+
+			<ui5-table-cell><ui5-link href="#">I'm focus</ui5-link></ui5-table-cell>
 			<ui5-table-cell>50 x 18 x 3 cm</ui5-table-cell>
 			<ui5-table-cell>4.9 KG</ui5-table-cell>
 			<ui5-table-cell class="price-cell">2956 EUR</ui5-table-cell>
 		</ui5-table-row>
 
 	</ui5-table>
+	<ui5-button id="afterEl">After element</ui5-button>
 
 	<br>
 	<br>

diff --git a/packages/compat/test/specs/Table.spec.js b/packages/compat/test/specs/Table.spec.js
@@ -133,24 +133,45 @@ describe("Table general interaction", () => {
 				"The aria-label value is correct when there is an empty cell in the row.");
 		});
 
-		it("Should have correct focus handling when having popin rows", async () => {
-			await browser.url(`test/pages/TableAllPopin.html`);
-			await browser.setWindowSize(500, 1200);
+		describe("Keyboard handling when popin", async () => {
+			before(async () => {
+				await browser.url(`test/pages/TableAllPopin.html`);
+				await browser.setWindowSize(500, 1200);
+			})
 
-			const input = await $("#tbl2 #interactive");
-			const btn = await $("#btn-focused");
-			const secondInput = await $("#input-second-focused");
+			it("Should have correct focus handling when having popin rows", async () => {
+				const beforeBtn = await browser.$("#beforeEl");
+				const link = await browser.$("#focusedEl");
+				const afterBtn = await browser.$("#afterEl");
 
-			await input.click();
-			await browser.keys("Tab");
+				await beforeBtn.click();
+				await browser.keys("Tab");
+				await browser.keys("Tab");
 
-			assert.equal(await btn.matches(":focus"), true, "Button is focused")
+				assert.equal(await link.isFocused(), true, "Link is focused")
 
-			await browser.keys("Tab");
-			assert.equal(await secondInput.matches(":focus"), true, "Input is focused")
+				await browser.keys("Tab");
+				assert.equal(await afterBtn.isFocused(), true, "Button is focused")
+			});
 
-			await browser.setWindowSize(1600, 1200);
-		});
+			it("Should have correct focus handling when having popin rows", async () => {
+				const input = await browser.$("#tbl2 #interactive");
+				const btn = await browser.$("#btn-focused");
+				const secondInput = await browser.$("#input-second-focused");
+
+				await input.click();
+				await browser.keys("Tab");
+
+				assert.equal(await btn.isFocused(), true, "Button is focused")
+
+				await browser.keys("Tab");
+				assert.equal(await secondInput.isFocused(), true, "Input is focused")
+			});
+
+			after(async () => {
+				await browser.setWindowSize(1600, 1200);
+			})
+		})
 	});
 
 	describe("Growing Table on 'More' button press", async () => {