fix(ui5-table-row): fire row-click on SPACE/ENTER (#2954)

Start firing row-click upon ENTER/SPACE FIXES: #2944
SAP · Mar 18, 2021 · 179e05a · 179e05a
1 parent 7352eb0
commit 179e05a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs
@@ -3,6 +3,8 @@
 	tabindex="{{_tabIndex}}"
 	@focusin="{{_onfocusin}}"
 	@click="{{_onrowclick}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}"
 	aria-label="{{ariaLabelText}}"
 	data-sap-focus-ref
 	part="row"
@@ -21,7 +23,10 @@
 
 {{#if shouldPopin}}
 	{{#each popinCells}}
-		<tr part="popin-row" role="row" class="{{this.classes}}" @click="{{../_onrowclick}}">
+		<tr part="popin-row" role="row" class="{{this.classes}}"
+			@click="{{../_onrowclick}}"
+			@keydown="{{../_onkeydown}}"
+			@keyup="{{../_onkeyup}}">
 			<td colspan="{{../visibleCellsCount}}" role="cell">
 				{{#if this.popinText}}
 					<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>

diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js
@@ -1,5 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+
+// Template
 import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
 
 // Styles
@@ -97,6 +100,22 @@ class TableRow extends UI5Element {
 		this.fireEvent("row-click", { row: this });
 	}
 
+	_onkeydown(event) {
+		if (isEnter(event)) {
+			this.fireEvent("row-click", { row: this });
+		}
+
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
+	}
+
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			this.fireEvent("row-click", { row: this });
+		}
+	}
+
 	_getActiveElementTagName() {
 		return document.activeElement.localName.toLocaleLowerCase();
 	}

diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js
@@ -43,18 +43,24 @@ describe("Table general interaction", () => {
 		assert.strictEqual(tableLabel.getHTML(false), "Number of poppedColumns: 4", "popinChange should be fired and columns should be 4");
 	});
 
-	it("tests rowClick is fired", () => {
+	it("tests row-click is fired", () => {
 		const lbl = browser.$("#testRowClickResult");
 		const cellInRow1 = browser.$("#testRowClickCell1");
 		const cellInRow2 = browser.$("#testRowClickCell2");
 		const row1Data = "Dublin";
 		const row2Data = "London";
 
 		cellInRow1.click();
-		assert.ok(lbl.getHTML().indexOf(row1Data), "Event rowClick fired and intercepted.");
+		assert.ok(lbl.getHTML().indexOf(row1Data), "Event row-click fired and intercepted.");
 
 		cellInRow2.click();
-		assert.ok(lbl.getHTML().indexOf(row2Data), "Event rowClick fired and intercepted.");
+		assert.ok(lbl.getHTML().indexOf(row2Data), "Event row-click fired and intercepted.");
+
+		cellInRow1.keys("Space");
+		assert.ok(lbl.getHTML().indexOf(row1Data), "Event row-click fired and intercepted.");
+
+		cellInRow2.keys("Enter");
+		assert.ok(lbl.getHTML().indexOf(row2Data), "Event row-click fired and intercepted.");
 	});
 
 	it("tests row aria-label value", () => {