Skip to content

feat(ui5-table): alternateRowColors property added #12468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 17, 2025
Merged

feat(ui5-table): alternateRowColors property added #12468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e378e51
feat(ui5-table): alternateRowColors property added
aborjinik Oct 13, 2025
7c94352
feat(ui5-table): alternateRowColors property added
aborjinik Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 42 additions & 1 deletion packages/main/cypress/specs/Table.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import TableHeaderRow from "../../src/TableHeaderRow.js";
import TableCell from "../../src/TableCell.js";
import TableRow from "../../src/TableRow.js";
import TableSelectionMulti from "../../src/TableSelectionMulti.js";
import TableSelectionSingle from "../../src/TableSelectionSingle.js";
import TableHeaderCell from "../../src/TableHeaderCell.js";
import TableHeaderCellActionAI from "../../src/TableHeaderCellActionAI.js";
import Label from "../../src/Label.js";
Expand Down Expand Up @@ -249,6 +250,47 @@ describe("Table - Rendering", () => {
// 2fr is being ignored
checkWidth("#colD", 48);
});

it("should alternate rows", () => {
cy.mount(
<Table id="table1" alternateRowColors={true}>
<TableSelectionSingle id="selection" slot="features"></TableSelectionSingle>
<TableHeaderRow id="hr" slot="headerRow">
<TableHeaderCell>ColumnA</TableHeaderCell>
</TableHeaderRow>
<TableRow id="r1" rowKey="r1" interactive>
<TableCell>R1C1</TableCell>
</TableRow>
<TableRow id="r2" rowKey="r2" interactive>
<TableCell>R2C1</TableCell>
</TableRow>
<TableRow id="r3" rowKey="r3" interactive>
<TableCell>R3C1</TableCell>
</TableRow>
<TableRow id="r4" rowKey="r4" interactive>
<TableCell>R4C1</TableCell>
</TableRow>
</Table>
);

cy.get("#table1").then($table => {
const rows = $table.find("[ui5-table-row]").get();
const rowBackgrounds = rows.map(row => getComputedStyle(row).backgroundColor);
expect(rowBackgrounds[0]).to.not.equal(rowBackgrounds[1]);
expect(rowBackgrounds[1]).to.not.equal(rowBackgrounds[2]);
expect(rowBackgrounds[2]).to.not.equal(rowBackgrounds[3]);
expect(rowBackgrounds[0]).to.equal(rowBackgrounds[2]);
expect(rowBackgrounds[1]).to.equal(rowBackgrounds[3]);
});

cy.get("#selection").invoke("prop", "selected", "r2"); cy.wait(50);
cy.get("#table1").then($table => {
const rows = $table.find("[ui5-table-row]").get();
const rowBackgrounds = rows.map(row => getComputedStyle(row).backgroundColor);
expect(rowBackgrounds[1]).to.not.equal(rowBackgrounds[3]);
expect(rowBackgrounds[0]).to.equal(rowBackgrounds[2]);
});
});
});

describe("Table - Popin Mode", () => {
Expand Down Expand Up @@ -994,7 +1036,6 @@ describe("Table - HeaderCell", () => {
cy.get("@headerCell2").should("not.have.attr", "aria-sort");

cy.get("@table").invoke("css", "width", "250px");
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(50);

cy.get("@row1").find("ui5-table-cell[_popin]").as("row1popins");
Expand Down
102 changes: 98 additions & 4 deletions packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const {
TABLE_COLUMN_HEADER_ROW: { defaultText: COLUMN_HEADER_ROW },
TABLE_ROW_SELECTED: { defaultText: SELECTED },
TABLE_ROW_NAVIGABLE: { defaultText: NAVIGABLE },
TABLE_ROW_NAVIGATED: { defaultText: NAVIGATED },
TABLE_ROW_ACTIVE: { defaultText: ACTIVE },
} = Translations;

Expand All @@ -48,7 +49,7 @@ describe("Cell Custom Announcement - More details", () => {
</TableHeaderCell>
<TableHeaderCell data-ui5-table-acc-text="Header2"><input/></TableHeaderCell>
<TableHeaderCell><div>Header3</div></TableHeaderCell>
<TableHeaderCell></TableHeaderCell>
<TableHeaderCell sort-indicator="Descending"></TableHeaderCell>
</TableHeaderRow>
<TableRow navigated>
<TableCell>
Expand All @@ -73,6 +74,7 @@ describe("Cell Custom Announcement - More details", () => {
cy.get("@row1").find("#row1-input1").as("row1Input1");
cy.get("@row1").find("#row1-input2").as("row1Input2");
cy.get("@row1").find("#row1-div").as("row1Div");
cy.get("@row1").shadow().find("#navigated-cell").as("row1NavigatedCell");
});

function checkAnnouncement(expectedText: string, focusAgain = false) {
Expand All @@ -88,14 +90,23 @@ describe("Cell Custom Announcement - More details", () => {

it("should announce table cells", () => {
cy.get("@row1").realClick(); // row focused
cy.focused().should("have.attr", "aria-rowindex", "2")
.should("have.attr", "role", "row");

cy.realPress("ArrowRight"); // selection cell focused
checkAnnouncement("");
cy.focused().should("have.attr", "aria-colindex", "1")
.should("have.attr", "role", "gridcell");

cy.realPress("ArrowRight"); // first cell focused
checkAnnouncement("Row1Cell1");
cy.focused().should("have.attr", "aria-colindex", "2")
.should("have.attr", "role", "gridcell");

cy.realPress("ArrowRight"); // second cell focused
checkAnnouncement(CONTAINS_CONTROL);
cy.focused().should("have.attr", "aria-colindex", "3")
.should("have.attr", "role", "gridcell");

cy.get("@row1Input2").invoke("removeAttr", "hidden");
checkAnnouncement(CONTAINS_CONTROLS, true);
Expand All @@ -105,6 +116,8 @@ describe("Cell Custom Announcement - More details", () => {

cy.realPress("ArrowRight"); // third cell focused
checkAnnouncement(EMPTY);
cy.focused().should("have.attr", "aria-colindex", "4")
.should("have.attr", "role", "gridcell");

cy.get("@row1Div").invoke("attr", "tabindex", "0");
cy.get("@row1Div").invoke("css", "width", "150px");
Expand All @@ -114,6 +127,8 @@ describe("Cell Custom Announcement - More details", () => {

cy.realPress("ArrowRight"); // fourth cell focused
checkAnnouncement(`Row1Cell3 . ${CONTAINS_CONTROL}`);
cy.focused().should("have.attr", "aria-colindex", "5")
.should("have.attr", "role", "gridcell");

cy.document().then((doc) => {
const row1Button = doc.getElementById("row1-button") as Button;
Expand All @@ -130,38 +145,60 @@ describe("Cell Custom Announcement - More details", () => {
cy.get("@row1Button").invoke("attr", "data-ui5-table-acc-text", "Button with custom accessibility text");
checkAnnouncement(`Button with custom accessibility text . ${CONTAINS_CONTROL}`, true);

cy.realPress("ArrowRight"); // ROW_ACTIONS cell
cy.realPress("ArrowRight"); // Row actions cell
checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 2));
cy.focused().should("have.attr", "aria-colindex", "6")
.should("have.attr", "role", "gridcell");

cy.get("#row1-edit-action").invoke("remove");
checkAnnouncement(ONE_ROW_ACTION, true);

cy.get("#row1-add-action").invoke("remove");
checkAnnouncement(EMPTY, true);

cy.get("@row1NavigatedCell").should("have.attr", "role", "none")
.should("have.attr", "aria-hidden", "true");

cy.realPress("Home"); // selection cell focused
checkAnnouncement("");
});

it("should announce table header cells", () => {
cy.get("@headerRow").realClick(); // header row focused
cy.focused().should("have.attr", "aria-rowindex", "1")
.should("have.attr", "role", "row");

cy.realPress("ArrowRight"); // selection cell focused
checkAnnouncement("");
cy.focused().should("have.attr", "aria-colindex", "1")
.should("have.attr", "role", "columnheader");

cy.realPress("ArrowRight"); // first cell focused
checkAnnouncement(`Header1 ${GENERATED_BY_AI} . ${CONTAINS_CONTROL}`);
cy.focused().should("have.attr", "aria-colindex", "2")
.should("have.attr", "role", "columnheader")
.should("have.attr", "aria-sort", "ascending");

cy.realPress("ArrowRight"); // second cell focused
checkAnnouncement("Header2");
cy.focused().should("have.attr", "aria-colindex", "3")
.should("have.attr", "role", "columnheader");

cy.realPress("ArrowRight"); // third cell focused
checkAnnouncement("Header3");
cy.focused().should("have.attr", "aria-colindex", "4")
.should("have.attr", "role", "columnheader");

cy.realPress("ArrowRight"); // forth cell focused
checkAnnouncement(EMPTY);
cy.focused().should("have.attr", "aria-colindex", "5")
.should("have.attr", "role", "columnheader")
.should("have.attr", "aria-sort", "descending");

cy.realPress("ArrowRight"); // forth cell focused
cy.realPress("ArrowRight"); // row action focused
checkAnnouncement(ROW_ACTIONS);
cy.focused().should("have.attr", "aria-colindex", "6")
.should("have.attr", "role", "columnheader");

cy.realPress("Home"); // selection cell focused
checkAnnouncement("");
Expand Down Expand Up @@ -217,6 +254,8 @@ describe("Row Custom Announcement - Less details", () => {
cy.get("#table0").shadow().find("#table").as("innerTable");
cy.get("@rows").first().as("row1");
cy.get("@row1").find("#row1-button").as("row1Button");
cy.get("@row1").find("ui5-table-cell").as("row1Cells");
cy.get("@headerRow").find("ui5-table-header-cell").first().as("headerRowCells");

cy.document().then((doc) => {
const header1Label = doc.getElementById("Header1Label") as Label;
Expand Down Expand Up @@ -257,6 +296,8 @@ describe("Row Custom Announcement - Less details", () => {
checkAnnouncement(`Row . 2 of 2 . ${SELECTED} . ${NAVIGABLE} . H1`);
checkAnnouncement(`H1 . R1C1 . H2 . ${CONTAINS_CONTROLS} . H3 . ${EMPTY} . H4 . C4 Button C4Button`);
checkAnnouncement(ONE_ROW_ACTION);
cy.focused().should("have.attr", "aria-rowindex", "2")
.should("have.attr", "role", "row");

cy.get("#selection").invoke("attr", "selected", "");
checkAnnouncement(`Row . 2 of 2 . ${NAVIGABLE}`, true);
Expand All @@ -277,17 +318,50 @@ describe("Row Custom Announcement - Less details", () => {

cy.get("#row1-nav-action").invoke("remove");
cy.get("#row1-add-action").invoke("remove");
checkAnnouncement(`Row . 2 of 2 . H1 . R1C1 . H2 . ${CONTAINS_CONTROLS} . H4Popin . C4 Button C4Button`, true, "equal");
checkAnnouncement(`Row . 2 of 2 . H1 . R1C1 . H2 . ${CONTAINS_CONTROLS} . H4Popin . C4 Button C4Button . ${NAVIGATED}`, true, "equal");

cy.realPress("ArrowRight"); // selection cell focused
checkAnnouncement("");
cy.focused().should("have.attr", "aria-colindex", "1")
.should("have.attr", "role", "gridcell");

cy.realPress("ArrowRight"); // first cell focused
checkAnnouncement("R1C1", false, "equal");
cy.focused().should("have.attr", "aria-colindex", "2")
.should("have.attr", "role", "gridcell");

cy.realPress("ArrowRight"); // row action cell focused
checkAnnouncement(EMPTY, false, "equal");
cy.focused().should("have.attr", "aria-colindex", "3")
.should("have.attr", "role", "gridcell");

cy.realPress("End"); // popin cell focused we need details
checkAnnouncement(`H2 . ${CONTAINS_CONTROLS} . H4Popin ${GENERATED_BY_AI} . ${CONTAINS_CONTROL} . C4 Button C4Button ${REQUIRED} ${DISABLED} ${READONLY} . ${CONTAINS_CONTROL}`);
cy.focused().should("have.attr", "aria-colindex", "4")
.should("have.attr", "role", "gridcell");

cy.get("@row1Cells").each(($cell, index) => {
if (index === 0) return;
cy.wrap($cell).should("have.attr", "_popin");
cy.wrap($cell).should("not.have.attr", "role");
cy.wrap($cell).should("not.have.attr", "aria-colindex");
});

cy.realPress("Home"); // selection cell focused
cy.realPress("Home"); // row focused

cy.get("#table0").invoke("css", "width", "1000px");
checkAnnouncement(`Row . 2 of 2 . H1 . R1C1 . H2 . ${CONTAINS_CONTROLS} . H3 . ${EMPTY} . H4 . C4 Button C4Button . ${NAVIGATED}`, true, "equal");
cy.get("@row1Cells").each(($cell, index) => {
cy.wrap($cell).should("not.have.attr", "_popin");
cy.wrap($cell).should("have.attr", "role", "gridcell");
cy.wrap($cell).should("have.attr", "aria-colindex", `${index + 2}`);
});

cy.get("@row1").shadow().find("#navigated-cell").should("have.attr", "role", "none")
.should("have.attr", "aria-hidden", "true");

cy.get("@row1").invoke("prop", "navigated", false);
checkAnnouncement(`Row . 2 of 2 . H1 . R1C1 . H2 . ${CONTAINS_CONTROLS} . H3 . ${EMPTY} . H4 . C4 Button C4Button`, true, "equal");

cy.realPress("ArrowUp"); // header row focused
Expand Down Expand Up @@ -319,5 +393,25 @@ describe("Row Custom Announcement - Less details", () => {

cy.get("#table0").invoke("append", '<ui5-table-selection-single slot="features"></ui5-table-selection-single>');
checkAnnouncement(`${COLUMN_HEADER_ROW} . ${SELECTION} . H1 . H2 . H3 . H4`, true, "equal");

cy.get("#table0").invoke("css", "width", "301px");
checkAnnouncement(`${COLUMN_HEADER_ROW} . ${SELECTION} . H1`, true, "equal");
cy.get("@headerRowCells").each(($cell, index) => {
if (index === 0) {
cy.wrap($cell).should("have.attr", "role", "columnheader");
cy.wrap($cell).should("have.attr", "aria-colindex", "2");
} else {
cy.wrap($cell).should("have.attr", "_popin");
cy.wrap($cell).should("not.have.attr", "role");
cy.wrap($cell).should("not.have.attr", "aria-colindex");
}
});

cy.get("#table0").invoke("css", "width", "1000px");
checkAnnouncement(`${COLUMN_HEADER_ROW} . ${SELECTION} . H1 . H2 . H3 . H4`, true, "equal");
cy.get("@headerRowCells").each(($cell, index) => {
cy.wrap($cell).should("have.attr", "role", "columnheader");
cy.wrap($cell).should("have.attr", "aria-colindex", `${index + 2}`);
});
});
});
29 changes: 4 additions & 25 deletions packages/main/cypress/specs/TableGrowing.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,6 @@ describe("TableGrowing - Button", () => {
.should("have.attr", "role", "button")
.should("have.attr", "aria-labelledby", "text subtext");

cy.get("[ui5-table")
.shadow()
.find("#growing-row")
.should("exist")
.should("have.attr", "aria-hidden", "true");

cy.get("[ui5-table-growing]")
.shadow()
.find("#text")
Expand Down Expand Up @@ -104,10 +98,10 @@ describe("TableGrowing - Button", () => {
</Table>
);

cy.get("[ui5-table]")
cy.get("[ui5-table-growing]")
.shadow()
.find("#growing-row")
.should("not.exist");
.find("#button")
.should("not.be.visible");
});
});

Expand Down Expand Up @@ -221,11 +215,6 @@ describe("TableGrowing - Scroll", () => {
.shadow()
.find("#button")
.should("not.be.visible");

cy.get("[ui5-table]")
.shadow()
.find("#growing-row")
.should("not.exist");
});

it("tests button shown when not scrollable", () => {
Expand All @@ -234,12 +223,7 @@ describe("TableGrowing - Scroll", () => {
cy.get("[ui5-table-growing]")
.shadow()
.find("#button")
.should("exist");

cy.get("[ui5-table]")
.shadow()
.find("#growing-row")
.should("exist");
.should("be.visible");
});
});

Expand Down Expand Up @@ -310,11 +294,6 @@ describe("TableGrowing - Scroll", () => {
.find("#button")
.should("not.be.visible");

cy.get("[ui5-table]")
.shadow()
.find("#growing-row")
.should("not.exist");

for (let i = 2; i <= 6; i++) {
cy.get("#wrapper")
.scrollTo("bottom", { duration: 300 });
Expand Down
Loading
Loading