fix(ui5-table): custom row announcements are set

packages/base/src/UI5Element.ts

@@ -1115,8 +1115,8 @@ abstract class UI5Element extends HTMLElement {
 	 * Returns the component accessibility info.
 	 * @private
 	 */
-	get accessibilityInfo(): AccessibilityInfo {
-		return {};
+	get accessibilityInfo(): AccessibilityInfo | undefined {
+		return undefined;
 	}
 
 	/**

packages/base/src/types.ts

@@ -31,25 +31,24 @@ export type AccessibilityInfo = {
 	// The WAI-ARIA role of the component.
 	role?: AriaRole,
 
-	// A translated text that represents the component type. Used when several components share same role,
-	// f.e. Select and ComboBox both have role="combobox".
-	type?: LowercaseString<string>,
+	// A translated text that represents the component type.
+	type?: string,
 
 	// A translated text that represents relevant component description/state - value, placeholder, label, etc.
 	description?: string,
 
-	 // The component disabled state.
+	// Disabled state of the component.
 	disabled?: boolean,
 
-	// The component readonly state.
+	// Readonly state of the component.
 	readonly?: boolean,
 
-	// The component required state.
+	// Required state of the component.
 	required?: boolean,
 
-	// An array of elements, aggregated by the component
-	// <b>Note:</b> Children should only be provided when it is helpful to understand the accessibility context.
-	children?: Array<HTMLElement>,
+	// An array of nodes, aggregated by the component
+	// **Note:** Children should only be provided when it is helpful to understand the accessibility context.
+	children?: Array<Node>,
 }
 
 export type AccessibilityAttributes = {

packages/main/src/Table.ts

@@ -561,11 +561,13 @@ class Table extends UI5Element {
 		const headerIndex = this.headerRow[0].cells.indexOf(headerCell);
 		headerCell._popin = inPopin && this.overflowMode === TableOverflowMode.Popin;
 		headerCell._popinWidth = popinWidth;
+		headerCell.ariaColIndex = null;
 		this.rows.forEach(row => {
 			const cell = row.cells[headerIndex];
 			if (cell) {
 				row.cells[headerIndex]._popinHidden = headerCell.popinHidden;
 				row.cells[headerIndex]._popin = headerCell._popin;
+				row.cells[headerIndex].ariaColIndex = null;
 			}
 		});
 	}
@@ -682,6 +684,9 @@ class Table extends UI5Element {
 		if (this.rowActionCount > 0) {
 			ariaColCount++;
 		}
+		if (this.headerRow[0]._popinCells.length > 0) {
+			ariaColCount++;
+		}
 
 		return ariaColCount;
 	}

packages/main/src/TableCell.ts

@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import TableCellTemplate from "./TableCellTemplate.js";
 import TableCellStyles from "./generated/themes/TableCell.css.js";
 import TableCellBase from "./TableCellBase.js";
+import { getAccessibilityDescription, updateInvisibleText } from "./TableUtils.js";
 import type TableRow from "./TableRow.js";
 import type Table from "./Table.js";
 import { LABEL_COLON } from "./generated/i18n/i18n-defaults.js";
@@ -38,7 +39,7 @@ class TableCell extends TableCellBase {
 		}
 	}
 
-	injectHeaderNodes(ref: HTMLElement | null) {
+	_injectHeaderNodes(ref: HTMLElement | null) {
 		if (ref && !ref.hasChildNodes()) {
 			ref.replaceChildren(...this._popinHeaderNodes);
 		}
@@ -52,10 +53,10 @@ class TableCell extends TableCellBase {
 	}
 
 	get _popinHeaderNodes() {
-		const nodes = [];
+		const nodes: Node[] = [];
 		const headerCell = this._headerCell;
 		if (headerCell.popinText) {
-			nodes.push(headerCell.popinText);
+			nodes.push(document.createTextNode(headerCell.popinText));
 		} else {
 			nodes.push(...this._headerCell.content.map(node => node.cloneNode(true)));
 		}

packages/main/src/TableCellTemplate.tsx

@@ -5,7 +5,7 @@ export default function TableCellTemplate(this: TableCell) {
 		<>
 			{ this._popin &&
 				<>
-					<div class="popin-header" ref={this.injectHeaderNodes.bind(this)}></div>
+					<div class="popin-header" ref={this._injectHeaderNodes.bind(this)}></div>
 					<span class="popin-colon">{this._i18nPopinColon}</span>
 				</>
 			}

packages/main/src/TableHeaderRow.ts

@@ -4,6 +4,7 @@ import TableHeaderRowTemplate from "./TableHeaderRowTemplate.js";
 import TableHeaderRowStyles from "./generated/themes/TableHeaderRow.css.js";
 import type TableHeaderCell from "./TableHeaderCell.js";
 import type TableSelectionMulti from "./TableSelectionMulti.js";
+import { getAccessibilityDescription, updateInvisibleText } from "./TableUtils.js";
 import {
 	TABLE_SELECTION,
 	TABLE_ROW_POPIN,
@@ -92,6 +93,38 @@ class TableHeaderRow extends TableRowBase {
 		return true;
 	}
 
+	_onfocusin(e: FocusEvent, eventOrigin: HTMLElement) {
+		if (eventOrigin !== this) {
+			return;
+		}
+
+		const descriptions = [
+			TableRowBase.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW),
+		];
+
+		const selectionDescription = this._selectionCellAriaDescription;
+		if (selectionDescription) {
+			descriptions.push(selectionDescription);
+		}
+
+		this._visibleCells.forEach(cell => {
+			const cellDescription = getAccessibilityDescription(cell, true);
+			descriptions.push(cellDescription);
+		});
+
+		if (this._rowActionCount > 0) {
+			descriptions.push(TableRowBase.i18nBundle.getText(TABLE_ROW_ACTIONS));
+		}
+
+		updateInvisibleText(this, descriptions);
+	}
+
+	_onfocusout(e: FocusEvent, eventOrigin: HTMLElement) {
+		if (eventOrigin !== this) {
+			updateInvisibleText(this);
+		}
+	}
+
 	get _isSelectable() {
 		return this._isMultiSelect;
 	}

packages/main/src/TableHeaderRowTemplate.tsx

@@ -44,7 +44,7 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 
 			{ this._visibleCells.map(cell => {
 				cell.ariaColIndex = `${ariaColIndex++}`;
-				return <slot name={cell._individualSlot} key={cell._individualSlot}></slot>;
+				return <slot name={cell._individualSlot}></slot>;
 			})}
 
 			{ this._rowActionCount > 0 &&
@@ -56,6 +56,7 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 
 			{ this._popinCells.length > 0 &&
 				<TableHeaderCell id="popin-cell"
+					aria-colindex={ariaColIndex++}
 					aria-label={this._i18nRowPopin}
 					data-excluded-from-navigation
 				></TableHeaderCell>

packages/main/src/TableNavigation.ts

@@ -28,7 +28,6 @@ class TableNavigation extends TableExtension {
 		super();
 		this._table = table;
 		this._gridWalker = new GridWalker();
-		this._gridWalker.setGrid(this._getNavigationItemsOfGrid());
 		this._onKeyDownCaptureBound = this._onKeyDownCapture.bind(this);
 
 		// we register the keydown handler on the table element at the capturing phase since the

packages/main/src/TableRow.ts

@@ -2,14 +2,23 @@ import { customElement, slot, property } from "@ui5/webcomponents-base/dist/deco
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
-import { toggleAttribute } from "./TableUtils.js";
+import { toggleAttribute, updateInvisibleText, getAccessibilityDescription } from "./TableUtils.js";
 import TableRowTemplate from "./TableRowTemplate.js";
 import TableRowBase from "./TableRowBase.js";
 import TableRowCss from "./generated/themes/TableRow.css.js";
 import type TableCell from "./TableCell.js";
 import type TableRowActionBase from "./TableRowActionBase.js";
 import type Button from "./Button.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
+import {
+	TABLE_ROW,
+	TABLE_ROW_INDEX,
+	TABLE_ROW_SELECTED,
+	TABLE_ROW_ACTIVE,
+	TABLE_ROW_NAVIGABLE,
+	TABLE_ROW_SINGLE_ACTION,
+	TABLE_ROW_MULTIPLE_ACTIONS,
+} from "./generated/i18n/i18n-defaults.js";
 
 /**
  * @class
@@ -144,7 +153,7 @@ class TableRow extends TableRowBase {
 		if (this === getActiveElement()) {
 			if (this._isSelectable && !this._hasSelector) {
 				this._onSelectionChange();
-			} else 	if (this.interactive) {
+			} else 	if (this.interactive || this._isNavigable) {
 				this._table?._onRowClick(this);
 			}
 		}
@@ -154,8 +163,48 @@ class TableRow extends TableRowBase {
 		this.removeAttribute("_active");
 	}
 
-	_onfocusout() {
+	_onfocusin(e: FocusEvent, eventOrigin: HTMLElement) {
+		if (eventOrigin !== this) {
+			return;
+		}
+
+		const descriptions = [
+			TableRowBase.i18nBundle.getText(TABLE_ROW),
+			TableRowBase.i18nBundle.getText(TABLE_ROW_INDEX, this.ariaRowIndex!, this._table!._ariaRowCount),
+		];
+
+		if (this._isSelected) {
+			descriptions.push(TableRowBase.i18nBundle.getText(TABLE_ROW_SELECTED));
+		}
+
+		if (this._isNavigable) {
+			descriptions.push(TableRowBase.i18nBundle.getText(TABLE_ROW_NAVIGABLE));
+		} else if (this.interactive) {
+			descriptions.push(TableRowBase.i18nBundle.getText(TABLE_ROW_ACTIVE));
+		}
+
+		[...this._visibleCells, ...this._popinCells].forEach(cell => {
+			const headerCell = cell._popin ? cell.getDomRef()! : (cell as TableCell)._headerCell;
+			const headerCellDescription = getAccessibilityDescription(headerCell, false);
+			const cellDescription = getAccessibilityDescription(cell, false);
+			descriptions.push(headerCellDescription);
+			descriptions.push(cellDescription);
+		});
+
+		const availableActionsCount = this._availableActionsCount;
+		if (availableActionsCount > 0) {
+			const rowActionBundleKey = availableActionsCount === 1 ? TABLE_ROW_SINGLE_ACTION : TABLE_ROW_MULTIPLE_ACTIONS;
+			descriptions.push(TableRowBase.i18nBundle.getText(rowActionBundleKey, availableActionsCount));
+		}
+
+		updateInvisibleText(this, descriptions);
+	}
+
+	_onfocusout(e: FocusEvent, eventOrigin: HTMLElement) {
 		this.removeAttribute("_active");
+		if (eventOrigin === this) {
+			updateInvisibleText(this);
+		}
 	}
 
 	_onOverflowButtonClick(e: UI5CustomEvent<Button, "click">) {
@@ -165,7 +214,13 @@ class TableRow extends TableRowBase {
 	}
 
 	get _isInteractive() {
-		return this.interactive || (this._isSelectable && !this._hasSelector);
+		return this.interactive || (this._isSelectable && !this._hasSelector) || this._isNavigable;
+	}
+
+	get _isNavigable() {
+		return this._fixedActions.find(action => {
+			return action.hasAttribute("ui5-table-row-action-navigation") && !action._isInteractive;
+		}) !== undefined;
 	}
 
 	get _rowIndex() {
@@ -179,12 +234,12 @@ class TableRow extends TableRowBase {
 	}
 
 	get _hasOverflowActions() {
-		let renderedActionsCount = 0;
+		let renderableActionsCount = 0;
 		return this.actions.some(action => {
 			if (action.isFixedAction() || !action.invisible) {
-				renderedActionsCount++;
+				renderableActionsCount++;
 			}
-			return renderedActionsCount > this._rowActionCount;
+			return renderableActionsCount > this._rowActionCount;
 		});
 	}
 
@@ -229,6 +284,16 @@ class TableRow extends TableRowBase {
 
 		return overflowActions;
 	}
+
+	get _availableActionsCount() {
+		if (this._rowActionCount < 1) {
+			return 0;
+		}
+
+		return [...this._flexibleActions, ...this._fixedActions].filter(action => {
+			return !action.invisible && action._isInteractive;
+		}).length + (this._hasOverflowActions ? 1 : 0);
+	}
 }
 
 TableRow.define();

packages/main/src/TableRowTemplate.tsx

@@ -5,13 +5,13 @@ import Button from "./Button.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import type TableRow from "./TableRow.js";
 
-export default function TableRowTemplate(this: TableRow) {
+export default function TableRowTemplate(this: TableRow, ariaColIndex: number = 1) {
 	return (
 		<>
 			{ this._hasSelector &&
-				<TableCell
-					id="selection-cell"
+				<TableCell id="selection-cell"
 					aria-selected={this._isSelected}
+					aria-colindex={ariaColIndex++}
 					data-ui5-table-cell-fixed
 					data-ui5-table-selection-component
 				>
@@ -34,12 +34,13 @@ export default function TableRowTemplate(this: TableRow) {
 				</TableCell>
 			}
 
-			{ this._visibleCells.map(cell => (
-				<slot name={cell._individualSlot}></slot>
-			))}
+			{ this._visibleCells.map(cell => {
+				cell.ariaColIndex = `${ariaColIndex++}`;
+				return <slot name={cell._individualSlot}></slot>;
+			})}
 
 			{ this._rowActionCount > 0 &&
-				<TableCell id="actions-cell">
+				<TableCell id="actions-cell" aria-colindex={ariaColIndex++}>
 					{ this._flexibleActions.map(action => (
 						<slot name={action._individualSlot}></slot>
 					))}
@@ -66,7 +67,7 @@ export default function TableRowTemplate(this: TableRow) {
 			}
 
 			{ this._popinCells.length > 0 &&
-				<TableCell id="popin-cell">
+				<TableCell id="popin-cell" aria-colindex={ariaColIndex++}>
 					{ this._popinCells.map(cell => (
 						<slot name={cell._individualSlot}></slot>
 					))}