fix(ui5-table): fix row navigation and focus handling (#876)

packages/main/src/Table.hbs

@@ -1,7 +1,7 @@
 <table border="0" cellspacing="0" cellpadding="0">
 
 	<thead>
-		<tr class="ui5-table-header-row" style="height: 48px">
+		<tr id="{{_id}}-columnHeader" class="ui5-table-header-row" tabindex="0" style="height: 48px" @click="{{onColumnHeaderClick}}">
 			{{#each visibleColumns}}
 				<slot name="{{this._individualSlot}}"></slot>
 			{{/each}}

packages/main/src/Table.js

@@ -166,7 +166,8 @@ class Table extends UI5Element {
 		this._itemNavigation = new ItemNavigation(this);
 
 		this._itemNavigation.getItemsCallback = function getItemsCallback() {
-			return this.rows;
+			const columnHeader = this.getColumnHeader();
+			return columnHeader ? [columnHeader, ...this.rows] : this.rows;
 		}.bind(this);
 
 		this.fnOnRowFocused = this.onRowFocused.bind(this);
@@ -210,6 +211,15 @@ class Table extends UI5Element {
 		}
 	}
 
+	onColumnHeaderClick(event) {
+		this.getColumnHeader().focus();
+		this._itemNavigation.update(event.target);
+	}
+
+	getColumnHeader() {
+		return this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-columnHeader`);
+	}
+
 	popinContent(_event) {
 		const clientRect = this.getDomRef().getBoundingClientRect();
 		const tableWidth = clientRect.width;

packages/main/src/TableCell.hbs

@@ -1,3 +1,3 @@
-<td>
+<td @click="{{_onclick}}" tabindex="-1">
 	<slot></slot>
 </td>

packages/main/src/TableCell.js

@@ -79,6 +79,10 @@ class TableCell extends UI5Element {
 	static get template() {
 		return TableCellTemplate;
 	}
+
+	_onclick(event) {
+		this.fireEvent("_cellclick", event);
+	}
 }
 
 TableCell.define();

packages/main/src/TableRow.hbs

@@ -1,14 +1,18 @@
-<tr class="ui5-table-row-root">
-	{{#each visibleCells}}
-		<slot name="{{this._individualSlot}}"></slot>
-	{{/each}}
+<tr
+	class="ui5-table-row-root"
+	tabindex="{{_tabIndex}}"
+	@focusin="{{_onfocusin}}"
+	@ui5-_cellclick="{{_oncellclick}}"
+	data-sap-focus-ref>
+		{{#each visibleCells}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/each}}
 </tr>
 
 
 {{#each popinCells}}
-	<tr class="ui5-table-popin-row">
+	<tr class="ui5-table-popin-row" @ui5-_cellclick="{{_oncellclick}}">
 		<td colspan="{{../visibleCellsCount}}">
-
 			<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
 			<div>
 				<slot name="{{this.cell._individualSlot}}"></slot>

packages/main/src/TableRow.js

@@ -56,6 +56,11 @@ const metadata = {
  * @public
  */
 class TableRow extends UI5Element {
+	constructor() {
+		super();
+		this.fnOnCellClick = this._oncellclick.bind(this);
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -72,6 +77,28 @@ class TableRow extends UI5Element {
 		return TableRowTemplate;
 	}
 
+	_onfocusin(event, forceSelfFocus = false) {
+		if (forceSelfFocus || this._getActiveElementTagName() === "ui5-table-cell") {
+			this.getDomRef().focus();
+		}
+
+		this.fireEvent("_focused", event);
+	}
+
+	_oncellclick(event) {
+		if (this._getActiveElementTagName() === "body") {
+			// If the user clickes on non-focusable element within the ui5-table-cell,
+			// the focus goes to the body, se we have to bring it back to the row.
+			// If the user clicks on input, button or similar clickable element,
+			// the focus remains on that element.
+			this._onfocusin(event, true /* force row focus */);
+		}
+	}
+
+	_getActiveElementTagName() {
+		return document.activeElement.localName.toLocaleLowerCase();
+	}
+
 	onBeforeRendering() {
 		this.visibleCells = [];
 		this.popinCells = [];
@@ -128,10 +155,6 @@ class TableRow extends UI5Element {
 	get visibleCellsCount() {
 		return this.visibleCells.length;
 	}
-
-	onfocusin(event) {
-		this.fireEvent("_focused", event);
-	}
 }
 
 TableRow.define();

packages/main/src/themes/Table.css

@@ -16,6 +16,11 @@ table {
 	font-size: var(--sapMFontMediumSize);
 }
 
+.ui5-table-header-row:focus {
+	outline: var(--ui5_table_header_row_outline_width) dotted var(--sapUiContentFocusColor);
+	outline-offset: -0.125rem;
+}
+
 tr {
 	height: 3rem;
 }

packages/main/src/themes/TableRow.css

@@ -7,6 +7,11 @@
 	border-top: 1px solid var(--sapUiListBorderColor);
 }
 
+.ui5-table-row-root:focus {
+	outline: var(--ui5_table_row_outline_width) dotted var(--sapUiContentFocusColor);
+	outline-offset: -0.125rem;
+}
+
 .ui5-table-popin-row td {
 	padding: .25rem;
 	padding-left: 1rem;

packages/main/src/themes/base/Table-parameters.css

@@ -1 +1,3 @@
-:root {}
+:root {
+	--ui5_table_header_row_outline_width: 1px;
+}

packages/main/src/themes/base/TableRow-parameters.css

@@ -0,0 +1,3 @@
+:root {
+	--ui5_table_row_outline_width: 1px;
+}

packages/main/src/themes/sap_belize/TableRow-parameters.css

@@ -0,0 +1 @@
+@import "../base/TableRow-parameters.css";

packages/main/src/themes/sap_belize/parameters-bundle.css

@@ -24,6 +24,7 @@
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";
 @import "./Table-parameters.css";
+@import "./TableRow-parameters.css";
 @import "./TextArea-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./ToggleButton-parameters.css";

packages/main/src/themes/sap_belize_hcb/Table-parameters.css

@@ -1 +1,5 @@
-@import "../base/Table-parameters.css";
+@import "../base/Table-parameters.css";
+
+:root {
+	--ui5_table_header_row_outline_width: 0.125rem;
+}

packages/main/src/themes/sap_belize_hcb/TableRow-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/TableRow-parameters.css";
+
+:root {
+	--ui5_table_row_outline_width: 0.125rem;
+}

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -23,6 +23,7 @@
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";
 @import "./Table-parameters.css";
+@import "./TableRow-parameters.css";
 @import "./TextArea-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./ToggleButton-parameters.css";

packages/main/src/themes/sap_fiori_3/TableRow-parameters.css

@@ -0,0 +1 @@
+@import "../base/TableRow-parameters.css";

packages/main/src/themes/sap_fiori_3/parameters-bundle.css

@@ -27,5 +27,6 @@
 @import "./YearPicker-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Table-parameters.css";
+@import "./TableRow-parameters.css";
 @import "./Token-parameters.css";
 @import "./MultiComboBox-parameters.css";

packages/main/test/pages/Table.html

@@ -179,14 +179,14 @@
 			</div>
 		</ui5-table-column>
 
-		<ui5-table-row>
-			<ui5-table-cell>Dublin</ui5-table-cell>
+		<ui5-table-row >
+			<ui5-table-cell><span>Dublin</span> <ui5-button>click</ui5-button></ui5-table-cell>
 		</ui5-table-row>
 		<ui5-table-row>
-			<ui5-table-cell>Sofia</ui5-table-cell>
+			<ui5-table-cell><ui5-label for="myInput">Sofia</ui5-label> <ui5-input id="myInput">click</ui5-input></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row>
-			<ui5-table-cell>London</ui5-table-cell>
+		<ui5-table-row >
+			<ui5-table-cell>London <input /> </ui5-table-cell>
 		</ui5-table-row>
 	</ui5-table>