From 3d5c2074e67a0f05a4618d0aef36ee5773fb5d51 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Wed, 10 Jul 2024 10:57:46 +0300
Subject: [PATCH] fix(ui5-table): access interactive content inside popin cell
(#9424)
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
---
packages/main/src/TableRow.ts | 2 +-
packages/main/test/pages/TableAllPopin.html | 10 +++--
packages/main/test/specs/Table.spec.js | 49 +++++++++++++++------
3 files changed, 44 insertions(+), 17 deletions(-)
diff --git a/packages/main/src/TableRow.ts b/packages/main/src/TableRow.ts
index 4904319740c3..ae4ee742f86e 100644
--- a/packages/main/src/TableRow.ts
+++ b/packages/main/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/main/test/pages/TableAllPopin.html b/packages/main/test/pages/TableAllPopin.html
index 2665b126c7d2..7d096b24a568 100644
--- a/packages/main/test/pages/TableAllPopin.html
+++ b/packages/main/test/pages/TableAllPopin.html
@@ -24,6 +24,7 @@
+ Before element
@@ -51,7 +52,7 @@
Notebook Basic 15
- Very Best Screens
+ I'm focus
30 x 18 x 3 cm
4.2 KG
956 EUR
@@ -59,7 +60,8 @@
Notebook Basic 17
- Very Best Screens
+
+ I'm focus
40 x 18 x 3 cm
4.6 KG
1956 EUR
@@ -67,13 +69,15 @@
Notebook Basic 19
- Very Best Screens
+
+ I'm focus
50 x 18 x 3 cm
4.9 KG
2956 EUR
+ After element
diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js
index 31f95bf76eab..8733ddaa1d68 100644
--- a/packages/main/test/specs/Table.spec.js
+++ b/packages/main/test/specs/Table.spec.js
@@ -133,24 +133,47 @@ 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.getProperty("focused"), true, "Button is focused")
+ assert.equal(await link.getProperty("focused"), true, "Link is focused")
+
+ await browser.keys("Tab");
+ assert.equal(await afterBtn.getProperty("focused"), true, "Button is focused")
+ });
+
+ 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.getProperty("focused"), true, "Button is focused")
+
+ await browser.keys("Tab");
+ assert.equal(await secondInput.getProperty("focused"), true, "Input is focused")
+ });
+
+ after(async () => {
+ await browser.setWindowSize(1600, 1200);
+ })
+ })
- await browser.keys("Tab");
- assert.equal(await secondInput.getProperty("focused"), true, "Input is focused")
- await browser.setWindowSize(1600, 1200);
- });
});
describe("Growing Table on 'More' button press", async () => {