fix(components/ag-grid): header should have readable text (#3037) (#3041

) [AB#3204448](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3204448) 🍒 from #3037
blackbaud · Jan 17, 2025 · e933fce · e933fce
1 parent b5c37ad
commit e933fce
Show file tree

Hide file tree

Showing 19 changed files with 434 additions and 85 deletions.
diff --git a/libs/components/ag-grid/package.json b/libs/components/ag-grid/package.json
@@ -36,8 +36,8 @@
     "@skyux/lookup": "0.0.0-PLACEHOLDER",
     "@skyux/popovers": "0.0.0-PLACEHOLDER",
     "@skyux/theme": "0.0.0-PLACEHOLDER",
-    "ag-grid-angular": "^32.2.2",
-    "ag-grid-community": "^32.2.2"
+    "ag-grid-angular": "^32.3.3",
+    "ag-grid-community": "^32.3.3"
   },
   "dependencies": {
     "tslib": "^2.8.1"

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.html b/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.html
@@ -1,5 +1,5 @@
 <div class="ag-cell-label-container" role="presentation">
-  @if (params?.enableMenu) {
+  @if (params()?.enableMenu) {
     <span
       class="ag-header-icon ag-header-cell-menu-button"
       aria-hidden="true"
@@ -10,23 +10,23 @@
   }
   <div class="ag-header-cell-label" role="presentation">
     <span class="ag-header-cell-label-and-icons">
-      @if (params?.enableSorting) {
+      @if (params()?.enableSorting) {
         <button
           aria-hidden="true"
           class="ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline"
           tabindex="-1"
           type="button"
-          [attr.aria-label]="accessibleHeaderText"
-          [innerText]="displayName ?? ''"
+          [attr.aria-label]="accessibleHeaderText()"
+          [innerText]="displayName() ?? ''"
           [skyThemeClass]="{ 'sky-font-heading-4': 'modern' }"
           (click)="onSortRequested($event)"
         ></button>
-      } @else if (displayName) {
+      } @else if (displayName()) {
         <span
           aria-hidden="true"
           class="ag-header-cell-text"
           [skyThemeClass]="{ 'sky-font-heading-4': 'modern' }"
-          >{{ displayName }}</span
+          >{{ displayName() }}</span
         >
       }
       @if (filterEnabled$ | async) {
@@ -36,7 +36,7 @@
           ><sky-icon icon="filter"
         /></span>
       }
-      @if (params?.enableSorting) {
+      @if (params()?.enableSorting) {
         @if (sortOrder$ | async; as sortDirection) {
           <button
             class="ag-sort-indicator-container sky-btn sky-btn-icon-borderless"
@@ -49,7 +49,7 @@
                 <sky-icon *skyThemeIf="'modern'" icon="chevron-down" />
                 <span class="sky-screen-reader-only">{{
                   'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'
-                    | skyLibResources: displayName ?? accessibleHeaderText
+                    | skyLibResources: displayName() ?? accessibleHeaderText()
                 }}</span></span
               >
             }
@@ -59,7 +59,7 @@
                 <sky-icon *skyThemeIf="'modern'" icon="chevron-up" />
                 <span class="sky-screen-reader-only">{{
                   'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'
-                    | skyLibResources: displayName ?? accessibleHeaderText
+                    | skyLibResources: displayName() ?? accessibleHeaderText()
                 }}</span></span
               >
             }
@@ -75,7 +75,7 @@
         } @else {
           <span class="sky-screen-reader-only">{{
             'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'
-              | skyLibResources: displayName ?? accessibleHeaderText
+              | skyLibResources: displayName() ?? accessibleHeaderText()
           }}</span>
         }
       }

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.ts
@@ -6,10 +6,11 @@ import {
   ComponentRef,
   ElementRef,
   EnvironmentInjector,
-  HostBinding,
   OnDestroy,
   ViewChild,
+  computed,
   inject,
+  signal,
 } from '@angular/core';
 import {
   SkyDynamicComponentLocation,
@@ -32,27 +33,54 @@ import { SkyAgGridHeaderParams } from '../types/header-params';
   styleUrls: ['./header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
+  host: {
+    '[attr.title]': 'accessibleHeaderText()',
+    '[attr.aria-label]': 'displayName() || accessibleHeaderText()',
+    '[attr.role]': '"note"',
+  },
 })
 export class SkyAgGridHeaderComponent
   implements IHeaderAngularComp, OnDestroy, AfterViewInit
 {
+  public readonly filterEnabled$ = new BehaviorSubject<boolean>(false);
+
   // For accessibility, we need to set the title attribute on the header element if there is no visible header text.
   // https://dequeuniversity.com/rules/axe/4.5/empty-table-header?application=axeAPI
-  @HostBinding('attr.title')
-  public accessibleHeaderText: string | undefined;
+  protected readonly accessibleHeaderText = computed(() => {
+    const params = this.params();
+    if (
+      params?.displayName &&
+      !params?.column.getColDef().headerComponentParams?.headerHidden
+    ) {
+      return undefined;
+    } else {
+      return params?.displayName || params?.column.getColDef().field;
+    }
+  });
 
   @ViewChild('inlineHelpContainer', { read: ElementRef, static: true })
-  public inlineHelpContainer: ElementRef | undefined;
+  protected inlineHelpContainer: ElementRef | undefined;
 
-  public params: SkyAgGridHeaderParams | undefined = undefined;
-  public sorted = '';
-  public readonly filterEnabled$ = new BehaviorSubject<boolean>(false);
-  public readonly sortOrder$ = new BehaviorSubject<'asc' | 'desc' | undefined>(
+  protected readonly params = signal<SkyAgGridHeaderParams | undefined>(
     undefined,
   );
-  public readonly sortIndexDisplay$ = new BehaviorSubject<string>('');
-
-  protected displayName: string | undefined;
+  protected sorted = '';
+  protected readonly sortOrder$ = new BehaviorSubject<
+    'asc' | 'desc' | undefined
+  >(undefined);
+  protected readonly sortIndexDisplay$ = new BehaviorSubject<string>('');
+
+  protected displayName = computed<string | undefined>(() => {
+    const params = this.params();
+    if (
+      params?.displayName &&
+      !params?.column.getColDef().headerComponentParams?.headerHidden
+    ) {
+      return params.displayName;
+    } else {
+      return undefined;
+    }
+  });
 
   #subscriptions = new Subscription();
   #inlineHelpComponentRef: ComponentRef<unknown> | undefined;
@@ -75,23 +103,12 @@ export class SkyAgGridHeaderComponent
 
   public agInit(params: SkyAgGridHeaderParams | undefined): void {
     this.#agInitialized = true;
-    this.params = params;
+    this.params.set(params);
     this.#subscriptions.unsubscribe();
     if (!params) {
       return;
     }
     this.#leftPosition = params.column.getLeft() ?? 0;
-    if (
-      params.displayName &&
-      !params.column.getColDef().headerComponentParams?.headerHidden
-    ) {
-      this.accessibleHeaderText = undefined;
-      this.displayName = params.displayName;
-    } else {
-      this.accessibleHeaderText =
-        params.displayName || params.column.getColDef().field;
-      this.displayName = undefined;
-    }
     this.#subscriptions = new Subscription();
     if (params.column.isFilterAllowed()) {
       this.#subscriptions.add(
@@ -156,12 +173,12 @@ export class SkyAgGridHeaderComponent
   }
 
   public onMenuClick($event: Event): void {
-    this.params?.showColumnMenu($event.target as HTMLElement);
+    this.params()?.showColumnMenu($event.target as HTMLElement);
   }
 
   public onSortRequested(event: MouseEvent): void {
-    if (this.params?.enableSorting) {
-      this.params?.progressSort(event.shiftKey);
+    if (this.params()?.enableSorting) {
+      this.params()?.progressSort(event.shiftKey);
     }
   }
 
@@ -175,7 +192,7 @@ export class SkyAgGridHeaderComponent
       return;
     }
 
-    const inlineHelpComponent = this.params?.inlineHelpComponent;
+    const inlineHelpComponent = this.params()?.inlineHelpComponent;
 
     if (
       inlineHelpComponent &&
@@ -187,9 +204,9 @@ export class SkyAgGridHeaderComponent
       );
 
       const headerInfo = new SkyAgGridHeaderInfo();
-      headerInfo.column = this.params?.column;
-      headerInfo.context = this.params?.context;
-      headerInfo.displayName = this.params?.displayName;
+      headerInfo.column = this.params()?.column;
+      headerInfo.context = this.params()?.context;
+      headerInfo.displayName = this.params()?.displayName;
 
       this.#inlineHelpComponentRef =
         this.#dynamicComponentService.createComponent(inlineHelpComponent, {
@@ -211,16 +228,16 @@ export class SkyAgGridHeaderComponent
   }
 
   #updateSort(): void {
-    this.sortOrder$.next(this.params?.column.getSort() || undefined);
+    this.sortOrder$.next(this.params()?.column.getSort() || undefined);
   }
 
   #updateSortIndex(): void {
-    const sortIndex = this.params?.column.getSortIndex();
-    const otherSortColumns = this.params?.api
-      ?.getColumns()
+    const sortIndex = this.params()?.column.getSortIndex();
+    const otherSortColumns = this.params()
+      ?.api?.getColumns()
       ?.some(
         (column) =>
-          column.getColId() !== this.params?.column.getColId() &&
+          column.getColId() !== this.params()?.column.getColId() &&
           !!column.getSort(),
       );
     if (sortIndex !== undefined && sortIndex !== null && otherSortColumns) {

diff --git a/libs/components/packages/package.json b/libs/components/packages/package.json
@@ -86,8 +86,8 @@
       "@skyux/tiles": "0.0.0-PLACEHOLDER",
       "@skyux/toast": "0.0.0-PLACEHOLDER",
       "@skyux/validation": "0.0.0-PLACEHOLDER",
-      "ag-grid-angular": "^32.2.2",
-      "ag-grid-community": "^32.2.2",
+      "ag-grid-angular": "^32.3.3",
+      "ag-grid-community": "^32.3.3",
       "ag-grid-enterprise": "^32.1.0",
       "autonumeric": "^4.10.5"
     }

diff --git a/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.spec.ts b/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.spec.ts
@@ -19,7 +19,7 @@ interface TestSetup {
   schematic: (options: Schema) => Rule;
 }
 
-const UPDATE_TO_VERSION = '32.2.2';
+const UPDATE_TO_VERSION = '32.3.3';
 const UPDATE_TO_MIGRATION = '32.2.1';
 
 describe('ag-grid-migrate.schematic', () => {

diff --git a/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.ts b/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.ts
@@ -6,7 +6,7 @@ import { platform } from 'os';
 import { Schema } from './schema';
 
 const AG_GRID_MIGRATION = '32.2.1';
-const AG_GRID_VERSION = '32.2.2';
+const AG_GRID_VERSION = '32.3.3';
 
 function getStartingVersion(sourceRoot: string): string | undefined {
   try {

diff --git a/libs/components/packages/src/schematics/migrations/migration-collection.json b/libs/components/packages/src/schematics/migrations/migration-collection.json
@@ -5,6 +5,11 @@
       "factory": "./noop/noop.schematic",
       "description": "Update all SKY UX component packages"
     },
+    "ag-grid": {
+      "version": "0.0.0-PLACEHOLDER",
+      "factory": "./update-12/ag-grid/ag-grid.schematic",
+      "description": "Apply code changes for AG Grid 32."
+    },
     "axe-core": {
       "version": "0.0.0-PLACEHOLDER",
       "factory": "./update-12/axe-core/axe-core.schematic",