Skip to content

Commit 9d4737f

Browse files
aborjinikaborjinik
authored
refactor(ui5-table): warn at runtime for non-interactive navigation (#13543)
1 parent 3cbeac5 commit 9d4737f

61 files changed

Lines changed: 816 additions & 789 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/main/cypress/specs/Table.cy.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -756,6 +756,18 @@ describe("Table - Fixed Header", () => {
756756

757757
check(50, "#row-100");
758758
});
759+
760+
it("creates a stacking context on the table host", () => {
761+
cy.mount(
762+
<Table id="table" accessibleNameRef="title" noDataText="No data found">
763+
<TableHeaderRow slot="headerRow">
764+
<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
765+
</TableHeaderRow>
766+
</Table>,
767+
);
768+
769+
cy.get("#table").should("have.css", "z-index", "0");
770+
});
759771
});
760772

761773
describe("Table - Horizontal Scrolling", () => {

‎packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ const {
3232
TABLE_SELECTION: { defaultText: SELECTION },
3333
TABLE_COLUMN_HEADER_ROW: { defaultText: COLUMN_HEADER_ROW },
3434
TABLE_ROW_SELECTED: { defaultText: SELECTED },
35-
TABLE_ROW_NAVIGABLE: { defaultText: NAVIGABLE },
3635
TABLE_ROW_NAVIGATED: { defaultText: NAVIGATED },
3736
TABLE_ROW_ACTIVE: { defaultText: ACTIVE },
3837
} = Translations;
@@ -59,7 +58,7 @@ describe("Cell Custom Announcement - More details", () => {
5958
<TableCell><input id="row1-input1" value="Row1Input1"/><input id="row1-input2" value="Row1Input2" hidden/></TableCell>
6059
<TableCell><div id="row1-div"><b></b></div></TableCell>
6160
<TableCell><Button id="row1-button">Row1Cell3</Button></TableCell>
62-
<TableRowActionNavigation slot="actions" id="row1-nav-action"></TableRowActionNavigation>
61+
<TableRowActionNavigation slot="actions" id="row1-nav-action" interactive={true}></TableRowActionNavigation>
6362
<TableRowAction slot="actions" id="row1-add-action" icon={add} text="Add"></TableRowAction>
6463
<TableRowAction slot="actions" id="row1-edit-action" icon={edit} text="Edit"></TableRowAction>
6564
</TableRow>
@@ -146,22 +145,25 @@ describe("Cell Custom Announcement - More details", () => {
146145
checkAnnouncement(`Button with custom accessibility text . ${CONTAINS_CONTROL}`, true);
147146

148147
cy.realPress("ArrowRight"); // Row actions cell
149-
checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 2));
148+
checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 3));
150149
cy.focused().should("have.attr", "aria-colindex", "6")
151150
.should("have.attr", "role", "gridcell")
152151
.then($rowActionsCell => {
153152
const rowActionsCell = $rowActionsCell[0];
154153
const invisibleText = document.getElementById("ui5-invisible-text");
155-
expect(rowActionsCell.ariaLabelledByElements[0]).to.equal(invisibleText);
154+
expect(rowActionsCell.ariaLabelledByElements![0]).to.equal(invisibleText);
156155
rowActionsCell.blur();
157156
expect(rowActionsCell.ariaLabelledByElements).to.equal(null);
158157
rowActionsCell.focus();
159158
});
160159

161160
cy.get("#row1-edit-action").invoke("remove");
162-
checkAnnouncement(ONE_ROW_ACTION, true);
161+
checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 2), true);
163162

164163
cy.get("#row1-add-action").invoke("remove");
164+
checkAnnouncement(ONE_ROW_ACTION, true);
165+
166+
cy.get("#row1-nav-action").invoke("remove");
165167
checkAnnouncement(EMPTY, true);
166168

167169
cy.get("@row1NavigatedCell").should("have.attr", "role", "none")
@@ -251,7 +253,7 @@ describe("Row Custom Announcement - Less details", () => {
251253
C4
252254
<Button id="row1-button">C4Button</Button>
253255
</TableCell>
254-
<TableRowActionNavigation slot="actions" id="row1-nav-action"></TableRowActionNavigation>
256+
<TableRowActionNavigation slot="actions" id="row1-nav-action" interactive={true}></TableRowActionNavigation>
255257
<TableRowAction slot="actions" id="row1-add-action" icon={add} text="Add"></TableRowAction>
256258
</TableRow>
257259
</Table>
@@ -283,7 +285,7 @@ describe("Row Custom Announcement - Less details", () => {
283285
});
284286
});
285287

286-
function checkAnnouncement(expectedText: string, focusAgain = false, check = "contains") {
288+
function checkAnnouncement(expectedText: string, focusAgain = false, check: "contains" | "equal" = "contains") {
287289
focusAgain && cy.focused().then($el => {
288290
if ($el.attr("ui5-table-header-row") !== undefined) {
289291
cy.realPress("ArrowDown");
@@ -301,14 +303,14 @@ describe("Row Custom Announcement - Less details", () => {
301303

302304
it("should announce table rows", () => {
303305
cy.get("@row1").realClick();
304-
checkAnnouncement(`Row . 2 of 2 . ${SELECTED} . ${NAVIGABLE} . H1`);
306+
checkAnnouncement(`Row . 2 of 2 . ${SELECTED} . ${ACTIVE} . H1`);
305307
checkAnnouncement(`H1 . R1C1 . H2 . ${CONTAINS_CONTROLS} . H3 . ${EMPTY} . H4 . C4 Button C4Button`);
306-
checkAnnouncement(ONE_ROW_ACTION);
308+
checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 2));
307309
cy.focused().should("have.attr", "aria-rowindex", "2")
308310
.should("have.attr", "role", "row");
309311

310312
cy.get("#selection").invoke("attr", "selected", "");
311-
checkAnnouncement(`Row . 2 of 2 . ${NAVIGABLE}`, true);
313+
checkAnnouncement(`Row . 2 of 2 . ${ACTIVE}`, true);
312314

313315
cy.get("#row1-nav-action").invoke("prop", "interactive", true);
314316
checkAnnouncement(`Row . 2 of 2 . ${ACTIVE} . H1`, true);

‎packages/main/cypress/specs/TableRowActions.cy.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ describe("TableRowActions", () => {
5959
<TableRowAction slot="actions" icon={add} text="Add" invisible={true}></TableRowAction>
6060
</TableRow>
6161
<TableRow>
62-
<TableRowActionNavigation slot="actions"></TableRowActionNavigation>
62+
<TableRowActionNavigation slot="actions" interactive={true}></TableRowActionNavigation>
6363
</TableRow>
6464
<TableRow id="navigationRow">
6565
<TableRowActionNavigation slot="actions" id="navigationAction" interactive={true}></TableRowActionNavigation>
@@ -71,7 +71,7 @@ describe("TableRowActions", () => {
7171
checkTemplateColumn(`${8 + 36 + 8}px`);
7272
cy.get("@row1").find("[icon=add]").shadow().find("ui5-button").should("exist");
7373
cy.get("@row2").find("[icon=add]").should("have.css", "display", "block");
74-
cy.get("@row3").find("ui5-table-row-action-navigation").shadow().find("ui5-icon").should("have.attr", "name", "navigation-right-arrow");
74+
cy.get("@row3").find("ui5-table-row-action-navigation").shadow().find("ui5-button").should("have.attr", "icon", "navigation-right-arrow");
7575
cy.get("@row4").find("ui5-table-row-action-navigation").shadow().find("ui5-button").should("have.attr", "icon", "navigation-right-arrow");
7676

7777
cy.get("#addAction").invoke("on", "click", cy.stub().as("addActionClick"));
@@ -213,7 +213,7 @@ describe("TableRowActions", () => {
213213
it("tests that the aligment of navigation is more important than avoiding overflow", () => {
214214
mountTable(3, () => <>
215215
<TableRow>
216-
<TableRowActionNavigation slot="actions" invisible={true}></TableRowActionNavigation>
216+
<TableRowActionNavigation slot="actions" invisible={true} interactive={true}></TableRowActionNavigation>
217217
<TableRowAction slot="actions" icon={add} text="Add"></TableRowAction>
218218
<TableRowAction slot="actions" icon={edit} text="Edit"></TableRowAction>
219219
<TableRowAction slot="actions" icon={deleteIcon} text="Delete"></TableRowAction>

‎packages/main/src/TableRowActionBase.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ abstract class TableRowActionBase extends UI5Element {
125125
}
126126

127127
get _isInteractive() {
128-
return this.getRenderInfo().interactive;
128+
return this.getRenderInfo().interactive !== false;
129129
}
130130
}
131131

‎packages/main/src/TableRowActionNavigation.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ class TableRowActionNavigation extends TableRowActionBase {
3131
* @deprecated As of version 2.20.0, the navigation icon is deprecated.
3232
* For better accessibility, the interactive mode which renders a button, must be used instead. To handle the action, attach a listener to the `click` event.
3333
* If the navigation should be triggered when a row is pressed, set the row's `interactive` property and use the `row-click` event of the `ui5-table`.
34-
* This property will be removed in a future release.
34+
* This property will be removed in the next major version.
3535
*/
3636
@property({ type: Boolean })
3737
interactive = false;
@@ -43,6 +43,19 @@ class TableRowActionNavigation extends TableRowActionBase {
4343
return true;
4444
}
4545

46+
onEnterDOM(): void {
47+
super.onEnterDOM();
48+
if (!this.interactive) {
49+
// eslint-disable-next-line no-console
50+
console.warn(
51+
"[ui5-table-row-action-navigation] The non-interactive (icon) rendering mode is deprecated and will be removed in the next major version. "
52+
+ "Set the `interactive` property to render the navigation action as an accessible button and handle the action via the `click` event. "
53+
+ "If the navigation should be triggered when a row is pressed, set the row's `interactive` property and use the `row-click` event of `ui5-table`. "
54+
+ "Button rendering will become the only supported behavior, and the `interactive` property will then be removed.",
55+
);
56+
}
57+
}
58+
4659
getRenderInfo() {
4760
return {
4861
text: this._i18nNavigation,

‎packages/main/src/themes/Table.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
:host {
22
display: block;
33
position: relative;
4+
z-index: 0; /* create a stacking context for the sticky elements */
45
color: var(--sapList_TextColor);
56
font: var(--sapFontSize) var(--sapFontFamily);
67
}
@@ -36,8 +37,4 @@
3637
inset: 0;
3738
height: 100%;
3839
z-index: 2;
39-
}
40-
41-
:host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) {
42-
opacity: var(--sapContent_DisabledOpacity);
4340
}

‎packages/website/docs/_samples/main/Table/Basic/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import "@ui5/webcomponents/dist/Table.js";
22
import "@ui5/webcomponents/dist/TableHeaderRow.js";
33
import "@ui5/webcomponents/dist/TableHeaderCell.js";
4-
import "@ui5/webcomponents/dist/Label.js";
4+
import "@ui5/webcomponents/dist/Text.js";

‎packages/website/docs/_samples/main/Table/Basic/sample.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,25 @@
2020
<ui5-table-header-cell id="priceCol" width="220px">Price</ui5-table-header-cell>
2121
</ui5-table-header-row>
2222
<ui5-table-row>
23-
<ui5-table-cell><ui5-label><b>Notebook Basic 15</b><br>HT-1000</ui5-label></ui5-table-cell>
24-
<ui5-table-cell><ui5-label>Very Best Screens</ui5-label></ui5-table-cell>
25-
<ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>
26-
<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.2</b> KG</ui5-label></ui5-table-cell>
27-
<ui5-table-cell><ui5-label><b>956</b> EUR</ui5-label></ui5-table-cell>
23+
<ui5-table-cell><ui5-text><b>Notebook Basic 15</b><br>HT-1000</ui5-text></ui5-table-cell>
24+
<ui5-table-cell><ui5-text>Very Best Screens</ui5-text></ui5-table-cell>
25+
<ui5-table-cell><ui5-text>30 x 18 x 3 cm</ui5-text></ui5-table-cell>
26+
<ui5-table-cell><ui5-text style="color: #2b7c2b"><b>4.2</b> KG</ui5-text></ui5-table-cell>
27+
<ui5-table-cell><ui5-text><b>956</b> EUR</ui5-text></ui5-table-cell>
2828
</ui5-table-row>
2929
<ui5-table-row>
30-
<ui5-table-cell><ui5-label><b>Notebook Basic 17</b><br>HT-1001</ui5-label></ui5-table-cell>
31-
<ui5-table-cell><ui5-label>Smartcards</ui5-label></ui5-table-cell>
32-
<ui5-table-cell><ui5-label>29 x 17 x 3.1 cm</ui5-label></ui5-table-cell>
33-
<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.5</b> KG</ui5-label></ui5-table-cell>
34-
<ui5-table-cell><ui5-label><b>1249</b> EUR</ui5-label></ui5-table-cell>
30+
<ui5-table-cell><ui5-text><b>Notebook Basic 17</b><br>HT-1001</ui5-text></ui5-table-cell>
31+
<ui5-table-cell><ui5-text>Smartcards</ui5-text></ui5-table-cell>
32+
<ui5-table-cell><ui5-text>29 x 17 x 3.1 cm</ui5-text></ui5-table-cell>
33+
<ui5-table-cell><ui5-text style="color: #2b7c2b"><b>4.5</b> KG</ui5-text></ui5-table-cell>
34+
<ui5-table-cell><ui5-text><b>1249</b> EUR</ui5-text></ui5-table-cell>
3535
</ui5-table-row>
3636
<ui5-table-row>
37-
<ui5-table-cell><ui5-label><b>Notebook Basic 18</b><br>HT-1002</ui5-label></ui5-table-cell>
38-
<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
39-
<ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
40-
<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>3.7</b> KG</ui5-label></ui5-table-cell>
41-
<ui5-table-cell><ui5-label><b>29</b> EUR</ui5-label></ui5-table-cell>
37+
<ui5-table-cell><ui5-text><b>Notebook Basic 18</b><br>HT-1002</ui5-text></ui5-table-cell>
38+
<ui5-table-cell><ui5-text>Technocom</ui5-text></ui5-table-cell>
39+
<ui5-table-cell><ui5-text>32 x 21 x 4 cm</ui5-text></ui5-table-cell>
40+
<ui5-table-cell><ui5-text style="color: #2b7c2b"><b>3.7</b> KG</ui5-text></ui5-table-cell>
41+
<ui5-table-cell><ui5-text><b>29</b> EUR</ui5-text></ui5-table-cell>
4242
</ui5-table-row>
4343
</ui5-table>
4444
<!-- playground-fold -->

‎packages/website/docs/_samples/main/Table/Basic/sample.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
2-
import LabelClass from "@ui5/webcomponents/dist/Label.js";
32
import TableClass from "@ui5/webcomponents/dist/Table.js";
43
import TableCellClass from "@ui5/webcomponents/dist/TableCell.js";
54
import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js";
65
import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js";
76
import TableRowClass from "@ui5/webcomponents/dist/TableRow.js";
7+
import TextClass from "@ui5/webcomponents/dist/Text.js";
88

9-
const Label = createReactComponent(LabelClass);
109
const Table = createReactComponent(TableClass);
1110
const TableCell = createReactComponent(TableCellClass);
1211
const TableHeaderCell = createReactComponent(TableHeaderCellClass);
1312
const TableHeaderRow = createReactComponent(TableHeaderRowClass);
1413
const TableRow = createReactComponent(TableRowClass);
14+
const Text = createReactComponent(TextClass);
1515

1616
function App() {
1717
return (
@@ -36,77 +36,77 @@ function App() {
3636
</TableHeaderRow>
3737
<TableRow>
3838
<TableCell>
39-
<Label>
39+
<Text>
4040
<b>Notebook Basic 15</b>
4141
<br />
4242
HT-1000
43-
</Label>
43+
</Text>
4444
</TableCell>
4545
<TableCell>
46-
<Label>Very Best Screens</Label>
46+
<Text>Very Best Screens</Text>
4747
</TableCell>
4848
<TableCell>
49-
<Label>30 x 18 x 3 cm</Label>
49+
<Text>30 x 18 x 3 cm</Text>
5050
</TableCell>
5151
<TableCell>
52-
<Label style={{ color: "#2b7c2b" }}>
52+
<Text style={{ color: "#2b7c2b" }}>
5353
<b>4.2</b> KG
54-
</Label>
54+
</Text>
5555
</TableCell>
5656
<TableCell>
57-
<Label>
57+
<Text>
5858
<b>956</b> EUR
59-
</Label>
59+
</Text>
6060
</TableCell>
6161
</TableRow>
6262
<TableRow>
6363
<TableCell>
64-
<Label>
64+
<Text>
6565
<b>Notebook Basic 17</b>
6666
<br />
6767
HT-1001
68-
</Label>
68+
</Text>
6969
</TableCell>
7070
<TableCell>
71-
<Label>Smartcards</Label>
71+
<Text>Smartcards</Text>
7272
</TableCell>
7373
<TableCell>
74-
<Label>29 x 17 x 3.1 cm</Label>
74+
<Text>29 x 17 x 3.1 cm</Text>
7575
</TableCell>
7676
<TableCell>
77-
<Label style={{ color: "#2b7c2b" }}>
77+
<Text style={{ color: "#2b7c2b" }}>
7878
<b>4.5</b> KG
79-
</Label>
79+
</Text>
8080
</TableCell>
8181
<TableCell>
82-
<Label>
82+
<Text>
8383
<b>1249</b> EUR
84-
</Label>
84+
</Text>
8585
</TableCell>
8686
</TableRow>
8787
<TableRow>
8888
<TableCell>
89-
<Label>
89+
<Text>
9090
<b>Notebook Basic 18</b>
9191
<br />
9292
HT-1002
93-
</Label>
93+
</Text>
9494
</TableCell>
9595
<TableCell>
96-
<Label>Technocom</Label>
96+
<Text>Technocom</Text>
9797
</TableCell>
9898
<TableCell>
99-
<Label>32 x 21 x 4 cm</Label>
99+
<Text>32 x 21 x 4 cm</Text>
100100
</TableCell>
101101
<TableCell>
102-
<Label style={{ color: "#2b7c2b" }}>
102+
<Text style={{ color: "#2b7c2b" }}>
103103
<b>3.7</b> KG
104-
</Label>
104+
</Text>
105105
</TableCell>
106106
<TableCell>
107-
<Label>
107+
<Text>
108108
<b>29</b> EUR
109-
</Label>
109+
</Text>
110110
</TableCell>
111111
</TableRow>
112112
</Table>

‎packages/website/docs/_samples/main/Table/ColumnWidths/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import "@ui5/webcomponents/dist/Table.js";
22
import "@ui5/webcomponents/dist/TableHeaderRow.js";
33
import "@ui5/webcomponents/dist/TableHeaderCell.js";
4-
import "@ui5/webcomponents/dist/Label.js";
54
import "@ui5/webcomponents/dist/Slider.js";
5+
import "@ui5/webcomponents/dist/Text.js";
66

77
const slider = document.getElementById("slider");
88
const table = document.getElementById("table");

0 commit comments

Comments
 (0)