From 9c447240d279c870fe2ad337f9951ab64a4aa7c7 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 1 Feb 2024 15:45:17 -0800 Subject: [PATCH 1/7] feat(table): Add nonInteractive property to control focus behavior --- .../src/components/table-cell/resources.ts | 1 + .../src/components/table-cell/table-cell.scss | 9 +- .../src/components/table-cell/table-cell.tsx | 10 +- .../src/components/table-header/resources.ts | 1 + .../components/table-header/table-header.scss | 3 +- .../components/table-header/table-header.tsx | 8 +- .../src/components/table-row/table-row.tsx | 11 +- .../src/components/table/table.e2e.ts | 128 + .../src/components/table/table.tsx | 5 + .../calcite-components/src/demos/table.html | 8799 +++++++++-------- 10 files changed, 4605 insertions(+), 4370 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/resources.ts b/packages/calcite-components/src/components/table-cell/resources.ts index 2c762b3188d..67c06c0c975 100644 --- a/packages/calcite-components/src/components/table-cell/resources.ts +++ b/packages/calcite-components/src/components/table-cell/resources.ts @@ -5,4 +5,5 @@ export const CSS = { selectedCell: "selected-cell", assistiveText: "assistive-text", lastCell: "last-cell", + nonInteractive: "non-interactive", }; diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 1984577bc00..da613c988ce 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -28,11 +28,11 @@ td { background: var(--calcite-internal-table-cell-background); font-size: var(--calcite-internal-table-cell-font-size); border-inline-end: 1px solid var(--calcite-color-border-3); + padding: var(--calcite-internal-table-cell-padding); - &:focus { + &:not(.non-interactive):focus { @apply focus-inset; } - padding: var(--calcite-internal-table-cell-padding); } td.last-cell { @@ -56,8 +56,11 @@ td.last-cell { } .selection-cell { - @apply cursor-pointer text-color-3; + @apply text-color-3; inset-inline-start: 2rem; + &:not(.footer-cell) { + @apply cursor-pointer; + } } .selected-cell:not(.number-cell):not(.footer-cell) { diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 1ed9762b0ae..156a9ac24f4 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -61,6 +61,9 @@ export class TableCell /** @internal */ @Prop() lastCell: boolean; + /** @internal */ + @Prop() nonInteractive = false; + /** @internal */ @Prop() numberCell: boolean; @@ -212,6 +215,10 @@ export class TableCell render(): VNode { const dir = getElementDir(this.el); + const nonFocusable = + this.disabled || + (this.nonInteractive && + (!this.selectionCell || (this.selectionCell && this.parentRowType === "foot"))); return ( @@ -225,13 +232,14 @@ export class TableCell [CSS.selectedCell]: this.parentRowIsSelected, [CSS.lastCell]: this.lastCell, [CSS_UTILITY.rtl]: dir === "rtl", + [CSS.nonInteractive]: nonFocusable, }} colSpan={this.colSpan} onBlur={this.onContainerBlur} onFocus={this.onContainerFocus} role="gridcell" rowSpan={this.rowSpan} - tabIndex={this.disabled ? -1 : 0} + tabIndex={nonFocusable ? -1 : 0} // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.containerEl = el)} > diff --git a/packages/calcite-components/src/components/table-header/resources.ts b/packages/calcite-components/src/components/table-header/resources.ts index 9ada7417c70..58ebb1a29ed 100644 --- a/packages/calcite-components/src/components/table-header/resources.ts +++ b/packages/calcite-components/src/components/table-header/resources.ts @@ -10,4 +10,5 @@ export const CSS = { active: "active", selectedCell: "selected-cell", lastCell: "last-cell", + nonInteractive: "non-interactive", }; diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index 0975206d54c..ffa74c0deab 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -33,7 +33,8 @@ th { padding-block: calc(var(--calcite-internal-table-cell-padding) * 1.5); padding-inline: var(--calcite-internal-table-cell-padding); background-color: var(--calcite-internal-table-header-background); - &:focus-within { + + &:not(.non-interactive):focus-within { @apply focus-inset; } } diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index 33695eb89d6..dc129ebf5d5 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -50,6 +50,9 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo /** @internal */ @Prop() lastCell: boolean; + /** @internal */ + @Prop() nonInteractive = false; + /** @internal */ @Prop() numberCell = false; @@ -205,7 +208,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo const allSelected = this.selectedRowCount === this.bodyRowCount; const selectionIcon = allSelected ? "check-square-f" : "check-square"; - + const nonFocusable = this.nonInteractive && !this.selectionCell; return ( (this.containerEl = el)} > diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 3670af7fbfc..e538e7c88a6 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -57,6 +57,9 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { /** @internal */ @Prop() rowType: RowType; + /** @internal */ + @Prop() nonInteractive = false; + /** @internal */ @Prop() numbered = false; @@ -91,6 +94,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { @Watch("scale") @Watch("selected") @Watch("selectedRowCount") + @Watch("nonInteractive") handleCellChanges(): void { if (this.tableRowEl && this.rowCells.length > 0) { this.updateCells(); @@ -284,6 +288,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { if (cells.length > 0) { cells?.forEach((cell: HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement, index) => { + cell.nonInteractive = this.nonInteractive; cell.positionInRow = index + 1; cell.parentRowType = this.rowType; cell.parentRowIsSelected = this.selected; @@ -385,7 +390,11 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { aria-rowindex={this.positionAll + 1} aria-selected={this.selected} class={{ [CSS.lastVisibleRow]: this.lastVisibleRow }} - onKeyDown={(event) => this.keyDownHandler(event)} + onKeyDown={(event) => { + if (!this.nonInteractive) { + this.keyDownHandler(event); + } + }} // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.tableRowEl = el)} > diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index 8352618658f..deac67d9a60 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -267,6 +267,45 @@ describe("calcite-table", () => { ); }); + describe("is accessible with pagination and non-interactive", () => { + accessible( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + `, + ); + }); + describe("is accessible with pagination and selection mode", () => { accessible( html` @@ -2464,6 +2503,95 @@ describe("keyboard navigation", () => { ), ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); }); + + it("navigates correctly when number and selection column present numbered and non-interactive - only focusing selection cells", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + + + cell + cell + + + cell + cell + + + cell + cell + + + foot + foot + + `, + ); + + const rowHead = await page.find("#row-head"); + const row1 = await page.find("#row-1"); + const row2 = await page.find("#row-2"); + const row3 = await page.find("#row-3"); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + + expect( + await page.$eval( + `#${rowHead.id}`, + (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, + ), + ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + + await page.keyboard.press("ArrowLeft"); + await page.waitForChanges(); + expect( + await page.$eval( + `#${rowHead.id}`, + (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, + ), + ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + + await page.keyboard.press("ArrowRight"); + await page.waitForChanges(); + + expect( + await page.$eval( + `#${rowHead.id}`, + (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, + ), + ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), + ).toEqual({ "0": CSS.selectionCell }); + + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + expect( + await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), + ).toEqual({ "0": CSS.selectionCell }); + }); }); // Borrowed from Dropdown until a generic utility is set up. diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 0ff2af3b974..da711a41404 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -68,6 +68,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen /** Specifies the layout of the component. */ @Prop({ reflect: true }) layout: TableLayout = "auto"; + /** When `true`, does not support focus of cells or allow navigation with arrow keys. Content slotted in Table Cell components remains focusable. */ + @Prop({ reflect: true }) nonInteractive = false; + /** When `true`, displays the position of the row in numeric form. */ @Prop({ reflect: true }) numbered = false; @@ -103,6 +106,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @Prop({ reflect: true }) striped = false; @Watch("groupSeparator") + @Watch("nonInteractive") @Watch("numbered") @Watch("numberingSystem") @Watch("pageSize") @@ -328,6 +332,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen }); allRows?.forEach((row) => { + row.nonInteractive = this.nonInteractive; row.selectionMode = this.selectionMode; row.bodyRowCount = bodyRows?.length; row.positionAll = allRows?.indexOf(row); diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 154b5eed2e5..0a029c40736 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -1,615 +1,246 @@ - - - - - Table - - - + .calcite-mode-dark #theme-chip-lavender { + --calcite-color-brand: #d6b9eb; + } - - - -
- - - - - - - - - - - - - - - - - - - - - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - -
- + .calcite-mode-dark #theme-chip-lavender[selected] { + --calcite-ui-icon-color: #d6b9eb; + } + + -

Scroll in parent testing

-
- - - - - - - - - - - - - - - - - - - - - - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - - - - - - - - - - - - - - - - - - - - - - - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - cell content - - - - + + + +
+ @@ -710,3833 +341,4277 @@

Scroll in parent testing

cell content cell content + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content +
-

A11y testing

- - - - - - - - - - - slot - - - - - - - - - cell - cell - cell - cell - cell - test 1 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 2 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 3 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 4 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 5 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 7 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 8 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 9 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - test 10 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 11 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 13 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 14 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 15 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 16 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 17 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 18 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 19 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 20 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - test 21 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 22 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 23 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - - - -

Interactive

- -
-
- Features - - Numbered - Striped - Bordered - -
-
- Selection Mode - - none - single - multiple - -
-
- Scale - - S - M - L - -
-
- Layout - - Auto - Fixed - -
-
- pageSize - - - -
- -
- Themes - - Calcite (Default) - Mint Glacier - Ranger Station - Lavender Field - -
-
+ - - - - - - - - - - slot - - - - - - - - - cell - cell - cell - cell - cell - test 1 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 2 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 3 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 4 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 5 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 7 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 8 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 9 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - test 10 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 11 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 13 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 14 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 15 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 16 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 17 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 18 - Happy - - Another thing - - cell - cell - cell - cell - cell - test 19 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 20 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - test 21 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 22 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - test 23 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 12 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 78 - Happy - - Another thing - - - - footer - footer - footer - footer - footer - 78 - Happy - - Another thing - - - - footer - footer - footer - footer - footer - 78 - Happy - - Another thing - - - - -

Localized numbers

- - - - - - - - - - - slot - - - - - - - - - cell - cell - cell - cell - cell - 34 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 53 - Happy - - Another thing - - cell - cell - cell - cell - cell - 25 - Happy - - Another thing - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - cell - cell - cell - cell - cell - 1643 - Happy - - Another thing - - - - - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 62 - Happy - - Another thing - - cell - cell - cell - cell - cell - 6 - Happy - - Another thing - - - - - cell - cell - cell - cell - 262 - Sad - - Another thing - - - - cell - cell - cell - cell - cell - 63 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 120 - Happy - - Another thing - - - - cell - cell - cell - cell - cell - 987 - Happy - - Another thing - - - -

Simple

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

striped

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Bordered

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Bordered-striped

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Various alignments

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Disabled rows

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Numbered

- - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Numbered

- +

Scroll in parent testing

+
+ + + + + + + + + + + + + + + + + + + + + + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + + + + + + + + + + + + + + + + + + + + + + + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + + - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - foot - foot - foot - foot - - - -

With rich cell content

- - - - - - Chip - - cell - - - cell - - Chipbutton - chip - - - cell - chip - - chipchip - - - foot - foot - foot - foot - - - -

Layout fixed

- - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Using row-span and col-span

- - - - - - cell - cell - - - cell - cell - - - cell - cell - cell - cell - cell - - - cell - cell - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Using row-span and col-span and numbered

- - - - - - cell - cell - - - cell - cell - - - cell - cell - cell - cell - cell - - - cell - cell - cell - cell - cell - cell - - - cell - cell - cell - cell - - - -

Using row-span and col-span

- - - - - - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - cell - - - cell - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell + + + + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + + + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content + cell content +
+

A11y testing

-

Multiple headers using col-span

- - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - + + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + test 1 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 2 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 3 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 4 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 5 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 7 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 8 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 9 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 10 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 11 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 13 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 14 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 15 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 16 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 17 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 18 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 19 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 20 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 21 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 22 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 23 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + + -

Complex keyboard test with multiple headers, selection, pagination using col-span

- - - - - - - - - - - - - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - cell - - - cell - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - - - foot - foot - foot - foot - - - foot - foot - - +

Interactive

-

Headers in rows

- - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - +
+
+ Features + + Numbered + Striped + Bordered + +
+
+ Selection Mode + + none + single + multiple + +
+
+ Scale + + S + M + L + +
+
+ Layout + + Auto + Fixed + +
+
+ Non-interactive + +
+
+ pageSize + + + +
-

Headers in rows and table-head

- - - - - - - - - - - - - - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - foot - foot - foot - - - - foot - foot - foot - - +
+ Themes + + Calcite + (Default) + Mint + Glacier + Ranger Station + Lavender Field + +
+
-

Headers in rows and table-head with selection-mode

- - - - - - - + + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + test 1 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 2 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 3 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 4 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 5 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 7 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 8 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 9 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 10 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 11 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 13 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 14 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 15 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 16 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 17 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 18 + Happy + + Another thing + + cell + cell + cell + cell + cell + test 19 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 20 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + test 21 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 22 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + test 23 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 12 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 78 + Happy + + Another thing + + + + footer + footer + footer + footer + footer + 78 + Happy + + Another thing + + + + footer + footer + footer + footer + footer + 78 + Happy + + Another thing + + + - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - cell - cell - cell - - - - foot - foot - foot - - - - foot - foot - foot - - -

selection-mode single

- - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - +

Localized numbers

-

selection-mode multiple with selected at load

- - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - foot - foot - foot - foot - - + + + + + + + + + + slot + + + + + + + + + cell + cell + cell + cell + cell + 34 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 53 + Happy + + Another thing + + cell + cell + cell + cell + cell + 25 + Happy + + Another thing + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + cell + cell + cell + cell + cell + 1643 + Happy + + Another thing + + + + + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 62 + Happy + + Another thing + + cell + cell + cell + cell + cell + 6 + Happy + + Another thing + + + + + cell + cell + cell + cell + 262 + Sad + + Another thing + + + + cell + cell + cell + cell + cell + 63 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 120 + Happy + + Another thing + + + + cell + cell + cell + cell + cell + 987 + Happy + + Another thing + + + +

Simple

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

selection-mode multiple with multiple headers, footers, pageSize

+

Simple non-interactive

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + - - - - - - - - - - - - - cell - cell - - - cell - cell - - - cell - cell - - - cell - cell - - - foot - foot - foot - foot - - - foot - foot - - - - foot - foot - foot - - - - foot - - -

selection-mode multiple and numbered including out of view

- - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - +

striped

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

selection-mode multiple and numbered including out of view and footer

+

Bordered

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + - - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - - 24,212 - 58% happiness - - - -

selection-mode multiple and numbered including out of view and multiple header and footer

+

Bordered-striped

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + - - - - - - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - - 58% happiness - - - - 24,212 - 58% happiness - - - -

With selection-mode multiple and rich cell content

- - - - - - - - - - Chip - - cell - - - cell - - Chipbutton - chip - - - cell - chip - - chipchip - - +

Various alignments

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + -

Handle keyboard navigation with disabled rows in various places

-

- Expect up / down to skip to next non-disabled - expect "page up / down / cntrl home + end" to focus next - available non-disabled -

+

Disabled rows

+ + + + + + + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + + cell + cell + cell + cell + + - - - - - - - - - - - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - cell - cell - cell - cell - - - - - - + }); + + + \ No newline at end of file From 39f5987109fa4ae7b07b8aa3e4c78e7e92238a58 Mon Sep 17 00:00:00 2001 From: Adam Date: Thu, 1 Feb 2024 15:52:21 -0800 Subject: [PATCH 2/7] Clean up --- .../calcite-components/src/components/table/table.stories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts index 57d9981684c..e378bceed4b 100644 --- a/packages/calcite-components/src/components/table/table.stories.ts +++ b/packages/calcite-components/src/components/table/table.stories.ts @@ -22,6 +22,7 @@ export const simple = (): string => ${boolean("numbered", false)} ${boolean("bordered", false)} ${boolean("striped", false)} + ${boolean("non-interactive", false)} caption="Simple table" > From 64b300cd32a45e4459525cfeae25af214c8670d6 Mon Sep 17 00:00:00 2001 From: Adam Date: Thu, 1 Feb 2024 15:58:00 -0800 Subject: [PATCH 3/7] Clean up --- packages/calcite-components/src/components/table/table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index da711a41404..ea2052976d6 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -68,7 +68,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen /** Specifies the layout of the component. */ @Prop({ reflect: true }) layout: TableLayout = "auto"; - /** When `true`, does not support focus of cells or allow navigation with arrow keys. Content slotted in Table Cell components remains focusable. */ + /** When `true`, prevents focus and keyboard navigation of Table Header and Table Cell components. Selection affordances and slotted content within Table Cell components remains focusable. */ @Prop({ reflect: true }) nonInteractive = false; /** When `true`, displays the position of the row in numeric form. */ From b28fa2906a8d8558cee6576b25ca99d3c38cab5e Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Fri, 2 Feb 2024 10:42:24 -0800 Subject: [PATCH 4/7] Clean up --- packages/calcite-components/src/components/table/table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index ea2052976d6..7139b6c92b4 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -68,7 +68,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen /** Specifies the layout of the component. */ @Prop({ reflect: true }) layout: TableLayout = "auto"; - /** When `true`, prevents focus and keyboard navigation of Table Header and Table Cell components. Selection affordances and slotted content within Table Cell components remains focusable. */ + /** When `true`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. */ @Prop({ reflect: true }) nonInteractive = false; /** When `true`, displays the position of the row in numeric form. */ From 753d75e1abef794555893e4cf69a58c1c6e6ff5f Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Fri, 2 Feb 2024 12:07:38 -0800 Subject: [PATCH 5/7] Clean up --- .../src/components/table-cell/table-cell.scss | 9 ++-- .../src/components/table-cell/table-cell.tsx | 8 ++-- .../components/table-header/table-header.scss | 9 ++-- .../components/table-header/table-header.tsx | 8 ++-- .../src/components/table-row/table-row.tsx | 14 +++--- .../src/components/table/interfaces.ts | 2 + .../src/components/table/table.e2e.ts | 8 ++-- .../src/components/table/table.stories.ts | 2 +- .../src/components/table/table.tsx | 12 +++--- .../calcite-components/src/demos/table.html | 43 +++++++++++++------ 10 files changed, 69 insertions(+), 46 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index da613c988ce..98d8e857ad6 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -24,14 +24,17 @@ } td { - @apply text-start focus-base align-middle text-color-1 whitespace-normal; + @apply text-start align-middle text-color-1 whitespace-normal; background: var(--calcite-internal-table-cell-background); font-size: var(--calcite-internal-table-cell-font-size); border-inline-end: 1px solid var(--calcite-color-border-3); padding: var(--calcite-internal-table-cell-padding); - &:not(.non-interactive):focus { - @apply focus-inset; + &:not(.non-interactive) { + @apply focus-base; + &:focus { + @apply focus-inset; + } } } diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 156a9ac24f4..bf0c383fdd2 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -24,7 +24,7 @@ import { import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { TableCellMessages } from "./assets/table-cell/t9n"; import { CSS } from "./resources"; -import { RowType } from "../table/interfaces"; +import { RowType, TableInteractionMode } from "../table/interfaces"; import { getElementDir } from "../../utils/dom"; import { CSS_UTILITY } from "../../utils/resources"; @@ -59,10 +59,10 @@ export class TableCell @Prop() disabled: boolean; /** @internal */ - @Prop() lastCell: boolean; + @Prop() interactionMode: TableInteractionMode = "interactive"; /** @internal */ - @Prop() nonInteractive = false; + @Prop() lastCell: boolean; /** @internal */ @Prop() numberCell: boolean; @@ -217,7 +217,7 @@ export class TableCell const dir = getElementDir(this.el); const nonFocusable = this.disabled || - (this.nonInteractive && + (this.interactionMode === "static" && (!this.selectionCell || (this.selectionCell && this.parentRowType === "foot"))); return ( diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index ffa74c0deab..b811882c4d2 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -26,7 +26,7 @@ } th { - @apply text-color-1 focus-base text-start font-medium align-top whitespace-normal; + @apply text-color-1 text-start font-medium align-top whitespace-normal; font-size: var(--calcite-internal-table-cell-font-size); border-inline-end: 1px solid var(--calcite-internal-table-header-border-color); border-block-end: 1px solid var(--calcite-internal-table-header-border-color); @@ -34,8 +34,11 @@ th { padding-inline: var(--calcite-internal-table-cell-padding); background-color: var(--calcite-internal-table-header-background); - &:not(.non-interactive):focus-within { - @apply focus-inset; + &:not(.non-interactive) { + @apply focus-base; + &:not(.non-interactive):focus-within { + @apply focus-inset; + } } } diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index dc129ebf5d5..b1b626c7282 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -16,7 +16,7 @@ import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../.. import { Alignment, Scale, SelectionMode } from "../interfaces"; import { TableHeaderMessages } from "./assets/table-header/t9n"; import { CSS } from "./resources"; -import { RowType } from "../table/interfaces"; +import { RowType, TableInteractionMode } from "../table/interfaces"; import { getIconScale } from "../../utils/component"; @Component({ @@ -48,10 +48,10 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo @Prop({ reflect: true }) rowSpan: number; /** @internal */ - @Prop() lastCell: boolean; + @Prop() interactionMode: TableInteractionMode = "interactive"; /** @internal */ - @Prop() nonInteractive = false; + @Prop() lastCell: boolean; /** @internal */ @Prop() numberCell = false; @@ -208,7 +208,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo const allSelected = this.selectedRowCount === this.bodyRowCount; const selectionIcon = allSelected ? "check-square-f" : "check-square"; - const nonFocusable = this.nonInteractive && !this.selectionCell; + const nonFocusable = this.interactionMode === "static" && !this.selectionCell; return ( 0) { this.updateCells(); @@ -288,7 +288,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { if (cells.length > 0) { cells?.forEach((cell: HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement, index) => { - cell.nonInteractive = this.nonInteractive; + cell.interactionMode = this.interactionMode; cell.positionInRow = index + 1; cell.parentRowType = this.rowType; cell.parentRowIsSelected = this.selected; @@ -391,7 +391,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { aria-selected={this.selected} class={{ [CSS.lastVisibleRow]: this.lastVisibleRow }} onKeyDown={(event) => { - if (!this.nonInteractive) { + if (this.interactionMode === "interactive") { this.keyDownHandler(event); } }} diff --git a/packages/calcite-components/src/components/table/interfaces.ts b/packages/calcite-components/src/components/table/interfaces.ts index 96a7a7e9fbd..0deb7606750 100644 --- a/packages/calcite-components/src/components/table/interfaces.ts +++ b/packages/calcite-components/src/components/table/interfaces.ts @@ -10,3 +10,5 @@ export interface TableRowFocusEvent { export type RowType = "head" | "body" | "foot"; export type TableLayout = "auto" | "fixed"; + +export type TableInteractionMode = "interactive" | "static"; diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index deac67d9a60..ac400db46d5 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -267,9 +267,9 @@ describe("calcite-table", () => { ); }); - describe("is accessible with pagination and non-interactive", () => { + describe("is accessible with pagination and interaction mode static", () => { accessible( - html` + html` @@ -2504,10 +2504,10 @@ describe("keyboard navigation", () => { ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); }); - it("navigates correctly when number and selection column present numbered and non-interactive - only focusing selection cells", async () => { + it("navigates correctly when number and selection column present numbered and interaction-mode static - only focusing selection cells", async () => { const page = await newE2EPage(); await page.setContent( - html` + html` diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts index e378bceed4b..24c7383d73f 100644 --- a/packages/calcite-components/src/components/table/table.stories.ts +++ b/packages/calcite-components/src/components/table/table.stories.ts @@ -15,6 +15,7 @@ export default { export const simple = (): string => html` ${boolean("numbered", false)} ${boolean("bordered", false)} ${boolean("striped", false)} - ${boolean("non-interactive", false)} caption="Simple table" > diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 7139b6c92b4..8e29610d751 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -31,7 +31,7 @@ import { numberStringFormatter, NumberingSystem, } from "../../utils/locale"; -import { TableLayout, TableRowFocusEvent } from "./interfaces"; +import { TableInteractionMode, TableLayout, TableRowFocusEvent } from "./interfaces"; import { CSS, SLOTS } from "./resources"; import { TableMessages } from "./assets/table/t9n"; import { getUserAgentString } from "../../utils/browser"; @@ -65,12 +65,12 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen /** When `true`, number values are displayed with a group separator corresponding to the language and country format. */ @Prop({ reflect: true }) groupSeparator = false; + /** When `interactive`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `static`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. */ + @Prop({ reflect: true }) interactionMode: TableInteractionMode = "interactive"; + /** Specifies the layout of the component. */ @Prop({ reflect: true }) layout: TableLayout = "auto"; - /** When `true`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. */ - @Prop({ reflect: true }) nonInteractive = false; - /** When `true`, displays the position of the row in numeric form. */ @Prop({ reflect: true }) numbered = false; @@ -106,7 +106,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen @Prop({ reflect: true }) striped = false; @Watch("groupSeparator") - @Watch("nonInteractive") + @Watch("interactionMode") @Watch("numbered") @Watch("numberingSystem") @Watch("pageSize") @@ -332,7 +332,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen }); allRows?.forEach((row) => { - row.nonInteractive = this.nonInteractive; + row.interactionMode = this.interactionMode; row.selectionMode = this.selectionMode; row.bodyRowCount = bodyRows?.length; row.positionAll = allRows?.indexOf(row); diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html index 0a029c40736..db175fd3a12 100644 --- a/packages/calcite-components/src/demos/table.html +++ b/packages/calcite-components/src/demos/table.html @@ -1868,7 +1868,7 @@

A11y testing

 -

Interactive

+

Kitchen Sink

@@ -1902,10 +1902,15 @@

Interactive

Fixed
+
- Non-interactive - + Interaction Mode + + Interactive + Static +
+
pageSize @@ -3302,8 +3307,8 @@

Simple

-

Simple non-interactive

- +

Simple interaction-mode="static"

+ @@ -3600,8 +3605,8 @@

With rich cell content

 -

With rich cell content non-interactive

- +

With rich cell content interaction-mode="static"

+ @@ -4325,10 +4330,11 @@

selection-mode multiple and numbered including out of view and multiple head -

selection-mode multiple and numbered including out of view and multiple header and footer - non-interactive

+

selection-mode multiple and numbered including out of view and multiple header and footer - + interaction-mode="static"

+ caption="selection-mode multiple with selected at load" interaction-mode="static"> @@ -4433,8 +4439,8 @@

With selection-mode multiple and rich cell content

 -

With selection-mode multiple non-interactive and rich cell content

- With selection-mode multiple interaction-mode="static" and rich cell content + @@ -4535,8 +4541,8 @@

const chipGroupTheme = document.getElementById("theme-chips"); const chipGroupScale = document.getElementById("scale-chips"); const chipGroupSelectionMode = document.getElementById("selection-mode-chips"); - const nonInteractiveSwitch = document.getElementById("non-interactive-switch"); const chipGroupLayout = document.getElementById("layout-chips"); + const chipGroupInteraction = document.getElementById("interaction-chips"); const pageSizeInput = document.getElementById("page-size-input"); const calciteChips = document.querySelectorAll("#preview-chips calcite-chip"); @@ -4544,6 +4550,8 @@

const calciteChipsScale = document.querySelectorAll("#scale-chips calcite-chip"); const calciteChipsSelectionMode = document.querySelectorAll("#selection-mode-chips calcite-chip"); const calciteChipsLayout = document.querySelectorAll("#layout-chips calcite-chip"); + const calciteChipsInteraction = document.querySelectorAll("#interaction-chips calcite-chip"); + table.addEventListener("calciteTableSelect", (event) => { console.log(event.target.selectedItems); @@ -4578,8 +4586,15 @@

}); }); - nonInteractiveSwitch.addEventListener("calciteSwitchChange", (event) => { - table.nonInteractive = event.target.checked; + + chipGroupInteraction.addEventListener("calciteChipGroupSelect", (event) => { + calciteChipsInteraction.forEach((chip) => { + if (event.target.selectedItems.includes(chip)) { + table.interactionMode = chip.value; + } else { + return; + } + }); }); chipGroupSelectionMode.addEventListener("calciteChipGroupSelect", (event) => { From 1374cd21a986cf74db6485c31cdf4394ce353edc Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Fri, 2 Feb 2024 12:19:34 -0800 Subject: [PATCH 6/7] Clean up --- packages/calcite-components/src/components/table/table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 8e29610d751..35d396b7a95 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -65,7 +65,7 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen /** When `true`, number values are displayed with a group separator corresponding to the language and country format. */ @Prop({ reflect: true }) groupSeparator = false; - /** When `interactive`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `static`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. */ + /** When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. */ @Prop({ reflect: true }) interactionMode: TableInteractionMode = "interactive"; /** Specifies the layout of the component. */ From 4287c7ae347e9f86591743a1819f51f6e2b41d81 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Mon, 12 Feb 2024 13:50:14 -0800 Subject: [PATCH 7/7] Clean up --- .../calcite-components/src/components.d.ts | 18 ++++++++++++++++-- .../src/components/table-cell/resources.ts | 2 +- .../src/components/table-cell/table-cell.scss | 2 +- .../src/components/table-cell/table-cell.tsx | 6 +++--- .../src/components/table-header/resources.ts | 2 +- .../components/table-header/table-header.scss | 4 ++-- .../components/table-header/table-header.tsx | 6 +++--- .../src/components/table-row/table-row.tsx | 13 ++++++------- 8 files changed, 33 insertions(+), 20 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 9b069281ec3..52b847cb1b3 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -79,7 +79,7 @@ import { StepperItemMessages } from "./components/stepper-item/assets/stepper-it import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; -import { RowType, TableLayout, TableRowFocusEvent } from "./components/table/interfaces"; +import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent } from "./components/table/interfaces"; import { TableMessages } from "./components/table/assets/table/t9n"; import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; @@ -165,7 +165,7 @@ export { StepperItemMessages } from "./components/stepper-item/assets/stepper-it export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; -export { RowType, TableLayout, TableRowFocusEvent } from "./components/table/interfaces"; +export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent } from "./components/table/interfaces"; export { TableMessages } from "./components/table/assets/table/t9n"; export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; @@ -4648,6 +4648,10 @@ export namespace Components { * When `true`, number values are displayed with a group separator corresponding to the language and country format. */ "groupSeparator": boolean; + /** + * When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. + */ + "interactionMode": TableInteractionMode; /** * Specifies the layout of the component. */ @@ -4708,6 +4712,7 @@ export namespace Components { * When true, prevents user interaction. Notes: This prop should use the */ "disabled": boolean; + "interactionMode": TableInteractionMode; "lastCell": boolean; /** * Use this property to override individual strings used by the component. @@ -4752,6 +4757,7 @@ export namespace Components { * A heading to display above description content. */ "heading": string; + "interactionMode": TableInteractionMode; "lastCell": boolean; /** * Use this property to override individual strings used by the component. @@ -4787,6 +4793,7 @@ export namespace Components { * When `true`, interaction is prevented and the component is displayed with lower opacity. */ "disabled": boolean; + "interactionMode": TableInteractionMode; "lastVisibleRow": boolean; "numbered": boolean; "positionAll": number; @@ -12143,6 +12150,10 @@ declare namespace LocalJSX { * When `true`, number values are displayed with a group separator corresponding to the language and country format. */ "groupSeparator"?: boolean; + /** + * When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. + */ + "interactionMode"?: TableInteractionMode; /** * Specifies the layout of the component. */ @@ -12212,6 +12223,7 @@ declare namespace LocalJSX { * When true, prevents user interaction. Notes: This prop should use the */ "disabled"?: boolean; + "interactionMode"?: TableInteractionMode; "lastCell"?: boolean; /** * Use this property to override individual strings used by the component. @@ -12252,6 +12264,7 @@ declare namespace LocalJSX { * A heading to display above description content. */ "heading"?: string; + "interactionMode"?: TableInteractionMode; "lastCell"?: boolean; /** * Use this property to override individual strings used by the component. @@ -12283,6 +12296,7 @@ declare namespace LocalJSX { * When `true`, interaction is prevented and the component is displayed with lower opacity. */ "disabled"?: boolean; + "interactionMode"?: TableInteractionMode; "lastVisibleRow"?: boolean; "numbered"?: boolean; "onCalciteInternalTableRowFocusRequest"?: (event: CalciteTableRowCustomEvent) => void; diff --git a/packages/calcite-components/src/components/table-cell/resources.ts b/packages/calcite-components/src/components/table-cell/resources.ts index 67c06c0c975..33077382d6b 100644 --- a/packages/calcite-components/src/components/table-cell/resources.ts +++ b/packages/calcite-components/src/components/table-cell/resources.ts @@ -5,5 +5,5 @@ export const CSS = { selectedCell: "selected-cell", assistiveText: "assistive-text", lastCell: "last-cell", - nonInteractive: "non-interactive", + staticCell: "static-cell", }; diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 98d8e857ad6..8745a139800 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -30,7 +30,7 @@ td { border-inline-end: 1px solid var(--calcite-color-border-3); padding: var(--calcite-internal-table-cell-padding); - &:not(.non-interactive) { + &:not(.static-cell) { @apply focus-base; &:focus { @apply focus-inset; diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index bf0c383fdd2..9fb6cde521e 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -215,7 +215,7 @@ export class TableCell render(): VNode { const dir = getElementDir(this.el); - const nonFocusable = + const staticCell = this.disabled || (this.interactionMode === "static" && (!this.selectionCell || (this.selectionCell && this.parentRowType === "foot"))); @@ -232,14 +232,14 @@ export class TableCell [CSS.selectedCell]: this.parentRowIsSelected, [CSS.lastCell]: this.lastCell, [CSS_UTILITY.rtl]: dir === "rtl", - [CSS.nonInteractive]: nonFocusable, + [CSS.staticCell]: staticCell, }} colSpan={this.colSpan} onBlur={this.onContainerBlur} onFocus={this.onContainerFocus} role="gridcell" rowSpan={this.rowSpan} - tabIndex={nonFocusable ? -1 : 0} + tabIndex={staticCell ? -1 : 0} // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.containerEl = el)} > diff --git a/packages/calcite-components/src/components/table-header/resources.ts b/packages/calcite-components/src/components/table-header/resources.ts index 58ebb1a29ed..c1c98d8de27 100644 --- a/packages/calcite-components/src/components/table-header/resources.ts +++ b/packages/calcite-components/src/components/table-header/resources.ts @@ -10,5 +10,5 @@ export const CSS = { active: "active", selectedCell: "selected-cell", lastCell: "last-cell", - nonInteractive: "non-interactive", + staticCell: "static-cell", }; diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index b811882c4d2..fdfe727dedb 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -34,9 +34,9 @@ th { padding-inline: var(--calcite-internal-table-cell-padding); background-color: var(--calcite-internal-table-header-background); - &:not(.non-interactive) { + &:not(.static-cell) { @apply focus-base; - &:not(.non-interactive):focus-within { + &:not(.static-cell):focus-within { @apply focus-inset; } } diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx index b1b626c7282..4c2de4f0f1a 100644 --- a/packages/calcite-components/src/components/table-header/table-header.tsx +++ b/packages/calcite-components/src/components/table-header/table-header.tsx @@ -208,7 +208,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo const allSelected = this.selectedRowCount === this.bodyRowCount; const selectionIcon = allSelected ? "check-square-f" : "check-square"; - const nonFocusable = this.interactionMode === "static" && !this.selectionCell; + const staticCell = this.interactionMode === "static" && !this.selectionCell; return ( (this.containerEl = el)} > diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index ae3a5fc77d3..26c757daaf7 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -202,7 +202,10 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { // //-------------------------------------------------------------------------- - private keyDownHandler(event: KeyboardEvent): void { + private keyDownHandler = (event: KeyboardEvent): void => { + if (this.interactionMode !== "interactive") { + return; + } const el = event.target as HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement; const key = event.key; const isControl = event.ctrlKey; @@ -253,7 +256,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { break; } } - } + }; private emitTableRowFocusRequest = ( cellPosition: number, @@ -390,11 +393,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { aria-rowindex={this.positionAll + 1} aria-selected={this.selected} class={{ [CSS.lastVisibleRow]: this.lastVisibleRow }} - onKeyDown={(event) => { - if (this.interactionMode === "interactive") { - this.keyDownHandler(event); - } - }} + onKeyDown={this.keyDownHandler} // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={(el) => (this.tableRowEl = el)} >