diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs index ca25332f055c..19ca997c733e 100644 --- a/packages/main/src/Table.hbs +++ b/packages/main/src/Table.hbs @@ -1,7 +1,7 @@ - + {{#each visibleColumns}} {{/each}} diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 34690ab24bc0..0ddc9763be5f 100644 --- a/packages/main/src/Table.js +++ b/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; diff --git a/packages/main/src/TableCell.hbs b/packages/main/src/TableCell.hbs index a06f221f1b45..4e287031a30c 100644 --- a/packages/main/src/TableCell.hbs +++ b/packages/main/src/TableCell.hbs @@ -1,3 +1,3 @@ - \ No newline at end of file diff --git a/packages/main/src/TableCell.js b/packages/main/src/TableCell.js index 1b41d230f730..adc0db7f05ee 100644 --- a/packages/main/src/TableCell.js +++ b/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(); diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs index 9ade85268229..53ab6813b782 100644 --- a/packages/main/src/TableRow.hbs +++ b/packages/main/src/TableRow.hbs @@ -1,14 +1,18 @@ - - {{#each visibleCells}} - - {{/each}} + + {{#each visibleCells}} + + {{/each}} {{#each popinCells}} - +
+
- {{this.popinText}}:
diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index 6a5be46687f0..f271ee206530 100644 --- a/packages/main/src/TableRow.js +++ b/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(); diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css index 3087ff55e7fc..8346035fff84 100644 --- a/packages/main/src/themes/Table.css +++ b/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; } diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css index c1d10e8743b7..ad96014f169c 100644 --- a/packages/main/src/themes/TableRow.css +++ b/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; diff --git a/packages/main/src/themes/base/Table-parameters.css b/packages/main/src/themes/base/Table-parameters.css index 74a1aa7d3a59..f618067240b0 100644 --- a/packages/main/src/themes/base/Table-parameters.css +++ b/packages/main/src/themes/base/Table-parameters.css @@ -1 +1,3 @@ -:root {} \ No newline at end of file +:root { + --ui5_table_header_row_outline_width: 1px; +} \ No newline at end of file diff --git a/packages/main/src/themes/base/TableRow-parameters.css b/packages/main/src/themes/base/TableRow-parameters.css new file mode 100644 index 000000000000..cbaa6b16cfce --- /dev/null +++ b/packages/main/src/themes/base/TableRow-parameters.css @@ -0,0 +1,3 @@ +:root { + --ui5_table_row_outline_width: 1px; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/TableRow-parameters.css b/packages/main/src/themes/sap_belize/TableRow-parameters.css new file mode 100644 index 000000000000..165826574151 --- /dev/null +++ b/packages/main/src/themes/sap_belize/TableRow-parameters.css @@ -0,0 +1 @@ +@import "../base/TableRow-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index b436d1691b02..b1265dafdbdb 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/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"; diff --git a/packages/main/src/themes/sap_belize_hcb/Table-parameters.css b/packages/main/src/themes/sap_belize_hcb/Table-parameters.css index 3adeb1174826..06f50e37eed1 100644 --- a/packages/main/src/themes/sap_belize_hcb/Table-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/Table-parameters.css @@ -1 +1,5 @@ -@import "../base/Table-parameters.css"; \ No newline at end of file +@import "../base/Table-parameters.css"; + +:root { + --ui5_table_header_row_outline_width: 0.125rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/TableRow-parameters.css b/packages/main/src/themes/sap_belize_hcb/TableRow-parameters.css new file mode 100644 index 000000000000..62ffa72af66b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css index 489e9112a486..6af402580335 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/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"; diff --git a/packages/main/src/themes/sap_fiori_3/TableRow-parameters.css b/packages/main/src/themes/sap_fiori_3/TableRow-parameters.css new file mode 100644 index 000000000000..165826574151 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3/TableRow-parameters.css @@ -0,0 +1 @@ +@import "../base/TableRow-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index 960556a1af01..cfc9f0825074 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/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"; diff --git a/packages/main/test/pages/Table.html b/packages/main/test/pages/Table.html index eef576ec1593..8250224fb316 100644 --- a/packages/main/test/pages/Table.html +++ b/packages/main/test/pages/Table.html @@ -179,14 +179,14 @@
- - Dublin + + Dublin click - Sofia + Sofia click - - London + + London