fix(platform): move implementation to ts and narrow scenario to when cell is focused

Author: CSEHoangV

libs/core/table/directives/table-cell.directive.ts

@@ -1,12 +1,14 @@
 import {
     AfterContentInit,
+    booleanAttribute,
     ContentChildren,
     Directive,
+    EventEmitter,
     HostBinding,
     HostListener,
     Input,
-    QueryList,
-    booleanAttribute
+    Output,
+    QueryList
 } from '@angular/core';
 import { FDK_FOCUSABLE_ITEM_DIRECTIVE, FocusableItemDirective } from '@fundamental-ngx/cdk/utils';
 import { CheckboxComponent, FD_CHECKBOX_COMPONENT } from '@fundamental-ngx/core/checkbox';
@@ -76,6 +78,10 @@ export class TableCellDirective extends FocusableItemDirective implements AfterC
     @Input()
     key: string;
 
+    /** Event emitted when a cell is focused out. */
+    @Output()
+    readonly cellFocusedOut = new EventEmitter<void>();
+
     /** @hidden */
     @ContentChildren(FD_CHECKBOX_COMPONENT)
     _checkboxes: QueryList<CheckboxComponent>;
@@ -108,6 +114,7 @@ export class TableCellDirective extends FocusableItemDirective implements AfterC
         if (this._parentPreviousTabIndex) {
             parentEl?.setAttribute('tabindex', this._parentPreviousTabIndex.toString());
         }
+        this.cellFocusedOut.emit();
     }
 
     /** @hidden */

libs/platform/table/components/table-row/table-row.component.html

@@ -136,7 +136,8 @@
         "
         [attr.aria-expanded]="_isTreeRowFirstCell($index, row) ? row.expanded : null"
         [attr.data-nesting-level]="$index === 0 ? row.level + 1 : null"
-        (cellFocused)="_tableRowService.cellFocused($event); _tableRowService.cellActivate($index, row)"
+        (cellFocused)="_handleCellFocused($event, $index, row, column, tableTextContainer)"
+        (cellFocusedOut)="_enableEmptyCellScreenReader = false"
         (click)="_tableRowService.cellClicked({ index: $index, row })"
         (keydown.enter)="_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()"
         (keydown.arrowLeft)="_tableRowService.scrollToOverlappedCell()"
@@ -163,7 +164,7 @@
                 ></span>
             }
             @if (row.state === 'readonly') {
-                @if (tableTextContainer.innerText?.trim() === '') {
+                @if (_enableEmptyCellScreenReader) {
                     <span
                         [ngStyle]="{
                             position: 'absolute',

libs/platform/table/components/table-row/table-row.component.ts

@@ -63,6 +63,7 @@ import {
     isTreeRow,
     isTreeRowFirstCell
 } from '@fundamental-ngx/platform/table-helpers';
+import { get } from 'lodash-es';
 import { Subject, fromEvent, merge } from 'rxjs';
 import { filter, startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { TableEditableCellComponent } from '../table-editable-cell/table-editable-cell.component';
@@ -180,6 +181,9 @@ export class TableRowComponent<T> extends TableRowDirective implements OnInit, A
     /** @hidden */
     _rowSelectionHelperTextId = `rowSelectionHelper-${uuidv4()}`;
 
+    /** @hidden */
+    _enableEmptyCellScreenReader: boolean;
+
     /** @hidden */
     readonly _isTreeRowFirstCell = isTreeRowFirstCell;
 
@@ -324,6 +328,26 @@ export class TableRowComponent<T> extends TableRowDirective implements OnInit, A
         return retVal;
     };
 
+    /** @hidden */
+    _handleCellFocused(
+        event: FocusableItemPosition,
+        index: number,
+        row: TableRow<T>,
+        column: TableColumn,
+        tableContainer: HTMLElement
+    ): void {
+        if (
+            (row.state === 'readonly' &&
+                !column.columnCellTemplate &&
+                (get(row.value, column.key) === '' || !get(row.value, column.key))) ||
+            (column.columnCellTemplate && tableContainer?.textContent?.trim() === '')
+        ) {
+            this._enableEmptyCellScreenReader = true;
+        }
+        this._tableRowService.cellFocused(event);
+        this._tableRowService.cellActivate(index, row);
+    }
+
     /** @hidden */
     protected _handleCellSpaceKey(colIdx: number, tableCellElement: HTMLTableCellElement, $event: Event): void {
         if ($event.target === tableCellElement && isTreeRowFirstCell(colIdx, this.row, $event)) {