fix(grid): display title & description tooltip on focus

Author: CatalinB7

projects/angular/components/ui-grid/src/ui-grid.component.html

@@ -139,7 +139,6 @@
 
                     <ng-container *ngIf="multiPageSelect then multiPageSelectionProjectedHeaderCell">
                     </ng-container>
-
                     <div *ngFor="let column of visible$ | async; let last = last; let columnIndex = index"
                          [class.ui-grid-header-cell-sortable]="column.sortable"
                          [class.ui-grid-resizeable]="column.resizeable"
@@ -148,19 +147,24 @@
                          [attr.data-property]="column.property"
                          [attr.data-identifier]="column.identifier"
                          [style.width.%]="column.width"
+                         (cdkFocusChange)="triggerColumnHeaderTooltip($event, columnTooltip)"
+                         (focusout)="hideColumnHeaderTooltip(columnTooltip)"
                          (keyup.enter)="sortManager.changeSort(column)"
                          (keyup.space)="sortManager.changeSort(column)"
                          (keydown.ArrowLeft)="!last && resizeManager.startKeyboardResize('left', column, columnIndex)"
                          (keydown.ArrowRight)="!last && resizeManager.startKeyboardResize('right', column, columnIndex)"
+                         cdkMonitorElementFocus
                          class="ui-grid-header-cell"
                          role="columnheader"
                          tabindex="0">
                         <div (click)="sortManager.changeSort(column)"
                              class="ui-grid-header-title">
-                            <p [class.ui-grid-header-title-filtered]="isFilterApplied(column)"
-                               [matTooltip]="column.title ?? ''"
+                            <p #columnTooltip="matTooltip"
+                               [class.ui-grid-header-title-filtered]="isFilterApplied(column)"
+                               [matTooltip]="column.title + (focusedColumnHeader ? ('\n' + column.description) : '')"
                                [matTooltipDisabled]="resizeManager.isResizing"
-                               [attr.aria-label]="column.title + (column.description ? ('. ' + column.description) : '') + (column.sortable && intl.sortableMessage ? '. ' + intl.sortableMessage : '')">
+                               [attr.aria-label]="column.title + (column.description ? ('. ' + column.description) : '') + (column.sortable && intl.sortableMessage ? '. ' + intl.sortableMessage : '')"
+                               matTooltipClass="preserve-whitespace">
                                 {{ column.title }}</p>
 
                             <mat-icon *ngIf="column.description"

projects/angular/components/ui-grid/src/ui-grid.component.scss

@@ -1,5 +1,11 @@
 @import "../../styles/ellipse";
 
+.preserve-whitespace {
+    word-wrap: break-word;
+    white-space: pre-line;
+    text-align: left;
+}
+
 ui-grid {
     $ui-grid-header-row-height: 56px;
     $ui-grid-header-alternate-row-height: 52px;

projects/angular/components/ui-grid/src/ui-grid.component.ts

@@ -30,6 +30,7 @@ import {
     transition,
     trigger,
 } from '@angular/animations';
+import { FocusOrigin } from '@angular/cdk/a11y';
 import {
     AfterContentInit,
     ChangeDetectionStrategy,
@@ -57,6 +58,7 @@ import {
     MatCheckbox,
     MatCheckboxChange,
 } from '@angular/material/checkbox';
+import { MatTooltip } from '@angular/material/tooltip';
 import { QueuedAnnouncer } from '@uipath/angular/a11y';
 import { ISuggestValue } from '@uipath/angular/components/ui-suggest';
 
@@ -65,8 +67,8 @@ import { UiGridExpandedRowDirective } from './body/ui-grid-expanded-row.directiv
 import { UiGridLoadingDirective } from './body/ui-grid-loading.directive';
 import { UiGridNoContentDirective } from './body/ui-grid-no-content.directive';
 import { UiGridRowActionDirective } from './body/ui-grid-row-action.directive';
-import { UiGridRowConfigDirective } from './body/ui-grid-row-config.directive';
 import { UiGridRowCardViewDirective } from './body/ui-grid-row-card-view.directive';
+import { UiGridRowConfigDirective } from './body/ui-grid-row-config.directive';
 import { UiGridSearchFilterDirective } from './filters/ui-grid-search-filter.directive';
 import { UiGridFooterDirective } from './footer/ui-grid-footer.directive';
 import { UiGridHeaderDirective } from './header/ui-grid-header.directive';
@@ -620,6 +622,12 @@ export class UiGridComponent<T extends IGridDataEntry> extends ResizableGrid<T>
      */
     scrollCompensationWidth = 0;
 
+    /**
+     * Whether column header is focused.
+     *
+     */
+    focusedColumnHeader = false;
+
     /**
      * @internal
      * @ignore
@@ -1043,6 +1051,18 @@ export class UiGridComponent<T extends IGridDataEntry> extends ResizableGrid<T>
             || (column.searchableDropdown?.value != null && (column.searchableDropdown?.value as ISuggestValue[])?.length !== 0);
     }
 
+    triggerColumnHeaderTooltip(event: FocusOrigin, tooltip: MatTooltip) {
+        if (event === 'keyboard') {
+            this.focusedColumnHeader = true;
+            tooltip.show();
+        }
+    }
+
+    hideColumnHeaderTooltip(tooltip: MatTooltip) {
+        tooltip.hide();
+        this.focusedColumnHeader = false;
+    }
+
     private _announceGridHeaderActions() {
         this._queuedAnnouncer.enqueue(this.intl.gridHeaderActionsNotice);
     }