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

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.6.3"

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>
         }
       }

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,
@@ -31,27 +32,54 @@ import { SkyAgGridHeaderParams } from '../types/header-params';
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  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;
@@ -74,23 +102,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(
@@ -155,12 +172,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);
     }
   }
 
@@ -174,7 +191,7 @@ export class SkyAgGridHeaderComponent
       return;
     }
 
-    const inlineHelpComponent = this.params?.inlineHelpComponent;
+    const inlineHelpComponent = this.params()?.inlineHelpComponent;
 
     if (
       inlineHelpComponent &&
@@ -186,9 +203,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, {
@@ -210,16 +227,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) {

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"
     }

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', () => {

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 {

libs/components/packages/src/schematics/migrations/update-11/ag-grid/ag-grid.schematic.spec.ts

@@ -5,7 +5,7 @@ import fs from 'fs-extra';
 import { joinPathFragments } from 'nx/src/utils/path';
 import { workspaceRoot } from 'nx/src/utils/workspace-root';
 
-const UPDATE_TO_VERSION = '32.2.2';
+const UPDATE_TO_VERSION = '32.3.3';
 
 describe('ag-grid.schematic', () => {
   const runner = new SchematicTestRunner(

libs/components/packages/src/schematics/migrations/update-11/ag-grid/ag-grid.schematic.ts

@@ -25,7 +25,7 @@ const AG_GRID_ENT = 'ag-grid-enterprise';
 const AG_GRID_NG = 'ag-grid-angular';
 const AG_GRID_SKY = '@skyux/ag-grid';
 
-const AG_GRID_VERSION = '^32.2.2';
+const AG_GRID_VERSION = '^32.3.3';
 
 /**
  * Check package.json for AG Grid dependencies.

libs/components/pages/project.json

@@ -24,7 +24,7 @@
       "dependsOn": [
         "^build",
         {
-          "projects": ["core", "indicators"],
+          "projects": ["core", "indicators", "layout"],
           "target": "build"
         }
       ],

libs/components/split-view/package.json

@@ -17,8 +17,8 @@
   "homepage": "https://github.com/blackbaud/skyux#readme",
   "peerDependencies": {
     "@angular/animations": "^18.2.13",
-    "@angular/common": "^18.2.13",
     "@angular/cdk": "^18.2.14",
+    "@angular/common": "^18.2.13",
     "@angular/core": "^18.2.13",
     "@angular/platform-browser": "^18.2.13",
     "@skyux-sdk/testing": "0.0.0-PLACEHOLDER",

libs/sdk/e2e-schematics/package.json

@@ -11,7 +11,7 @@
     "@nx/eslint": "^20.1.4",
     "@nx/storybook": "^20.1.4",
     "@nx/workspace": "^20.1.4",
-    "@percy/sdk-utils": "^1.30.4",
+    "@percy/sdk-utils": "^1.30.6",
     "@schematics/angular": "^18.2.12",
     "nx": "^20.1.4"
   },

libs/sdk/testing/package.json

@@ -20,7 +20,7 @@
     "@angular/core": "^18.2.13",
     "@angular/platform-browser": "^18.2.13",
     "@skyux/i18n": "0.0.0-PLACEHOLDER",
-    "axe-core": "^3.5.6 || ~4.6.3 || ~4.7.2 || ~4.10"
+    "axe-core": "^3.5.6 || ~4.6.3 || ~4.7.2 || ~4.10.2"
   },
   "dependencies": {
     "tslib": "^2.6.3"