From f7aab5e901c428827f34f40dc619e373e2dbbb40 Mon Sep 17 00:00:00 2001
From: Lee Kelleher <leekelleher@users.noreply.github.com>
Date: Fri, 27 Jun 2025 12:58:00 +0100
Subject: [PATCH] Table checkbox/icon alignment (#19615)

* Table checkboxes slotted whitespace

Fixes #19563

* Table markup tidy-up

Resolved the `style` attribute error

* localize texts

---------

Co-authored-by: Mads Rasmussen <madsr@hey.com>
---
 .../core/components/table/table.element.ts    | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
index b7dae8ab0d..ffc3bf770f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
@@ -235,13 +235,10 @@ export class UmbTableElement extends UmbLitElement {
 	}
 
 	override render() {
+		const style = !(this.config.allowSelection === false && this.config.hideIcon === true) ? 'width: 60px' : undefined;
 		return html`
 			<uui-table class="uui-text">
-				<uui-table-column
-					.style=${when(
-						!(this.config.allowSelection === false && this.config.hideIcon === true),
-						() => 'width: 60px',
-					)}></uui-table-column>
+				<uui-table-column style=${ifDefined(style)}></uui-table-column>
 				<uui-table-head>
 					${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
 				</uui-table-head>
@@ -274,18 +271,17 @@ export class UmbTableElement extends UmbLitElement {
 
 	private _renderHeaderCheckboxCell() {
 		if (this.config.hideIcon && !this.config.allowSelection) return;
-
 		return html`
 			<uui-table-head-cell style="--uui-table-cell-padding: 0; text-align: center;">
 				${when(
 					this.config.allowSelection,
-					() =>
-						html` <uui-checkbox
-							label="Select All"
+					() => html`
+						<uui-checkbox
+							aria-label=${this.localize.term('general_selectAll')}
 							style="padding: var(--uui-size-4) var(--uui-size-5);"
 							@change="${this._handleAllRowsCheckboxChange}"
-							?checked="${this.selection.length === this.items.length}">
-						</uui-checkbox>`,
+							?checked=${this.selection.length === this.items.length}></uui-checkbox>
+					`,
 				)}
 			</uui-table-head-cell>
 		`;
@@ -307,9 +303,11 @@ export class UmbTableElement extends UmbLitElement {
 
 	private _renderRowCheckboxCell(item: UmbTableItem) {
 		if (this.sortable === true) {
-			return html`<uui-table-cell style="text-align: center;">
-				<uui-icon name="icon-grip"></uui-icon>
-			</uui-table-cell>`;
+			return html`
+				<uui-table-cell style="text-align: center;">
+					<uui-icon name="icon-grip"></uui-icon>
+				</uui-table-cell>
+			`;
 		}
 
 		if (this.config.hideIcon && !this.config.allowSelection) return;
@@ -321,11 +319,10 @@ export class UmbTableElement extends UmbLitElement {
 					this.config.allowSelection,
 					() => html`
 						<uui-checkbox
-							label="Select Row"
+							aria-label=${this.localize.term('buttons_select')}
 							@click=${(e: PointerEvent) => e.stopPropagation()}
 							@change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
-							?checked="${this._isSelected(item.id)}">
-						</uui-checkbox>
+							?checked=${this._isSelected(item.id)}></uui-checkbox>
 					`,
 				)}
 			</uui-table-cell>