From 60c5b98845b56295306d6aeaf7a0b0933599c737 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:46:18 +0300
Subject: [PATCH] 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
---
packages/compat/src/TableRow.ts | 2 +-
packages/compat/src/bundle.esm.ts | 1 +
packages/compat/test/pages/TableAllPopin.html | 10 ++--
packages/compat/test/specs/Table.spec.js | 47 ++++++++++++++-----
4 files changed, 43 insertions(+), 17 deletions(-)
diff --git a/packages/compat/src/TableRow.ts b/packages/compat/src/TableRow.ts
index 0afb2caff836..aa31cc243529 100644
--- 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
index 95f14d7043b2..d92e4fa4a5a6 100644
--- 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
index 2665b126c7d2..7d096b24a568 100644
--- a/packages/compat/test/pages/TableAllPopin.html
+++ b/packages/compat/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/compat/test/specs/Table.spec.js b/packages/compat/test/specs/Table.spec.js
index ebfaa0b06033..57891af92cd2 100644
--- 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 () => {